2-way communication between two services(front-end and standalone)

The standalone service is responsible for creating a printing job on a local system on which it is installed after being triggered from the front-end that is hosted on web, the status of the job must be sent to the front-end with options to cancel the job from front-end in between the job is started and completed.

The front-end will show the status of the printing in real time but we don't want the front-end to continuously listen to the standalone app.

What's the best way to have the two-way communication between the two services without polling.

Banning an ip to visit a particular page

I am making a forum for a project. I wish the users to be anonymous to the public but want to store their ip addresses in my database so that I can block them if they pass any derogatory remarks or vulgar content on the forum. Once a user is blacklisted, he/she cannot make a post request to the forum. So they cannot post. What are the possible flaws in this project? And how do I come over this solution. Thanks in advance.

Why IT Support required?

To truly get the most from your IT assets, you need access to a team of IT professionals that understands both technology and the work that you do.

The Setton Consulting team’s focus targets providing you with an optimized IT environment that allows you to get the most out of the technology assets you already own.

Keep your IT infrastructure strong and efficient by solving many IT problems. The highly-knowledgeable and skilled professionals maximize the latest technology to make your business grow at full potential. Various IT services are Managed IT Services, Cloud Services, VOIP, Network Support, Cyber Security, and many more.

Angular: hiding a component with *ngIf doesn't work

I'm just starting with Angular and have already faced an issue: a button actually toggles the variable I need (show) but it doesn't affect the course.component

course.component must show app-csgo-course, boolean show is true because the component is visible, but after it toggles in navbar.component, nothing changes.

<app-csgo-course *ngIf="show"> </app-csgo-course>

import { Component, OnInit} from '@angular/core';
import { CourseService } from 'src/app/course.service';


@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {

  constructor() { }

  ngOnInit(): void { }

  service = new CourseService;
  show = this.service.GetShow();
}

In navbar.component there's a button which toggles the "show" variable

      <button (click)="ToggleShow()" >
        <li class="nav-item active" id="csgo-logo">
          <a href="#">
            <img class="game-logo" src="assets\img\csgo-logo.png" title="Counter Strike: Global Offensive">
            <!-- <a>CS:GO <span class="sr-only">(current)</span></a> -->
          </a>
        </li>
      </button> 

import { CourseService } from 'src/app/cheat.service';
import { Component, OnInit, Input, Output, } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  service = new CourseService;
  show = this.service.GetShow();

  ngOnInit(): void {
    
  }

  public ToggleShow() {

    this.service.show = this.service.ToggleShow();
    console.log(this.service.show);
    return this.service.show;
  }
}

The course.service file

@Injectable({
  providedIn: 'root'
})
export class CourseService {

  show: boolean = true;

  GetShow() {
    return this.show;
  }

  ToggleShow() {
    return this.show = !this.show
  }

  constructor() { }
  }
}

Would appreciate your help!

How to show form action result in modal

