ui: Almost all interface done with Svelte

frontend/ui/src/routes/__layout.svelte

@@ -0,0 +1,138 @@
+<script context="module">
+ import { issuesStore } from '../stores/issues.js';
+ import { my } from '../stores/my.js';
+ import { teamsStore } from '../stores/teams.js';
+ import { themesStore } from '../stores/themes.js';
+ import { settings, time } from '../stores/settings.js';
+
+ let refresh_interval_settings = null;
+ async function refresh_settings(cb=null, interval=null) {
+     if (refresh_interval_settings)
+         clearInterval(refresh_interval_settings);
+     if (interval === null) {
+         interval = Math.floor(Math.random() * 24000) + 32000;
+     }
+     refresh_interval_settings = setInterval(refresh_settings, interval);
+
+     if (!cb) {
+         // Before we start, update settings more frequently.
+         cb = function(stgs) {
+             const srv_cur = new Date(Date.now() + (stgs.currentTime - stgs.recvTime));
+
+             if (settings.start > srv_cur) {
+                 const startIn = settings.start - srv_cur;
+                 if (startIn > 15000) {
+                     setTimeout(refresh_settings, Math.floor(Math.random() * 10000) + 2400)
+                 } else if (startIn > 1500) {
+                     setTimeout(refresh_settings, startIn - 1000 - Math.floor(Math.random() * 500))
+                 } else {
+                     // On scheduled start time, refresh my.json file
+                     setTimeout(refresh_my, startIn + Math.floor(Math.random() * 200))
+                 }
+             }
+         };
+     }
+
+     settings.update(await fetch('/settings.json'), cb);
+ }
+
+ let refresh_interval_teams = null;
+ async function refresh_teams(cb=null, interval=null) {
+     if (refresh_interval_teams)
+         clearInterval(refresh_interval_teams);
+     if (interval === null) {
+         interval = Math.floor(Math.random() * 24000) + 32000;
+     }
+     refresh_interval_teams = setInterval(refresh_teams, interval);
+
+     teamsStore.update(await fetch('/teams.json'), cb);
+ }
+
+ let refresh_interval_themes = null;
+ async function refresh_themes(cb=null, interval=null) {
+     if (refresh_interval_themes)
+         clearInterval(refresh_interval_themes);
+     if (interval === null) {
+         interval = Math.floor(Math.random() * 24000) + 32000;
+     }
+     refresh_interval_themes = setInterval(refresh_themes, interval);
+
+     themesStore.update(await fetch('/themes.json'), cb);
+ }
+
+ let refresh_interval_my = null;
+ async function refresh_my(cb=null, interval=null) {
+     if (refresh_interval_my)
+         clearInterval(refresh_interval_my);
+     if (interval === null) {
+         interval = Math.floor(Math.random() * 24000) + 24000;
+     }
+     refresh_interval_my = setInterval(refresh_my, interval);
+
+     my.update(await fetch('/my.json'), cb);
+ }
+
+ let refresh_interval_issues = null;
+ async function refresh_issues(cb=null, interval=null) {
+     if (refresh_interval_issues)
+         clearInterval(refresh_interval_issues);
+     if (interval === null) {
+         interval = Math.floor(Math.random() * 24000) + 32000;
+     }
+     refresh_interval_issues = setInterval(refresh_issues, interval);
+
+     issuesStore.update(await fetch('/issues.json'), cb);
+ }
+
+ export async function load({ page, fetch, session, context }) {
+     await refresh_settings();
+     await refresh_themes();
+     refresh_teams();
+     refresh_my();
+     refresh_issues();
+
+     return {
+         context: {
+             ...context,
+             refresh_settings,
+             refresh_teams,
+             refresh_themes,
+             refresh_my,
+             refresh_issues,
+         }
+     };
+ }
+</script>
+
+<script>
+ import 'bootstrap/dist/css/bootstrap.min.css';
+ import "bootstrap-icons/font/bootstrap-icons.css";
+
+ import {
+     Container,
+     //Styles,
+ } from 'sveltestrap';
+
+ import Header from '../components/Header.svelte';
+</script>
+
+<svelte:head>
+    <title>{$settings.title}</title>
+</svelte:head>
+
+<!--Styles /-->
+
+<Header />
+<slot></slot>
+
+<style>
+ :global(a.badge) {
+     text-decoration: none;
+ }
+ :global(.text-justify) {
+     text-align: justify;
+ }
+ :global(.niceborder) {
+     border-bottom: 5px #4eaee6 solid !important;
+ }
+</style>