ui: Fix loading problems when themes arrived to late

frontend/ui/src/components/Header.svelte

@@ -83,7 +83,7 @@
             {#if $my && $my.team_id}
                 <NavItem>
                     {$my.score} {$my.score === 1 ? 'point' : 'points'}
-                    {#if $teams[$my.team_id].rank}
+                    {#if $teams && $teams[$my.team_id].rank}
                         &ndash; {$teams[$my.team_id].rank}<sup>e</sup> sur {Object.keys($teams).length}
                     {/if}
                 </NavItem>
@@ -93,7 +93,7 @@
                     <Badge href="/register" color="warning">
 	                Inscription
 	            </Badge>
-                {:else if $my.team_id}
+                {:else if $my.team_id && $teams}
                     <Badge href="/edit" style="background-color: {$teams[$my.team_id].color} !important; color: {$teams[$my.team_id].color};">
 	                <span class="teamname">{$my.name}</span>
 	            </Badge>

frontend/ui/src/routes/[theme]/[exercice].svelte

@@ -53,14 +53,14 @@
 </script>
 
 <svelte:head>
-    <title>{exercice.title} - {$settings.title}</title>
+    <title>{exercice?exercice.title+" - ":""}{$settings.title}</title>
 </svelte:head>
 
 {#if exercice}
     <ThemeNav {theme} {exercice} />
 {/if}
 
-{#if !$my || !$my.exercices[exercice.id]}
+{#if !$my || !exercice || !$my.exercices[exercice.id]}
     <Alert color="warning" class="mt-3" fade={false}>
         <Icon name="dash-circle-fill" />
         Vous n'avez pas encore accès à ce défi.

frontend/ui/src/routes/[theme]/__layout.svelte

@@ -7,9 +7,8 @@
      const thms = get_store_value(themes);
 
      let theme = null;
-
      for (let th in thms) {
-         if (thms[th].urlid === page.params.theme) {
+         if (thms[th] && thms[th].urlid === page.params.theme) {
              theme = thms[th];
              break;
          }
@@ -33,11 +32,11 @@
 
  import { settings } from '../../stores/settings.js';
 
- export let theme = null;
+ export let theme;
 </script>
 
 <svelte:head>
-    <title>{theme.name} - {$settings.title}</title>
+    <title>{theme?theme.name:""} - {$settings.title}</title>
 </svelte:head>
 
 {#if theme}

frontend/ui/src/routes/__layout.svelte

@@ -57,7 +57,7 @@
      }
      refresh_interval_themes = setInterval(refresh_themes, interval);
 
-     themesStore.update(await fetch('/themes.json'), cb);
+     await themesStore.update(await fetch('/themes.json'), cb);
  }
 
  let refresh_interval_my = null;

frontend/ui/src/stores/themes.js

@@ -1,50 +1,50 @@
 import { derived, writable } from 'svelte/store';
 
 function createThemesStore() {
-  const { subscribe, set, update } = writable({themes: {}, exercices_idx: {}, max_solved: 0});
+  const { subscribe, set, update } = writable({themes: null, exercices_idx: {}, max_solved: 0});
 
   return {
     subscribe,
-    update: (res_themes, cb=null) => {
+    update: async (res_themes, cb=null) => {
       if (res_themes.status === 200) {
-        res_themes.json().then((themes) => {
+        const themes = await res_themes.json();
-          let max_solved = 0;
-          const exercices_idx = {};
 
-          for (let key in themes) {
+        let max_solved = 0;
-            const theme = themes[key];
+        const exercices_idx = {};
 
-            if (theme.solved > max_solved) {
+        for (let key in themes) {
-              max_solved = theme.solved;
+          const theme = themes[key];
+
+          if (theme.solved > max_solved) {
+            max_solved = theme.solved;
+          }
+
+	  themes[key].exercice_count = Object.keys(theme.exercices).length;
+	  themes[key].exercice_coeff_max = 0;
+	  themes[key].max_gain = 0;
+	  let last_exercice = null;
+	  for (let k in theme.exercices) {
+            const exercice = theme.exercices[k];
+
+            themes[key].max_gain += exercice.gain;
+            if (themes[key].exercice_coeff_max < exercice.curcoeff) {
+              themes[key].exercice_coeff_max = exercice.curcoeff;
             }
 
-	    themes[key].exercice_count = Object.keys(theme.exercices).length;
+	    if (last_exercice != null)
-	    themes[key].exercice_coeff_max = 0;
+	      themes[key].exercices[last_exercice].next = k;
-	    themes[key].max_gain = 0;
+	    last_exercice = k;
-	    let last_exercice = null;
-	    for (let k in theme.exercices) {
-              const exercice = theme.exercices[k];
 
-              themes[key].max_gain += exercice.gain;
+            exercice.id = k;
-              if (themes[key].exercice_coeff_max < exercice.curcoeff) {
+            exercices_idx[k] = exercice;
-                themes[key].exercice_coeff_max = exercice.curcoeff;
+	  }
-              }
+        }
 
-	      if (last_exercice != null)
+        update((t) => (Object.assign(t, {themes, exercices_idx, max_solved})));
-	        themes[key].exercices[last_exercice].next = k;
-	      last_exercice = k;
 
-              exercice.id = k;
+        if (cb) {
-              exercices_idx[k] = exercice;
+          cb(themes, exercices_idx, max_solved);
-	    }
+        }
-          }
-
-          update((t) => (Object.assign(t, {themes, exercices_idx, max_solved})));
-
-          if (cb) {
-            cb(themes, exercices_idx, max_solved);
-          }
-        });
       }
     },
   };