Added time UI

application/public/styles.scss

@@ -177,3 +177,20 @@ form {
 .participants-container .selected {
   border: 1px solid $primary-color;
 }
+
+.time-input-container {
+  display: flex;
+  gap: 10px;
+  margin: 10px 0px;
+}
+
+.time-input-container input[type=number] {
+  width: 30px;
+  text-align: center;
+  -moz-appearance: textfield;
+}
+
+.time-input-container input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}

application/src/pages/times/add.rs

@@ -92,18 +92,25 @@ pub fn Add() -> impl IntoView {
         <form class="add" on:submit=on_submit>
             <input type="text"
                 placeholder="Name"
+                tabindex=0
                 on:input=move |ev| {
                     set_name.set(event_target_value(&ev));
                     set_selected.set(0);
                 }
                 prop:value=name
             />
-            <ul class="participants-container" node_ref=container_ref>
+            <ul class="participants-container" tabindex=-1 node_ref=container_ref>
                 {move || participants_sorted.get().into_iter().enumerate().map(|(i, participant)| view! {
                     <li on:click=move |_| set_selected.set(i) class:selected=move || selected.get() == i>{participant.name + " " + "(" + &participant.group[6..].to_string() + ")" }</li>
                 }).collect_view()}
             </ul>
-            <input type="submit" value="Submit" />
+            <div class="time-input-container">
+                <span>"Tijd:"</span>
+                <input type="number" tabindex=0 placeholder="mm" min=0 max=99 />
+                <input type="number" tabindex=0 placeholder="ss" min=0 max=59 />
+                <input type="number" tabindex=0 placeholder="ms" min=0 max=99 />
+            </div>
+            <input type="submit" tabindex=0 value="Submit" />
         </form>
         <p class="error">
             { error }

flake.lock

@@ -5,11 +5,11 @@
         "systems": "systems"
       },
       "locked": {
-        "lastModified": 1705309234,
-        "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
+        "lastModified": 1710146030,
+        "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
+        "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
         "type": "github"
       },
       "original": {
@@ -38,11 +38,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1707514827,
-        "narHash": "sha256-Y+wqFkvikpE1epCx57PsGw+M1hX5aY5q/xgk+ebDwxI=",
+        "lastModified": 1710951922,
+        "narHash": "sha256-FOOBJ3DQenLpTNdxMHR2CpGZmYuctb92gF0lpiirZ30=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "20f65b86b6485decb43c5498780c223571dd56ef",
+        "rev": "f091af045dff8347d66d186a62d42aceff159456",
         "type": "github"
       },
       "original": {
@@ -54,11 +54,11 @@
     },
     "nixpkgs-unstable": {
       "locked": {
-        "lastModified": 1707546158,
-        "narHash": "sha256-nYYJTpzfPMDxI8mzhQsYjIUX+grorqjKEU9Np6Xwy/0=",
+        "lastModified": 1711001935,
+        "narHash": "sha256-URtGpHue7HHZK0mrHnSf8wJ6OmMKYSsoLmJybrOLFSQ=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "d934204a0f8d9198e1e4515dd6fec76a139c87f0",
+        "rev": "20f77aa09916374aa3141cbc605c955626762c9a",
         "type": "github"
       },
       "original": {
@@ -98,11 +98,11 @@
         "nixpkgs": "nixpkgs_2"
       },
       "locked": {
-        "lastModified": 1707703915,
-        "narHash": "sha256-Vej69igzNr3eVDca6+32uO+TXjVWx6ZUwwy3iZuzhJ4=",
+        "lastModified": 1711073443,
+        "narHash": "sha256-PpNb4xq7U5Q/DdX40qe7CijUsqhVVM3VZrhN0+c6Lcw=",
         "owner": "oxalica",
         "repo": "rust-overlay",
-        "rev": "e6679d2ff9136d00b3a7168d2bf1dff9e84c5758",
+        "rev": "eec55ba9fcde6be4c63942827247e42afef7fafe",
         "type": "github"
       },
       "original": {