Add frontend display child list, add allow updating dispenses

backend/Controllers/UserController.cs

@@ -135,10 +135,34 @@ public class UserController : ControllerBase
 		var users = ApplicationState.DbContext!.Users
 			.Where(user => !user.IsParent)
 			.Select(user => new {
+				id = user.Id,
 				username = user.Username,
 				dispenses = user.Dispenses,
 			});
 
 		return new JsonResult(users);
 	}
+
+	[HttpPut]
+	[Route("Children/{id}/Dispenses")]
+	[MiddlewareFilter(typeof(ParentMiddlewareBuilder))]
+	public IActionResult UpdateChildDispenses(int id, [FromBody] JsonObject input) 
+	{
+		int dispenses;
+		if (!int.TryParse(input["dispenses"]?.ToString(), out dispenses)) {
+			return BadRequest("Dispenses must be number");
+		}
+		if (dispenses < 0) {
+			return BadRequest("Dispenses cannot be less than 0");
+		}
+
+		var user = ApplicationState.DbContext!.Users.Find(id);
+		if (user == null) {
+			return BadRequest("Invalid user ID");
+		}
+		user.Dispenses = dispenses;
+
+		ApplicationState.DbContext!.SaveChanges();
+		return Ok();
+	}
 }

backend/Program.cs

@@ -24,6 +24,7 @@ app.UseCors(builder => {
 	builder.AllowAnyHeader();
 	builder.WithOrigins("http://localhost:5173");
 	builder.AllowCredentials();
+	builder.AllowAnyMethod();
 });
 
 //app.UseHttpsRedirection();

frontend/src/assets/main.css

@@ -52,3 +52,10 @@ nav a:not(.router-link-active):hover {
 	height: 1em;
 }
 
+td, th {
+	border: 1px solid white;
+	padding: 5px;
+}
+th {
+	background-color: black;
+}

frontend/src/views/HomeView.vue

@@ -1,13 +1,27 @@
 <script setup>
 import { request } from "../assets/helpers.js";
 import { useStore } from "vuex";
+import { ref, watch } from "vue";
 
 const userStore = useStore("userStore");
+const childrenList = ref(null);
+const error = ref("");
+
+watch(userStore.state, async () => {
+	if (userStore.state.userInfo?.isParent) {
+		childrenList.value = await request("GET", "/children");
+	}
+});
 
 async function dispense() {
 	await request("POST", "/dispense");
 	userStore.state.userInfo.dispenses--;
 }
+async function saveChild(child) {
+	await request("PUT", "/children/" + child.id + "/dispenses", {dispenses: child.dispenses})
+		.then(() => error.value = "")
+		.catch(err => error.value = err);
+}
 </script>
 
 <template>
@@ -21,6 +35,28 @@ async function dispense() {
 			<br><br>
 			<h3>Your touch code is: {{ userStore.state.userInfo.touchCode }}</h3>
 			<p>Use this code to login on the dispenser</p>
+			<br>
+
+			<template v-if="userStore.state.userInfo.isParent">
+				<h2>Users:</h2>
+				<br>
+				<table align="center">
+					<tr>
+						<th>Username</th>
+						<th>Dispenses</th>
+					</tr>
+					<tr v-for="child in childrenList">
+						<td>{{ child.username }}</td>
+						<td>
+							<input type="number" min="0" v-model="child.dispenses" style="background: inherit; border: none; color: inherit; font-family: inherit">
+							<button style="padding: 2px" @click="saveChild(child)">Save</button>
+						</td>
+					</tr>
+				</table>
+			</template>
+
+			<br>
+			<p class="error">{{ error }}</p>
 		</template>
 
 		<template v-else>