minie4/Timetable-V2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚸 ♻️ Refactor store and improve UX

Browse Source 
- Move view related functions out of the store
- Restructure the store.js file
- Improve error handling of `/check`
- Show red loading spinner if data fetch failed
- Prefetch current, next and previous day instead of only current
- Refactor some other frontend file
This commit is contained in:
minie4
2023-01-01 23:09:53 +01:00
parent 951a8c51f0
commit d22755d8c3
6 changed files with 165 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
src/store.js
View File

@ -1,11 +1,15 @@
import { ref, watch, computed } from "vue";
import router from "./router";
import i18n from "./main";
import { getNextAndPrevDay } from "./util";
/* Router */
export const lastRoute = ref();
export const loading = ref(false);
export const loadingProgress = ref(0);
export const loadingFailed = ref(false);
/* Preferences */
export const classFilter = ref(localStorage.getItem("classFilter") || "none");
export const timetableGroups = ref(
JSON.parse(localStorage.getItem("timetableGroups") || "[]")
@ -29,12 +33,7 @@ watch(theme, (newValue) => {
localStorage.setItem("theme", newValue);
});
// Set this to a positive or negative integer
// to change selectedDate by this number
export const changeDay = ref(0);
// Set this to jump to a specific date
export const changeDate = ref(new Date());
/* Date selector */
export const selectedDate = ref(new Date(new Date().setUTCHours(0, 0, 0, 0)));
export const selectedDay = computed(() => selectedDate.value.getDay() - 1);
// Jump to next Monday if it is weekend
@ -43,109 +42,73 @@ if (selectedDay.value == 5)
if (selectedDay.value == -1)
selectedDate.value = new Date(selectedDate.value.getTime() + 86400000);
// Load new data if date changes
watch(selectedDate, async () => {
loadingProgress.value = 0.1;
loading.value = true;
await fetchSubstitutions();
loadingProgress.value = 1 / 2;
await fetchHistory();
loadingProgress.value = 1;
loading.value = false;
});
// Set this to a positive or negative integer
// to change selectedDate by this number
export const changeDay = ref(0);
// Set this to jump to a specific date
export const changeDate = ref(new Date());
/* Data store */
export const timetable = ref({ trusted: true });
export const substitutions = ref([]);
export const history = ref([]);
export const classList = ref([]);
export const historyOfDate = computed(() => {
const dates = {};
for (const entry of history.value) {
const date = entry.date;
if (!dates[date]) dates[date] = [];
dates[entry.date].push(entry);
}
return dates;
});
export const substitutionsForDate = computed(() => {
const dates = {};
for (const substitution of substitutions.value) {
const date = substitution.date;
if (!dates[date]) dates[date] = [];
dates[substitution.date].push(substitution);
}
return dates;
});
export const parsedTimetable = computed(() => {
if (!timetable.value.data) return [];
return timetable.value.data.map((day) => {
const newDay = [];
for (const lesson of day) {
var usedLesson = lesson;
// Check for timetable groups
if (Array.isArray(lesson)) {
var matchingLesson = lesson.find((e) =>
timetableGroups.value.includes(e.group)
);
if (!matchingLesson) {
matchingLesson = {
subject: lesson.map((e) => e.subject).join(" / "),
teacher: i18n.global.t("timetable.configureTimetableGroup"),
length: lesson[0].length || 1,
};
}
usedLesson = matchingLesson;
}
const lessonLength = usedLesson.length || 1;
delete usedLesson.length;
for (var i = 0; i < lessonLength; i++) newDay.push(usedLesson);
}
return newDay;
});
});
export const possibleTimetableGroups = computed(() => {
const foundTimetableGroups = [];
if (!timetable.value.data) return [];
for (const day of timetable.value.data) {
for (const lesson of day) {
if (Array.isArray(lesson)) {
for (const group of lesson) {
if (!foundTimetableGroups.includes(group.group)) {
foundTimetableGroups.push(group.group);
}
}
}
}
}
return foundTimetableGroups;
});
export const substitutions = ref({});
export const history = ref({});
export const classList = ref({});
/* API functions */
// Set the `VITE_API_ENDPOINT` env variable when
// building the frontend to use an external api server
const baseUrl = import.meta.env.VITE_API_ENDPOINT || "/api";
export async function fetchData() {
export async function fetchData(days, partial) {
const steps = 2 * days.length + (partial ? 0 : 2);
let step = 1;
loadingFailed.value = false;
loadingProgress.value = 0.1;
loading.value = true;
const checkResponse = await fetch(`${baseUrl}/check`);
if (checkResponse.status != 200) router.push("/login");
loadingProgress.value = 1 / 5;
// Check if the API server is reachable
// and the user is authenticated
try {
const checkResponse = await fetch(`${baseUrl}/check`);
if (checkResponse.status == 401) {
router.push("/login");
return;
} else if (checkResponse.status != 200) {
loadingFailed.value = true;
loadingProgress.value = 1;
console.log("Other error while fetching data: " + checkResponse.status);
return;
}
} catch {
loadingFailed.value = true;
loadingProgress.value = 1;
console.log("Error while fetching data: No internet connection!");
return;
}
loadingProgress.value = step++ / steps;
await fetchClassList();
loadingProgress.value = 2 / 5;
await fetchTimetable();
loadingProgress.value = 3 / 5;
await fetchSubstitutions();
loadingProgress.value = 4 / 5;
await fetchHistory();
if (!partial) {
await fetchClassList();
loadingProgress.value = step++ / steps;
await fetchTimetable();
loadingProgress.value = step++ / steps;
}
for (const day of days) {
await fetchSubstitutions(day);
loadingProgress.value = step++ / steps;
await fetchHistory(day);
loadingProgress.value = step++ / steps;
}
loadingProgress.value = 1;
loading.value = false;
}
// Load new data if date changes
watch(selectedDate, () =>
fetchData(getNextAndPrevDay(selectedDate.value), true)
);
export async function fetchClassList() {
const classListResponse = await fetch(`${baseUrl}/classes`);
const classListData = await classListResponse.json();
@ -163,19 +126,19 @@ export async function fetchTimetable() {
} else timetable.value = timetableData;
}
export async function fetchSubstitutions() {
const requestDate = `?date=${selectedDate.value.getTime()}`;
export async function fetchSubstitutions(day) {
const requestDate = `?date=${day}`;
const substitutionResponse = await fetch(
classFilter.value == "none"
? `${baseUrl}/substitutions${requestDate}`
: `${baseUrl}/substitutions${requestDate}&class=${classFilter.value}`
);
const substitutionData = await substitutionResponse.json();
substitutions.value = substitutionData;
substitutions.value[day] = substitutionData;
}
export async function fetchHistory() {
const requestDate = `?date=${selectedDate.value.getTime()}`;
export async function fetchHistory(day) {
const requestDate = `?date=${day}`;
const historyResponse = await fetch(
classFilter.value == "none"
? `${baseUrl}/history${requestDate}`
@ -183,7 +146,63 @@ export async function fetchHistory() {
);
const historyData = await historyResponse.json();
if (historyData.error) console.warn("API Error: " + historyData.error);
else history.value = historyData;
else history.value[day] = historyData;
}
fetchData();
/* Preprocess the timetable data */
export const parsedTimetable = computed(() => {
// Check if timetable data exists
if (!timetable.value.data) return [];
return timetable.value.data.map((day) => {
const parsedDay = [];
for (const lesson of day) {
let usedLesson = lesson;
// Check if lesson has multiple options
// (timetable groups)
if (Array.isArray(lesson)) {
let matchingLesson = lesson.find((e) =>
timetableGroups.value.includes(e.group)
);
// If no valid timetable group is configured
// add a dummy lesson showing a notice
if (!matchingLesson) {
matchingLesson = {
subject: lesson.map((e) => e.subject).join(" / "),
teacher: i18n.global.t("timetable.configureTimetableGroup"),
length: lesson[0].length || 1,
};
}
usedLesson = matchingLesson;
}
// Duplicate the lesson if its length is > 1 for it
// to show up multiple times in the timetable view
const lessonLength = usedLesson.length || 1;
delete usedLesson.length;
for (var i = 0; i < lessonLength; i++) parsedDay.push(usedLesson);
}
return parsedDay;
});
});
export const possibleTimetableGroups = computed(() => {
const foundTimetableGroups = [];
if (!timetable.value.data) return [];
// Make a list of all possible timetable groups
// found in the current timetable
for (const day of timetable.value.data) {
for (const lesson of day) {
if (Array.isArray(lesson)) {
for (const group of lesson) {
if (!foundTimetableGroups.includes(group.group)) {
foundTimetableGroups.push(group.group);
}
}
}
}
}
return foundTimetableGroups;
});
// Initially fetch data for the
// current, next and previous day
fetchData(getNextAndPrevDay(selectedDate.value), false);