Renamed to reflect admin attendee functionality.
This commit is contained in:
348
frontend/components/admin/registerAttendeePage.vue
Normal file
348
frontend/components/admin/registerAttendeePage.vue
Normal file
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<h1>Legg til deltaker</h1>
|
||||
|
||||
<div class="attendee-registration-container">
|
||||
<div class="row flex">
|
||||
<div class="label-div">
|
||||
<label for="name" ref="name">Navn</label>
|
||||
<input id="name" type="text" placeholder="Navn" v-model="name" />
|
||||
|
||||
<ul class="autocomplete" v-if="autocompleteAttendees.length">
|
||||
<a
|
||||
v-for="attendee in autocompleteAttendees"
|
||||
tabindex="0"
|
||||
@keydown.enter="setName(attendee)"
|
||||
@keydown.space="setName(attendee)"
|
||||
>
|
||||
<li @click="setName(attendee)">
|
||||
{{ attendee }}
|
||||
</li>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="label-div">
|
||||
<label for="phoneNumber">Telefonnummer</label>
|
||||
<input
|
||||
id="phoneNumber"
|
||||
ref="phone"
|
||||
type="phone"
|
||||
pattern="[0-9]"
|
||||
placeholder="Telefonnummer"
|
||||
v-model="phoneNumber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="label-div">
|
||||
<label for="randomColors">Tilfeldig farger?</label>
|
||||
<input id="randomColors" type="checkbox" placeholder="Tilfeldig farger" v-model="randomColors" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!randomColors">
|
||||
<div class="row flex">
|
||||
<div class="label-div" v-for="color in colors">
|
||||
<label :for="color.key">{{ color.name }}</label>
|
||||
<input :id="color.key" type="number" :placeholder="color.name" v-model="color.value" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="vin-button" @click="sendAttendee">Send deltaker</button>
|
||||
|
||||
<div v-if="randomColors">
|
||||
<RaffleGenerator @colors="setWithRandomColors" :generateOnInit="true" :compact="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Attendees :attendees="attendees" :admin="isAdmin" />
|
||||
|
||||
<div v-if="attendees.length" class="button-container" style="margin-top: 2rem;">
|
||||
<button class="vin-button danger" @click="deleteAllAttendees">
|
||||
Slett alle deltakere
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import io from "socket.io-client";
|
||||
import Attendees from "@/ui/Attendees";
|
||||
import RaffleGenerator from "@/ui/RaffleGenerator";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Attendees,
|
||||
RaffleGenerator
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
red: {
|
||||
name: "Rød",
|
||||
key: "red",
|
||||
value: 0
|
||||
},
|
||||
blue: {
|
||||
name: "Blå",
|
||||
key: "blue",
|
||||
value: 0
|
||||
},
|
||||
green: {
|
||||
name: "Grønn",
|
||||
key: "green",
|
||||
value: 0
|
||||
},
|
||||
yellow: {
|
||||
name: "Gul",
|
||||
key: "yellow",
|
||||
value: 0
|
||||
},
|
||||
isAdmin: false,
|
||||
name: null,
|
||||
phoneNumber: null,
|
||||
raffles: 0,
|
||||
randomColors: false,
|
||||
attendees: [],
|
||||
autocompleteAttendees: [],
|
||||
socket: null,
|
||||
previousAttendees: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
attendees() {
|
||||
this.$emit("counter", this.attendees.length || 0);
|
||||
},
|
||||
randomColors(val) {
|
||||
if (val == false) {
|
||||
this.colors.map(color => (color.value = 0));
|
||||
}
|
||||
},
|
||||
name(newVal, oldVal) {
|
||||
if (newVal == "" || newVal == null) {
|
||||
this.autocompleteAttendees = [];
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.autocompleteAttendees.includes(newVal)) {
|
||||
this.autocompleteAttendees = [];
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.previousAttendees.length == 0) {
|
||||
fetch(`/api/history`)
|
||||
.then(resp => resp.json())
|
||||
.then(response => (this.previousAttendees = response.winners));
|
||||
}
|
||||
|
||||
this.autocompleteAttendees = this.previousAttendees
|
||||
.filter(attendee => attendee.name.toLowerCase().includes(newVal))
|
||||
.map(attendee => attendee.name);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getAttendees();
|
||||
this.getWinners();
|
||||
|
||||
this.socket = io(`${window.location.hostname}:${window.location.port}`);
|
||||
|
||||
this.socket.on("winner", async msg => {
|
||||
this.getWinners();
|
||||
this.getAttendees();
|
||||
});
|
||||
|
||||
this.socket.on("refresh_data", async msg => {
|
||||
this.getAttendees();
|
||||
this.getWinners();
|
||||
});
|
||||
|
||||
this.socket.on("new_attendee", async msg => {
|
||||
this.getAttendees();
|
||||
});
|
||||
|
||||
window.finishedDraw = finishedDraw;
|
||||
},
|
||||
computed: {
|
||||
colors() {
|
||||
return [this.red, this.blue, this.green, this.yellow];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setName(name) {
|
||||
this.name = name;
|
||||
this.$refs.phone.focus();
|
||||
},
|
||||
setWithRandomColors(colors) {
|
||||
Object.keys(colors).forEach(color => (this[color].value = colors[color]));
|
||||
},
|
||||
checkIfAdmin(resp) {
|
||||
this.isAdmin = resp.headers.get("vinlottis-admin") == "true" || false;
|
||||
return resp;
|
||||
},
|
||||
getAttendees: async function() {
|
||||
return fetch("/api/lottery/attendees")
|
||||
.then(resp => this.checkIfAdmin(resp))
|
||||
.then(resp => resp.json())
|
||||
.then(response => (this.attendees = response.attendees));
|
||||
},
|
||||
sendAttendee: async function() {
|
||||
const { red, blue, green, yellow } = this;
|
||||
|
||||
if (red.value == 0 && blue.value == 0 && green.value == 0 && yellow.value == 0) {
|
||||
this.$toast.error({ title: "Ingen farger valgt!" });
|
||||
return;
|
||||
}
|
||||
if (this.name == 0 && this.phoneNumber) {
|
||||
this.$toast.error({ title: "Ingen navn eller tlf satt!" });
|
||||
return;
|
||||
}
|
||||
|
||||
const attendee = {
|
||||
name: this.name,
|
||||
phoneNumber: Number(this.phoneNumber),
|
||||
red: Number(red.value),
|
||||
blue: Number(blue.value),
|
||||
green: Number(green.value),
|
||||
yellow: Number(yellow.value),
|
||||
raffles: Number(this.raffles)
|
||||
};
|
||||
|
||||
const options = {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ attendee })
|
||||
};
|
||||
|
||||
return fetch("/api/lottery/attendee", options)
|
||||
.then(resp => resp.json())
|
||||
.then(response => {
|
||||
if (response.success == true) {
|
||||
this.$toast.info({
|
||||
title: `Sendt inn deltaker: ${this.name}`,
|
||||
timeout: 4000
|
||||
});
|
||||
|
||||
this.name = "";
|
||||
this.phoneNumber = null;
|
||||
this.yellow.value = 0;
|
||||
this.green.value = 0;
|
||||
this.red.value = 0;
|
||||
this.blue.value = 0;
|
||||
this.randomColors = false;
|
||||
|
||||
this.$refs.name.focus();
|
||||
this.getAttendees();
|
||||
} else {
|
||||
this.$toast.error({
|
||||
title: `Klarte ikke sende deltaker`,
|
||||
description: response.message,
|
||||
timeout: 4000
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
deleteAllAttendees() {
|
||||
if (window.confirm("Er du sikker på at du vil slette alle deltakere?")) {
|
||||
const options = { method: "DELETE" };
|
||||
|
||||
fetch("/api/lottery/attendees", options)
|
||||
.then(resp => resp.json())
|
||||
.then(response => {
|
||||
if (response.success) {
|
||||
this.attendees = [];
|
||||
this.$toast.info({
|
||||
title: "Slettet alle deltakere."
|
||||
});
|
||||
} else {
|
||||
this.$toast.error({
|
||||
title: "Klarte ikke slette deltakere",
|
||||
description: response.message
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
// global styling for disabling height of attendee class
|
||||
@import "@/styles/media-queries.scss";
|
||||
|
||||
.attendee {
|
||||
max-height: unset;
|
||||
|
||||
.raffle-element {
|
||||
margin: 0;
|
||||
|
||||
@include mobile {
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/global.scss";
|
||||
@import "@/styles/media-queries.scss";
|
||||
|
||||
.attendee-registration-container {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.row.flex .label-div {
|
||||
margin-right: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
z-index: 10;
|
||||
background-color: white;
|
||||
border: 1px solid #e1e4e8;
|
||||
|
||||
& li {
|
||||
padding: 1rem;
|
||||
font-size: 1.1rem;
|
||||
|
||||
&:hover {
|
||||
background-color: #e1e4e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 90%;
|
||||
margin: 2rem auto;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
padding: 0 1.5rem 3rem;
|
||||
|
||||
@include desktop {
|
||||
max-width: 60vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
#randomColors {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:checked::after {
|
||||
content: "✅";
|
||||
}
|
||||
|
||||
&::after {
|
||||
font-size: 2.1rem;
|
||||
content: "❌";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user