ui: Add helpers for formating date and file size

frontend/ui/src/components/DateFormat.svelte

@@ -0,0 +1,17 @@
+<script>
+ export let date;
+ export let dateStyle = "long";
+ export let timeStyle = "long";
+
+ function formatDate(input, dateStyle, timeStyle) {
+     if (typeof input === 'string') {
+         input = new Date(input);
+     }
+     return new Intl.DateTimeFormat(undefined, {
+         dateStyle,
+         timeStyle,
+     }).format(input);
+ }
+</script>
+
+{formatDate(date, dateStyle, timeStyle)}

frontend/ui/src/components/ExerciceDownloads.svelte

@@ -9,6 +9,8 @@
      ListGroupItem,
  } from 'sveltestrap';
 
+ import FileSize from './FileSize.svelte';
+
  export let files = [];
 </script>
 
@@ -33,7 +35,7 @@
 		        <h4 class="fw-bold"><samp>{file.name}</samp></h4>
                         <nobr>
                             Taille&nbsp;:
-                            <span title="{file.size} octets">{file.size}</span>
+                            <FileSize size={file.size} />
                         </nobr>
                         <nobr class="d-block text-truncate">
                             <span title="blake2.net">b2sum</span>&nbsp;:

frontend/ui/src/components/ExerciceFlags.svelte

@@ -12,6 +12,7 @@
      Spinner,
  } from 'sveltestrap';
 
+ import DateFormat from './DateFormat.svelte';
  import FlagKey from './FlagKey.svelte';
  import FlagMCQ from './FlagMCQ.svelte';
 
@@ -113,7 +114,7 @@
             {#if exercice.solved_time && exercice.tries}
                 <ListGroupItem class="text-warning rounded-0">
                     {exercice.tries} {exercice.tries==1?"tentative effectuée":"tentatives effectuées"}.
-                    Dernière solution envoyée à {exercice.solved_time}.
+                    Dernière solution envoyée à <DateFormat date={exercice.solved_time} />.
                 </ListGroupItem>
             {/if}
             {#if exercice.solve_dist}

frontend/ui/src/components/ExerciceSolved.svelte

@@ -9,6 +9,8 @@
      ListGroupItem,
  } from 'sveltestrap';
 
+ import DateFormat from './DateFormat.svelte';
+
  export let theme = {};
  export let exercice = {};
 </script>
@@ -21,9 +23,9 @@
     <CardBody class="text-indent">
 	<CardText>
             {#if exercice.solved_rank}
-                Vous êtes la {exercice.solved_rank}<sup>{exercice.solved_rank==1?"re":"e"}</sup> équipe à avoir résolu ce défi à {exercice.solved_time}.
+                Vous êtes la {exercice.solved_rank}<sup>{exercice.solved_rank==1?"re":"e"}</sup> équipe à avoir résolu ce défi à <DateFormat date={exercice.solved_time} />.
             {:else}
-                Bravo, vous avez résolu ce défi à {exercice.solved_time}.
+                Bravo, vous avez résolu ce défi à <DateFormat date={exercice.solved_time} />{exercice.solved_time}.
             {/if}
             Vous avez marqué {exercice.gain} {exercice.gain==1?"point":"points"}&nbsp;!
         </CardText>

frontend/ui/src/components/FileSize.svelte

@@ -0,0 +1,28 @@
+<script>
+ export let size;
+
+ const units = [
+     "o",
+     "kio",
+     "Mio",
+     "Gio",
+     "Tio",
+     "Pio",
+     "Eio",
+     "Zio",
+     "Yio",
+ ]
+ function formatSize(input) {
+     var res = input;
+     var unit = 0;
+     while (res > 1024) {
+	 unit += 1;
+	 res = res / 1024;
+     }
+     return (Math.round(res * 100) / 100) + " " + units[unit];
+ }
+</script>
+
+<span title="{size} octets">
+    {formatSize(size)}
+</span>

frontend/ui/src/routes/issues.svelte

@@ -29,6 +29,8 @@
      Table,
  } from 'sveltestrap';
 
+ import DateFormat from '../components/DateFormat.svelte';
+
  import { issues, issues_nb_responses, issues_known_responses } from '../stores/issues.js';
  import { settings } from '../stores/settings.js';
 
@@ -157,7 +159,7 @@
                     {#each issue.texts as text, index}
 	                <p style="margin-left: 15px; text-indent: -15px">
                             {#if !text.assignee || text.assignee == '$team'}Vous{:else}{text.assignee}{/if}
-	                    à {text.date}&nbsp;:
+	                    le <DateFormat date={text.date} />&nbsp;:
 	                    <span style="white-space: pre-line">{text.cnt}</span>
 	                </p>
                     {/each}