i want to show my action result in modal, after submit button is clicked, i want modal popup show my action result........................................................................... This is html form

              <form class="g-py-15" id="submit-button" action="<?php echo base_url('cekongkir/cek_ongkir') ?>" method="POST" role="form">
                <div class="row">
                  <div class="col-xs-12 col-sm-6 mb-4">
                    <div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0">
                      <center><label><strong>From</strong></label></center>
                       <select name="province_id" id="provincefrom" onchange="loadCityfrom()"  class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required="">
                          <?php
                              echo "<option value=''> Select Province</option>";
                          foreach ($province as $p) {
                              echo "<option value='$p->province_id'>$p->prov_name</option>";
                          }
                          ?>
                      </select>
                      <div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
                        <i class="hs-admin-angle-down"></i>
                      </div>
                  </div>
                  </div>

                  <div class="col-xs-12 col-sm-6 mb-4">
                    <div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0">
                      <center><label><strong>To</strong></label></center>
                       <select name="province_id" id="provinceto" onchange="loadCityto()"  class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required="">
                          <?php
                              echo "<option value=''> Select Province</option>";
                          foreach ($province as $p) {
                              echo "<option value='$p->province_id'>$p->prov_name</option>";
                          }
                          ?>
                      </select>
                      <div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
                        <i class="hs-admin-angle-down"></i>
                      </div>
                  </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-xs-12 col-sm-6 mb-4" required="required">
                    <div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0" id="cityAreafrom" required="required">
                       <select class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required>
                          <option value="">Select City</option>
                      </select>
                      <div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
                        <i class="hs-admin-angle-down"></i>
                      </div>
                    </div>
                  </div>

                  <div class="col-xs-12 col-sm-6 mb-4" required="required">
                    <div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0" id="cityAreato" required="required">
                       <select class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required>
                          <option value="">Select City</option>
                      </select>
                      <div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
                        <i class="hs-admin-angle-down"></i>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="col-xs-12 col-sm-6 mb-4" required="">
                    <div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0" required="required" id="subdistrictAreafrom">
                       <select class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required>
                          <option value="">Select Subdistrict1</option>
                      </select>
                      <div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
                        <i class="hs-admin-angle-down"></i>
                      </div>
                    </div>
                  </div>

                  <div class="col-xs-12 col-sm-6 mb-4" required="">
                    <div class="form-group u-select--v3 g-pos-rel g-brd-none g-brd-bottom g-brd-gray-light-v7 rounded-0 mb-0" required="required" id="subdistrictAreato">
                       <select class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" required>
                          <option value="">Select Subdistrict</option>
                      </select>
                      <div class="d-flex align-items-center g-absolute-centered--y g-right-0 g-color-gray-light-v6 g-color-lightblue-v9--sibling-opened g-mr-15">
                        <i class="hs-admin-angle-down"></i>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mb-4">
                  <center><label>Berat Barang</label></center>
                  <center>
                  <div class="col-6">
                  <input class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15" name="username" type="text" placeholder="(Kg)" required="">
                </div>
              </center>
                </div>
              <footer class="text-center">
                <div class="col-12">
                    <button type="submit" class="btn btn-block u-btn-primary rounded g-px-30 g-py-11 ml-1" >Cari Ongkir</button>
                  </div>
              </footer>
          </form>

how to call the modal after form action calling action in controller

    <script type="text/javascript">
            function loadCityfrom(){
                var province = $("#provincefrom").val();
                $.ajax({
                    type:'GET',
                    url:"<?php echo base_url(); ?>register/cityList",
                    data:"province_id=" + province,
                    success: function(html)
                    { 
                       $("#cityAreafrom").html(html);
                    }
                }); 
            }
            function loadSubdistrictfrom(){
                var city = $("#city").val();
                $.ajax({
                    type:'GET',
                    url:"<?php echo base_url(); ?>register/subdistrictList",
                    data:"city_id=" + city,
                    success: function(html)
                    { 
                        $("#subdistrictAreafrom").html(html);
                    }
                }); 
            }
    </script>

    <script type="text/javascript">
            function loadCityto(){
                var province = $("#provinceto").val();
                $.ajax({
                    type:'GET',
                    url:"<?php echo base_url(); ?>register/cityListto",
                    data:"province_id=" + province,
                    success: function(html)
                    { 
                       $("#cityAreato").html(html);
                    }
                }); 
            }
            function loadSubdistrictto(){
                var city = $("#cityto").val();
                $.ajax({
                    type:'GET',
                    url:"<?php echo base_url(); ?>register/subdistrictListto",
                    data:"city_id=" + city,
                    success: function(html)
                    { 
                        $("#subdistrictAreato").html(html);
                    }
                }); 
            }
    </script>

[Here my codepen] https://codepen.io/hasta2103/pen/qBZmvjL

How to setup interactive Dashboard for user from python notebook?

I am looking for a solution to setup a Dashboard for user to query my data with plots. Basically I have my jupyter notebook script that is able to plat many useful figures, but my data source is live so I need a way to show the semi realtime plots with configurable parameters.

I try Jupyter Dashboard which is great but not sure how to setup multiple query on a web server for user to use.

I also consider Grafana, but the way it plot stuff is too limited and slow.

I also think about ODS system from facebook but looks like it is too complicated to setup.

I am looking to have a python friendly solution that run on a single server that can let people see and play my script easily.

Thank you so much!

Why is the navigation bar for my website stuck on the middle of the page?

