SHARE
TWEET

Untitled

a guest Sep 18th, 2019 84 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script>
  2.     import Package from './components/Package.svelte';
  3.  
  4.     let pluginsHeaders = [ 'Name', 'Description', 'Version', 'Owner', 'Site', 'Date' ];
  5.     let pluginsPromise = getPlugins();
  6.     let isDesc = true;
  7.  
  8.     $: sortedPlugins = pluginsPromise.then((plugins) => {
  9.         return plugins.sort((first, second) => {
  10.             return (isDesc ? -1 : 1) * Date.parse(first.date) - Date.parse(second.date);
  11.         });
  12.     });
  13.  
  14.     async function getPlugins() {
  15.         const response = await fetch('http://localhost:80/');
  16.         const text = await response.text();
  17.  
  18.         if (response.ok) {
  19.             return JSON.parse(text).packages;
  20.         }
  21.  
  22.         throw new Error(text);
  23.     }
  24.  
  25. </script>
  26.  
  27. <style>
  28.     .container {
  29.         padding: 1rem;
  30.     }
  31.  
  32.     .package-list {
  33.         border: 1px solid #dddddd;
  34.     }
  35.  
  36.     .button {
  37.         cursor: pointer;
  38.     }
  39.  
  40.     :global(tr) {
  41.         display: flex;
  42.     }
  43.  
  44.     :global(td), :global(th) {
  45.         padding: 0.5rem;
  46.         flex: 1;
  47.     }
  48.  
  49.     .error {
  50.         color: red;
  51.     }
  52. </style>
  53.  
  54. <main class="container">
  55.  
  56.     {#await sortedPlugins}
  57.  
  58.         <p>Waiting for plugins...</p>
  59.  
  60.     {:then plugins}
  61.  
  62.         <table class="package-list">
  63.  
  64.             <tr>
  65.                 {#each pluginsHeaders as header, id (id)}
  66.                     {#if header === 'Date'}
  67.                         <th on:click="{e => isDesc = !isDesc}" class="button">
  68.                             {header} {isDesc ? '­čí▒' : '­čí│'}
  69.                         </th>
  70.                     {:else}
  71.                         <th>{header}</th>
  72.                     {/if}
  73.                 {/each}
  74.             </tr>
  75.  
  76.             {#each plugins as plugin, index (index) }
  77.                 <Package {...plugin} />
  78.             {/each}
  79.  
  80.         </table>
  81.  
  82.     {:catch error}
  83.  
  84.         <p class="error">
  85.             {error.message}
  86.         </p>
  87.  
  88.     {/await}
  89.  
  90. </main>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top