201 lines
No EOL
8.7 KiB
Vue
Executable file
201 lines
No EOL
8.7 KiB
Vue
Executable file
<!--
|
|
ScheduleTogether Frontend
|
|
Copyright (C) 2024, Marco Vitchi Thulin
|
|
|
|
DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License version 3
|
|
as published by the Free Software Foundation.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License version 3 for more details.
|
|
|
|
This program incorporates external libraries for certain functionalities.
|
|
These libraries are covered by their respective licenses, and their usage
|
|
agreements are as outlined in their respective documentation or source
|
|
code.
|
|
|
|
You should have received a copy of the GNU Affero General Public License
|
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
<script setup>
|
|
|
|
import { useAlertStore, useProvidersStore } from '@/stores';
|
|
import { router } from '@/router';
|
|
import { ref } from 'vue';
|
|
|
|
import { Spinner } from '@/components';
|
|
|
|
const alertStore = useAlertStore();
|
|
const providerStore = useProvidersStore();
|
|
|
|
providerStore.setProvider('skola24');
|
|
|
|
var step = ref(0);
|
|
var hostValue = ref('');
|
|
var schoolValue = ref("");
|
|
var classValue = ref("");
|
|
var termValue = ref("");
|
|
|
|
async function submitHost() {
|
|
providerStore.setHost(hostValue);
|
|
await providerStore.getSchools();
|
|
if (providerStore.schools.data) {
|
|
step.value = 1;
|
|
}
|
|
}
|
|
|
|
async function submitSchool() {
|
|
const schoolId = schoolValue.value;
|
|
console.log(schoolId);
|
|
if (!schoolId) {
|
|
alertStore.error('You need to select a school before continuing', 5000)
|
|
} else {
|
|
await providerStore.getClasses(schoolId);
|
|
if (providerStore.classes.data) {
|
|
step.value = 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function submitClass() {
|
|
const classId = classValue.value;
|
|
console.log(classId);
|
|
if (!classId) {
|
|
alertStore.error('You need to select a class before continuing', 5000)
|
|
} else {
|
|
await providerStore.getTerms();
|
|
if (providerStore.terms.data) {
|
|
step.value = 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
function submitTerm() {
|
|
const termId = termValue.value;
|
|
console.log(termId);
|
|
if (!termId) {
|
|
alertStore.error('You need to select a term before continuing', 5000)
|
|
} else {
|
|
providerStore.getSchedule(schoolValue.value, classValue.value, termId);
|
|
step.value = 4;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="content-spacer-smaller"></div>
|
|
<h1 style="text-align: center;">Add Schedule</h1>
|
|
<div class="content-spacer-small"></div>
|
|
<div class="card-container">
|
|
<div class="card shadow" v-if="step == 0">
|
|
<p class="text-center">Enter school code</p>
|
|
<div class="card-form-group center" style="margin-bottom:10px;">
|
|
<input type="text" placeholder="example.skola24.se" v-model="hostValue" class="card-form-control center"/>
|
|
</div>
|
|
<div class="card-form-row center">
|
|
<button style="margin-right:20px;" class="card-form-button negative" @click="router.push('/schedule/add')">Cancel</button>
|
|
<button @click="submitHost()" class="card-form-button">Continue</button>
|
|
</div>
|
|
<Spinner v-if="providerStore.schools.loading" class="spinner-center" />
|
|
</div>
|
|
<div v-if="step == 1">
|
|
<div class="card shadow" v-if="providerStore.schools.data.length == 0">
|
|
<h4 class="card-header error">Failed</h4>
|
|
<p class="text-center">
|
|
Organization does not provide enough data.<br>
|
|
Because of this, the chosen organization is not supported at the moment.<br>
|
|
Try another school code, or select another provider.<br>
|
|
If you believe this to be an error, please contact administration.<br>
|
|
</p>
|
|
<div class="card-form-row center">
|
|
<button class="card-form-button negative" @click="router.push('/schedule/add')">OK</button>
|
|
</div>
|
|
</div>
|
|
<div class="card shadow" v-else>
|
|
<p class="text-center">Select a school</p>
|
|
<div class="card-form-group">
|
|
<select v-model="schoolValue" id="schoolSelect" class="card-form-control">
|
|
<option value="">Select option..</option>
|
|
<option v-for="school in providerStore.schools.data" :value="school.id">{{ school.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-form-row center">
|
|
<button style="margin-right:20px;" class="card-form-button negative" @click="router.push('/schedule/add')">Cancel</button>
|
|
<button @click="submitSchool()" class="card-form-button">Continue</button>
|
|
</div>
|
|
<Spinner v-if="providerStore.classes.loading" class="spinner-center" />
|
|
</div>
|
|
</div>
|
|
<div v-if="step == 2">
|
|
<div class="card shadow" v-if="providerStore.classes.data.length == 0">
|
|
<h4 class="card-header error">Failed</h4>
|
|
<p class="text-center">
|
|
The selected school does not provide enough data.<br>
|
|
Because of this, the chosen school is not supported.<br>
|
|
Try another school code, or select another provider.<br>
|
|
If you believe this to be an error, please contact us.<br>
|
|
</p>
|
|
<div class="card-form-row center">
|
|
<button class="card-form-button negative" @click="router.push('/schedule/add')">OK</button>
|
|
</div>
|
|
</div>
|
|
<div class="card shadow" v-else>
|
|
<p class="text-center">Select a class</p>
|
|
<div class="card-form-group">
|
|
<select v-model="classValue" id="classSelect" class="card-form-control">
|
|
<option value="">Select option..</option>
|
|
<option v-for="_class in providerStore.classes.data" :value="_class.id">{{ _class.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-form-row center">
|
|
<button style="margin-right:20px;" class="card-form-button negative" @click="router.push('/schedule/add')">Cancel</button>
|
|
<button @click="submitClass()" class="card-form-button">Continue</button>
|
|
</div>
|
|
<Spinner v-if="providerStore.terms.loading" class="spinner-center" />
|
|
</div>
|
|
</div>
|
|
<div v-if="step == 3">
|
|
<div class="card shadow" v-if="providerStore.terms.data.length == 0">
|
|
<h4 class="card-header error">Failed</h4>
|
|
<p class="text-center">
|
|
The chosen organization does not provide enough data.<br>
|
|
Because of this, this organization is not supported.<br>
|
|
Try another school code, or select another provider.<br>
|
|
If you believe this to be an error, please contact us.<br>
|
|
</p>
|
|
<div class="card-form-row center">
|
|
<button class="card-form-button negative" @click="router.push('/schedule/add')">OK</button>
|
|
</div>
|
|
</div>
|
|
<div class="card shadow" v-else>
|
|
<p class="text-center">Select a term</p>
|
|
<div class="card-form-group">
|
|
<select v-model="termValue" id="classSelect" class="card-form-control">
|
|
<option value="">Select option..</option>
|
|
<option v-for="term in providerStore.terms.data" :value="term.id">{{ term.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-form-row center">
|
|
<button style="margin-right:20px;" class="card-form-button negative" @click="router.push('/schedule/add')">Cancel</button>
|
|
<button @click="submitTerm()" class="card-form-button">Continue</button>
|
|
</div>
|
|
<Spinner v-if="providerStore.schedule.loading" class="spinner-center" />
|
|
</div>
|
|
</div>
|
|
<div v-if="step == 4">
|
|
<div class="card shadow" v-if="providerStore.schedule.loading">
|
|
<p class="text-center">Please wait..</p>
|
|
<Spinner class="spinner-center" />
|
|
</div>
|
|
<div class="card shadow" v-else>
|
|
<p class="text-center">Schedule data!</p>
|
|
<p class="text-center">{{ providerStore.schedule }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |