Svelte_refresh_table

<script context="module">
    export function preload({ params, query }) {
        return this.fetch(`http://localhost:1337/projects`).then(r => r.json()).then(projects => {
            return { projects };
        });
    }
</script>

<script>
    import { afterUpdate } from 'svelte';
    import axios from 'axios';
    import { goto } from '@sapper/app';
    import New from './new.svelte';

    export let projects;
    let nome;
    let descrizione;

    function progetti(){
        fetch(`http://localhost:1337/projects`).then(r => r.json()).then(projects => {
            return { projects };
        });
    }

    function disattiva(id){
        axios.put(`http://localhost:1337/projects/${id}`, {
        active: false
        })
        .then(function (response) {
            progetti()
            goto('/projects');
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    function attiva(id){
        axios.put(`http://localhost:1337/projects/${id}`, {
        active: true
        }).then(function (response) {
            progetti()
            goto('/projects');
        }).catch(function (error) {
            console.log(error);
        });
    }

    function add_project(){
            axios.post('http://localhost:1337/projects', {
            nome: nome,
            descrizione: descrizione
        })
        .then(function (response) {
            console.log(response);
            window.$('#newproject').modal('hide');
            goto('/projects');
        })
        .catch(function (error) {
            console.log(error);
        });
    }
</script>

<style>
</style>

<svelte:head>
    <title>Projects</title>
</svelte:head>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newproject">
  Aggiungi nuovo progetto
</button>


<div class="modal fade" id="newproject" tabindex="-1" role="dialog" aria-labelledby="newproject" aria-hidden="true" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newproject">Aggiungi Progetto</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form on:submit|preventDefault={add_project}>
            <input class="js-todo-input" type="text" aria-label="Inserisci un nuovo progetto" placeholder="E.g. Build a web app" bind:value={nome}>
            <input class="js-todo-input" type="text" aria-label="Inserisci una descrizione" placeholder="E.g. Build a web app" bind:value={descrizione}>
            <button bind={add_project}>Crea</button>
        </form>
      </div>
    </div>
  </div>
</div>


<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">Nome</th>
      <th scope="col">Descrizione</th>
      <th scope="col">Active</th>
    </tr>
  </thead>
  <tbody>
    {#each projects as project}
        <tr>
            <th scope="row"><a rel='prefetch' href='projects/{project._id}'>{project.nome}</a></th>
            <td>{project.descrizione}</td>
            <td>
            {#if project.active == true}
                <button type="button" class="btn btn-success" on:click={() => disattiva(project._id)}>Attivo</button>
            {:else}
                <button type="button" class="btn btn-danger" on:click={() => attiva(project._id)}>Disattiva</button>
            {/if}
            </td>
            <td>{project.active}</td>
        </tr>
    {/each}
  </tbody>
</table>