WIP Svelte

atsebayt/src/components/ValidateSubmissions.svelte

@@ -0,0 +1,60 @@
+<script>
+ import { user } from '../stores/user';
+ import DateFormat from '../components/DateFormat.svelte';
+
+ let className = '';
+ export { className as class };
+
+ const rendus_baseurl = "https://virli.nemunai.re/rendus/";
+
+ async function getUserRendus() {
+     const res = await fetch(`${rendus_baseurl}${$user.login}.json`)
+     if (res.status == 200) {
+         return await res.json();
+     } else {
+         return null;
+     }
+ }
+</script>
+
+<table class="table {className}">
+    {#await getUserRendus()}
+        Please wait...
+    {:then rendus}
+        <thead>
+            <tr>
+                {#each Object.keys(rendus) as renduname, rid (rid)}
+                    <th>{renduname}</th>
+                {/each}
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                {#each Object.keys(rendus) as renduname, rid (rid)}
+                    <th
+                        class:bg-danger={!rendus[renduname]}
+                        class:text-center={!rendus[renduname]}
+                        class:bg-success={rendus[renduname]}
+                    >
+                        {#if rendus[renduname]}
+                            <DateFormat date={rendus[renduname].date} dateStyle="medium" timeStyle="medium" /><br>
+                            <span class="hash" title={rendus[renduname].hash}>{rendus[renduname].hash}</span>
+                        {:else}
+                            &ndash;
+                        {/if}
+                    </th>
+                {/each}
+            </tr>
+        </tbody>
+    {/await}
+</table>
+
+<style>
+    .hash {
+        max-width: 150px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: inline-block;
+    }
+</style>