martin/Sykkelaksjon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: martin/Sykkelaksjon:5a886c3481cd5fe229eba00f2e93cfdb068dd9dc
Branches Tags
martin/Sykkelaksjon:master
...
compare: martin/Sykkelaksjon:master
Branches Tags
martin/Sykkelaksjon:master
9 Commits
5a886c3481 ... master
Author SHA1 Message Date
Martin Asprusten ce9cd823f0 Stop register buttons from landing on top of each other 2026-05-22 12:48:36 +02:00
Martin Asprusten ef7b4bb2bd Stop the remove standard activity button from wrapping around and landing right next to the register button 2026-05-22 12:41:20 +02:00
Martin Asprusten 1002e908fa Specify that the total sum of kilometers is bike equivalent 2026-05-22 11:33:54 +02:00
Martin Asprusten 90ffc3a2dd Add little effect when registering activities 2026-05-22 11:24:19 +02:00
Martin Asprusten 368d07a0e4 Some more responsive design 2026-05-22 11:13:29 +02:00
Martin Asprusten eb87a831ef Created grid container to make standard activities appear on top of registered activities 2026-05-22 10:38:13 +02:00
Martin Asprusten 1b662ed4ea Sort score table so the ones with most kilometers end on top 2026-05-04 13:56:51 +02:00
Martin Asprusten bd6477e9a4 Add own user to the score table 2026-05-04 13:54:12 +02:00
Martin Asprusten 589b8deaae Bugfix for when checking if other user is hidden 2026-05-04 13:27:28 +02:00
3 changed files with 190 additions and 106 deletions
Expand all files Collapse all files
client/index.html
+90 -79
View File
@@ -13,91 +13,102 @@
<div x-data="{ unitType: $store.state.data.activityTypes[0]?.unit ?? 'km' }" id="content-div" style="display: none;">
<h1>Velkommen, <span x-text="$store.state.data.name"></span></h1>
<div class="outer-vertical-flex">
<div class="flex-container">
<div class="vertical-flex">
<div class="register-activity-div">
<h3>Registrer ny aktivitet:</h3>
<form id="activity-form">
<div class="activity-type-div">
<label for="activity-type">Type aktivitet: </label>
<template x-if="$store.state.data.activityTypes.length > 1">
<select name="activity-type" id="activity-type" x-on:change="unitType = event.target[event.target.selectedIndex].dataset.unit;">
<template x-for="activityType in $store.state.data.activityTypes" :key="activityType.id">
<option x-text="activityType.name" x-bind:value="activityType.id" x-bind:data-unit="activityType.unit"></option>
</template>
</select>
</template>
<template x-if="$store.state.data.activityTypes.length == 1">
<span><span x-text="$store.state.data.activityTypes[0].name"></span><input type="hidden" name="activity-type" x-bind:value="$store.state.data.activityTypes[0].id" /></span>
</template>
</div>
<div class="distance-div">
<label for="activity-distance">Avstand: </label>
<input id="activity-distance" name="activity-distance" type="number" min="0" step="0.1" />
<span x-text="unitType"></span>
</div>
<div class="description-div">
<label for="activity-description">Beskrivelse:</label>
<input type="text" id="activity-description" name="activity-description" />
</div>
<div class="date-div">
<label for="activity-date">Dato:</label>
<input type="date" id="activity-date" name="activity-date" />
</div>
<div class="submit-buttons-container">
<button id="submit-activity-button">Registrer aktivitet</button>
<button id="submit-activity-template-button">Legg til som standardaktivitet</button>
</div>
</form>
</div>
<div class="registered-activities-div">
<h3>Registrerte aktiviteter:</h3>
<p>Til sammen: <span x-text="$store.state.data.activities.reduce((p, a) => p + a.numberOfUnits * a.activityType.conversionFactor, 0).toFixed(1)"></span> km</p>
<table>
<tr>
<th>Dato</th>
<th>Beskrivelse</th>
<th>Avstand</th>
<template x-if="$store.state.data.unitConversionNecessary">
<th>Ekvivalent</th>
</template>
<th>Fjern registrert aktivitet</th>
</tr>
<template x-for="activity in $store.state.data.activities">
<tr>
<td x-text="activity.date"></td>
<td x-text="activity.description"></td>
<td x-text="`${activity.numberOfUnits} ${activity.activityType.unit}`"></td>
<template x-if="$store.state.data.unitConversionNecessary">
<td x-text="`${activity.numberOfUnits * activity.activityType.conversionFactor} km`"></td>
<div class="grid-container">
<div class="register-activity-div">
<h3>Registrer ny aktivitet:</h3>
<form id="activity-form">
<div class="activity-type-div">
<label for="activity-type">Type aktivitet: </label>
<template x-if="$store.state.data.activityTypes.length > 1">
<select name="activity-type" id="activity-type" x-on:change="unitType = event.target[event.target.selectedIndex].dataset.unit;">
<template x-for="activityType in $store.state.data.activityTypes" :key="activityType.id">
<option x-text="activityType.name" x-bind:value="activityType.id" x-bind:data-unit="activityType.unit"></option>
</template>
<td><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
</tr>
</select>
</template>
</table>
</div>
</div>
<template x-if="$store.state.data.activityTypes.length == 1">
<span><span x-text="$store.state.data.activityTypes[0].name"></span><input type="hidden" name="activity-type" x-bind:value="$store.state.data.activityTypes[0].id" /></span>
</template>
</div>
<div class="distance-div">
<label for="activity-distance">Avstand: </label>
<input id="activity-distance" name="activity-distance" type="number" min="0" step="0.1" />
<span x-text="unitType"></span>
</div>
<div class="description-div">
<label for="activity-description">Beskrivelse:</label>
<input type="text" id="activity-description" name="activity-description" />
</div>
<div class="date-div">
<label for="activity-date">Dato:</label>
<input type="date" id="activity-date" name="activity-date" />
</div>
<div class="submit-buttons-container">
<button id="submit-activity-button">Registrer aktivitet</button>
<button id="submit-activity-template-button">Legg til som standardaktivitet</button>
</div>
</form>
</div>
<div class="standard-activities-div">
<h3>Standardaktiviteter:</h3>
<template x-for="activityTemplate in $store.state.data.activityTemplates" :key="activityTemplate.id">
<p>
<button x-on:click="$store.state.registerTemplateActivity(activityTemplate)">Registrer</button>
<span x-text="`${activityTemplate.name}, ${activityTemplate.activityType.name.toLowerCase()}, ${activityTemplate.numberOfUnits} ${activityTemplate.activityType.unit}`"></span>
<button x-on:click="$store.state.deleteTemplateActivity(activityTemplate)">Fjern</button>
<p x-data="{ clicked: false }">
<template x-if="clicked">
<div class="registered-grid">
<button disabled="true">Tur registrert!</button>
<span x-text="`${activityTemplate.name}, ${activityTemplate.activityType.name.toLowerCase()}, ${activityTemplate.numberOfUnits} ${activityTemplate.activityType.unit}`" style="color: green; text-shadow: 1px 1px 2px greenyellow;"></span>
</div>
</template>
<template x-if="!clicked">
<div class="registered-grid">
<span>
<button x-on:click="$store.state.registerTemplateActivity(activityTemplate); clicked=true; setTimeout(() => {clicked = false;}, 1000)">Registrer</button>
</span>
<span x-text="`${activityTemplate.name}, ${activityTemplate.activityType.name.toLowerCase()}, ${activityTemplate.numberOfUnits} ${activityTemplate.activityType.unit}`"></span>
<span>
<button x-on:click="$store.state.deleteTemplateActivity(activityTemplate)">Fjern</button>
</span>
</div>
</template>
</p>
</template>
</div>
<div class="registered-activities-div">
<h3>Registrerte aktiviteter:</h3>
<p>Til sammen (sykkelekvivalent): <span x-text="$store.state.data.activities.reduce((p, a) => p + a.numberOfUnits * a.activityType.conversionFactor, 0).toFixed(1)"></span> km</p>
<table>
<tr>
<th>Dato</th>
<th>Beskrivelse</th>
<th>Avstand</th>
<template x-if="$store.state.data.unitConversionNecessary">
<th class="removable-on-small-screen">Ekvivalent</th>
</template>
<th>Fjern registrert aktivitet</th>
</tr>
<template x-for="activity in $store.state.data.activities">
<tr>
<td x-text="activity.date"></td>
<td x-text="activity.description"></td>
<td x-text="`${activity.numberOfUnits} ${activity.activityType.unit}`"></td>
<template x-if="$store.state.data.unitConversionNecessary">
<td class="removable-on-small-screen" x-text="`${activity.numberOfUnits * activity.activityType.conversionFactor} km`"></td>
</template>
<td class="remove-button-cell"><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
</tr>
</template>
</table>
</div>
</div>
<div class="other-users-div">
<h3>Andre aktive:</h3>
<input type="checkbox" id="hideMeCheckbox" x-model="$store.state.data.isHidden" x-on:click="$store.state.onClickHideCheckbox" /><label id="hideMeLabel" for="hideMeCheckbox">Skjul meg fra den globale listen</label>
<table>
<table id="active-users-table">
<tr>
<th>Navn</th><th>Total avstand</th><th>Første aktivitet</th><th>Siste aktivitet</th>
<th>Navn</th><th>Total avstand</th><th class="removable-on-small-screen">Første aktivitet</th><th class="removable-on-small-screen">Siste aktivitet</th>
</tr>
<template x-if="$store.state.data.otherUsers.length == 0">
<tr>
@@ -105,19 +116,19 @@
</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="$store.state.data.otherUser.isHidden">
<template x-if="otherUser.isHidden">
<td>
<i x-text="otherUser.name"></i>
</td>
</template>
<template x-if="!$store.state.data.otherUser.isHidden">
<template x-if="!otherUser.isHidden">
<td x-text="otherUser.name"></td>
</template>
<td x-text="otherUser.totalKilometers.toFixed(1)"></td>
<td x-text="otherUser.earliestActivity"></td>
<td x-text="otherUser.latestActivity"></td>
<td class="removable-on-small-screen" x-text="otherUser.earliestActivity"></td>
<td class="removable-on-small-screen" x-text="otherUser.latestActivity"></td>
</tr>
</template>
</template>
@@ -183,7 +194,7 @@
<th>Beskrivelse</th>
<th>Avstand</th>
<template x-if="$store.state.data.unitConversionNecessary">
<th>Ekvivalent</th>
<th class="removable-on-small-screen">Ekvivalent</th>
</template>
<th>Fjern registrert aktivitet</th>
</tr>
@@ -193,9 +204,9 @@
<td x-text="activity.description"></td>
<td x-text="`${activity.numberOfUnits} ${activity.activityType.unit}`"></td>
<template x-if="$store.state.data.unitConversionNecessary">
<td x-text="`${(activity.numberOfUnits * activity.activityType.conversionFactor)} km`"></td>
<td class="removable-on-small-screen" x-text="`${(activity.numberOfUnits * activity.activityType.conversionFactor)} km`"></td>
</template>
<td><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
<td class="remove-button-cell"><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
</tr>
</template>
</table>
client/src/main.ts
+30
View File
@@ -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 (b.totalKilometers ?? 0) - (a.totalKilometers ?? 0)});
this.scoreTable = scoreTable;
},
getServerMessage(): Sykkelaksjon {
return this.data;
client/src/style.css
+70 -27
View File
@@ -13,20 +13,69 @@ body {
text-align: left;
}
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
flex: auto;
.grid-container {
display: grid;
column-gap: 20px;
row-gap: 20px;
}
.vertical-flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 20px;
@media (min-width: 1000px) {
.grid-container {
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.standard-activities-div {
grid-column: 2;
grid-row: 1 / -1;
}
}
@media (max-width: 999px) {
.grid-container {
grid-template-columns: auto;
grid-template-rows: auto auto auto;
}
}
@media (min-width: 700px) {
.register-activity-div input {
width: 200px;
}
label {
width: 200px;
}
.registered-activities-div td button {
width: 100px;
}
.registered-activities-div td {
padding-right:10px;
}
}
@media (max-width: 699px) {
.register-activity-div input {
width: 120px;
}
label {
width: 120px;
}
.removable-on-small-screen {
display: none;
}
.registered-activities-div td button {
width: 80px;
}
.registered-activities-div td {
padding-right:0px;
}
}
.register-activity-div {
@@ -35,22 +84,25 @@ body {
line-height: 1.8;
}
.register-activity-div input {
width: 200px;
.registered-grid {
display: grid;
grid-template-columns: fit-content(90px) auto fit-content(90px);
gap: 5px;
}
.remove-button-cell {
text-align: center;
}
label {
display: inline-block;
width: 200px;
}
.submit-buttons-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 20px;
margin-right: 20px;
justify-content: space-around;
}
.standard-activities-div {
@@ -71,15 +123,6 @@ table,td,th {
border: 1px solid lightgray;
}
.registered-activities-div td {
padding-right:10px;
}
.registered-activities-div td button {
margin-left:50px;
width: 100px;
}
.other-users-div {
border: 1px gray solid;
padding: 10px;