So my website has different pages to click through, and on the home page everything is fine. I am adding this page currently, and once I added the pop up cards, my nav bar went to the middle of the screen for some reason. I am completely new to coding, so sorry if this is an easy fix. Any help would be appreciated. Here is the website

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Harvard</title>
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles1.css">
</head>
<body>
    <div class="container">
        <div class="nav-wrapper">
            <div class="left-side">
                <div class="nav-link-wrapper">
                    <a href="index.html">Data Sets</a>
                </div>
                <div class="nav-link-wrapper">
                    <a href="compare.html">Compare</a>
                </div>
            </div>

            <div class="right-side">
                <div class="brand">
                    <div>A2C Common Data Sets</div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-image"></div>
        <div class="card-text">
          <span class="date">top</span>
          <h2>One</h2>
          <p>body</p>
        </div>
        <div class="card-stats">
          <div class="stat">
            <div class="value">4<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">5123</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">32</div>
            <div class="type">#</div>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-image card2"></div>
        <div class="card-text card2">
          <span class="date">top</span>
          <h2>Two</h2>
          <p>body</p>
        </div>
        <div class="card-stats card2">
          <div class="stat">
            <div class="value">7<sup>m</sup></div>
            <div class="type">#</div>
          </div>
          <div class="stat border">
            <div class="value">7152</div>
            <div class="type">#</div>
          </div>
          <div class="stat">
            <div class="value">21</div>
            <div class="type">#</div>
          </div>
        </div>
      </div>
      <div class="card">
          <div class="card-image card3"></div>
          <div class="card-text card3">
            <span class="date">top</span>
            <h2>Three</h2>
            <p>body</p>
          </div>
          <div class="card-stats card3">
            <div class="stat">
              <div class="value">5<sup>m</sup></div>
              <div class="type">#</div>
            </div>
            <div class="stat border">
              <div class="value">3021</div>
              <div class="type">#</div>
            </div>
            <div class="stat">
              <div class="value">15</div>
              <div class="type">#</div>
            </div>
          </div>
        </div>
    </body>
</html>

CSS:

.container {
    display: grid;
    grid-template-columns: 1fr;
}

/* Nav Styles */
.nav-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 38px;
}

.left-side {
    display: flex;
}

.nav-wrapper > .left-side > div {
    margin-right: 20px;
    font-size: 0.9m;
    text-transform:uppercase;
}

.nav-link-wrapper {
    height: 22px;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.5s;
}

.nav-link-wrapper a {
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.5s;
}

.nav-link-wrapper:hover {
    border-bottom: 1px solid black;
}

.nav-link-wrapper a:hover {
    color: black;
}

.active-nav-link {
    border-bottom: 1px solid black;
}

.active-nav-link a{
    color: black;
}

/* Cards */
body {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:url();
    overflow: hidden;
  }
  .card {
    display: grid;
    grid-template-columns: 300px;
    grid-template-rows: 210px 210px 80px;
    grid-template-areas: "image" "text" "stats";
  
    border-radius: 18px;
    background: white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
    font-family: roboto;
    text-align: center;
    
  
    transition: 0.5s ease;
    cursor: pointer;
    margin:30px;
  }
  .card-image {
    grid-area: image;
    background: url("images/princeton1.png");
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-size: cover;
  }
  
  .card-text {
    grid-area: text;
    margin: 25px;
  }
  .card-text .date {
    color: rgb(255, 7, 110);
    font-size:13px;
  }
  .card-text p {
    color: grey;
    font-size:15px;
    font-weight: 300;
  }
  .card-text h2 {
    margin-top:0px;
    font-size:28px;
  }
  .card-stats {
    grid-area: stats; 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background: rgb(255, 7, 110);
  }
  .card-stats .stat {
    padding:10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
  }
  .card-stats .border {
    border-left: 1px solid rgb(172, 26, 87);
    border-right: 1px solid rgb(172, 26, 87);
  }
  .card-stats .value{
    font-size:22px;
    font-weight: 500;
  }
  .card-stats .value sup{
    font-size:12px;
  }
  .card-stats .type{
    font-size:11px;
    font-weight: 300;
    text-transform: uppercase;
  }
  .card:hover {
    transform: scale(1.15);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
  }
  
  /*card2*/
  .card-image.card2 {
    background: url("img2.jpg");
    background-size: cover;
  }
  .card-text.card2 .date {
    color: rgb(255, 77, 7);
  }
  .card-stats.card2 .border {
    border-left: 1px solid rgb(185, 67, 20);
    border-right: 1px solid rgb(185, 67, 20);
  }
  .card-stats.card2 {
    background: rgb(255, 77, 7);
  }
  /*card3*/
  .card-image.card3 {
    background: url("img3.jpg");
    background-size: cover;
  }
  .card-text.card3 .date {
    color: rgb(0, 189, 63);
  }
  .card-stats.card3 .border {
    border-left: 1px solid rgb(14, 122, 50);
    border-right: 1px solid rgb(14, 122, 50);
  }
  .card-stats.card3 {
    background: rgb(0, 189, 63);
  }