204 lines
8.2 KiB
HTML
204 lines
8.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Sykkelaksjon</title>
|
|
</head>
|
|
<body>
|
|
<div id="loading-div">
|
|
<p>Laster data...</p>
|
|
</div>
|
|
<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>
|
|
</template>
|
|
<td><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
</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>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="other-users-div">
|
|
<h3>Andre aktive:</h3>
|
|
<table>
|
|
<tr>
|
|
<th>Navn</th><th>Total avstand</th><th>Første aktivitet</th><th>Siste aktivitet</th>
|
|
</tr>
|
|
<template x-if="$store.state.data.otherUsers.length == 0">
|
|
<tr>
|
|
<td colspan="4">Det er ingen andre deltakere</td>
|
|
</tr>
|
|
</template>
|
|
<template x-if="$store.state.data.otherUsers.length > 0">
|
|
<template x-for="otherUser in $store.state.data.otherUsers">
|
|
<tr>
|
|
<td x-text="otherUser.name"></td>
|
|
<td x-text="otherUser.totalKilometers"></td>
|
|
<td x-text="otherUser.earliestActivity"></td>
|
|
<td x-text="otherUser.latestActivity"></td>
|
|
</tr>
|
|
</template>
|
|
</template>
|
|
</table>
|
|
</div>
|
|
<template x-if="$store.state.data.isAdmin">
|
|
<div class="admin-div" >
|
|
<h3>Administratorinnstillinger:</h3>
|
|
<details>
|
|
<summary>Aktivitetstyper</summary>
|
|
<h4>Opprett ny aktivitetstype:</h4>
|
|
<form id="activity-type-form" onsubmit="return false;">
|
|
<div id="activity-type-name-div">
|
|
<label for="activity-type-name">Navn:</label>
|
|
<input type="text" name="activity-type-name" id="activity-type-name" />
|
|
</div>
|
|
<div id="activity-type-unit-div">
|
|
<label for="activity-type-unit">Enhet:</label>
|
|
<input type="text" name="activity-type-unit" id="activity-type-unit" />
|
|
</div>
|
|
<div id="activity-type-conversion-factor-div">
|
|
<label for="activity-type-conversion-factor">Konverteringsfaktor:</label>
|
|
<input type="number" name="activity-type-conversion-factor" id="activity-type-conversion-factor" min="0" value="1" />
|
|
</div>
|
|
<div>
|
|
<button onclick="postActivityType();">Legg til</button>
|
|
</div>
|
|
</form>
|
|
<h4>Eksisterende aktivitetstyper:</h4>
|
|
<table>
|
|
<tr>
|
|
<th>Aktivitetstype</th>
|
|
<th>Enhet</th>
|
|
<th>Konverteringsfaktor til kilometer</th>
|
|
<th>Fjern</th>
|
|
</tr>
|
|
<template x-for="activityType in $store.state.data.activityTypes">
|
|
<tr>
|
|
<td x-text="activityType.name"></td>
|
|
<td x-text="activityType.unit"></td>
|
|
<td x-text="activityType.conversionFactor.toString()"></td>
|
|
<td><button x-on:click="$store.state.deleteActivityType(activityType)">Fjern</button></td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</details>
|
|
<details>
|
|
<summary>Brukere</summary>
|
|
<template x-for="user in $store.state.data.otherUsers">
|
|
<details>
|
|
<summary x-text="`${user.name} (${user.userName})${user.isAdmin ? ' - Administrator' : ''}`"></summary>
|
|
<template x-if="user.isAdmin">
|
|
<button x-on:click="$store.state.removeAdministrator(user.userId)">Fjern administrator</button>
|
|
</template>
|
|
<template x-if="!user.isAdmin">
|
|
<button x-on:click="$store.state.makeAdministrator(user.userId)">Gjør til administrator</button>
|
|
</template>
|
|
<button x-on:click="$store.state.deleteUser(user.userId)">Slett bruker</button>
|
|
<h4>Aktiviteter:</h4>
|
|
<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 user.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>
|
|
</template>
|
|
<td><button x-on:click="$store.state.deleteActivity(activity)">Fjern</button></td>
|
|
</tr>
|
|
</template>
|
|
</table>
|
|
</details>
|
|
</template>
|
|
</details>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|