Add own user to the score table

client/index.html

@@ -105,7 +105,7 @@
 						</tr>
 					</template>
 					<template x-if="$store.state.data.otherUsers.length > 0">
-						<template x-for="otherUser in $store.state.data.otherUsers">
+						<template x-for="otherUser in $store.state.scoreTable">
 							<tr>
 								<template x-if="otherUser.isHidden">
 									<td>

client/src/main.ts

@@ -21,9 +21,18 @@ document.getElementById("submit-activity-template-button")?.addEventListener("cl
 let loadingDiv = document.getElementById("loading-div");
 let contentDiv = document.getElementById("content-div");
 
+interface ScoreTableEntry {
+	name: string,
+	isHidden?: boolean,
+	totalKilometers?: number,
+	earliestActivity?: string,
+	latestActivity?: string
+}
+
 // ---------------- ALPINE STATE -----------------------
 interface AlpineState {
 	data: Sykkelaksjon,
+	scoreTable: ScoreTableEntry[],
 	registerTemplateActivity: (template: ActivityTemplate) => void,
 	deleteTemplateActivity: (template: ActivityTemplate) => void,
 	deleteActivity: (activity: Activity) => void,
@@ -52,6 +61,7 @@ let defaultData: Sykkelaksjon = {
 
 let alpineState: AlpineState = {
 	data: defaultData,
+	scoreTable: [],
 	registerTemplateActivity: registerTemplateActivity,
 	deleteTemplateActivity: deleteTemplateActivity,
 	deleteActivity: deleteActivity,
@@ -68,6 +78,26 @@ let alpineState: AlpineState = {
 	},
 	setServerMessage(newMessage: Sykkelaksjon) {
 		this.data = newMessage;
+
+		let scoreTable: ScoreTableEntry[] = [];
+		newMessage.otherUsers.forEach(user => scoreTable.push(user));
+		
+		let totalKilometers = newMessage.activities.reduce((sum, activity) => {
+			return sum += activity.numberOfUnits * activity.activityType.conversionFactor;
+		}, 0.0);
+		let dates = newMessage.activities.map(a => a.date).toSorted();
+		let firstDate = dates.at(0);
+		let lastDate = dates.at(dates.length - 1);
+		scoreTable.push({
+			name: newMessage.name,
+			isHidden: newMessage.isHidden,
+			totalKilometers: totalKilometers,
+			earliestActivity: firstDate,
+			latestActivity: lastDate
+		});
+
+		scoreTable.sort((a, b) => {return (a.totalKilometers ?? 0) - (b.totalKilometers ?? 0)});
+		this.scoreTable = scoreTable;
 	},
 	getServerMessage(): Sykkelaksjon {
 		return this.data;