You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
3.3 KiB
Vue
119 lines
3.3 KiB
Vue
<template>
|
|
<div class="AdminCenters">
|
|
<div class="centers">
|
|
<div class="center" v-for="center of centers" :v-key="center.id" @click="showPopup(center)">
|
|
<div class="name">{{ center.name }}</div>
|
|
<div class="city">{{ center.city }}, {{ center.zip_code }}</div>
|
|
<div class="address">{{ center.address }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="newCenter">
|
|
<label for="name">Navn:</label>
|
|
<input type="text" v-model="name" name="name">
|
|
<label for="city">By:</label>
|
|
<input type="text" v-model="city" name="city">
|
|
<label for="zip_code">Postnummer:</label>
|
|
<input type="text" v-model="zip_code" name="zip_code">
|
|
<label for="address">Adresse:</label>
|
|
<input type="text" v-model="address" name="address">
|
|
<input type="submit" value="Tilføj" @click="addCenter">
|
|
</div>
|
|
<CenterPopup :center="selectedCenter" @fetchCenters="fetchCenters" @closePopup="popupShown = false"
|
|
v-if="popupShown"></CenterPopup>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.AdminCenters {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 50px;
|
|
}
|
|
|
|
.newCenter {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: fit-content;
|
|
gap: 5px;
|
|
}
|
|
|
|
.centers {
|
|
display: flex;
|
|
gap: 30px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.center {
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 0.5rem;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.center:hover {
|
|
border-color: black;
|
|
}
|
|
|
|
.name {
|
|
font-size: 1.5rem;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import CenterPopup from '@/components/CenterPopup.vue'
|
|
import type { Center } from '@/interfaces/center';
|
|
|
|
export default {
|
|
name: "AdminCenters",
|
|
components: { CenterPopup },
|
|
data() {
|
|
return {
|
|
name: "",
|
|
city: "",
|
|
zip_code: "",
|
|
address: "",
|
|
popupShown: false,
|
|
selectedCenter: {} as Center,
|
|
centers: [] as Center[]
|
|
};
|
|
},
|
|
async created() {
|
|
await this.fetchCenters();
|
|
},
|
|
methods: {
|
|
showPopup(center: Center) {
|
|
this.selectedCenter = { ...center };
|
|
this.popupShown = true;
|
|
},
|
|
async addCenter() {
|
|
const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/center`, {
|
|
credentials: import.meta.env.DEV ? "include" : undefined,
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
name: this.name,
|
|
city: this.city,
|
|
zip_code: this.zip_code,
|
|
address: this.address
|
|
}),
|
|
headers: {
|
|
"Content-Type": "Application/json"
|
|
}
|
|
});
|
|
if (res.status === 401) {
|
|
this.$router.push({ path: "/login", query: { ref: this.$route.path } });
|
|
}
|
|
else if (res.status === 200) {
|
|
this.fetchCenters();
|
|
}
|
|
},
|
|
async fetchCenters() {
|
|
const res = await fetch(`${import.meta.env.VITE_BASE_API_URL}/center`);
|
|
if (res.status === 200) {
|
|
this.centers = await res.json();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |