✨ Add a setting to change the API provider

Dlurak · Nov 2, 2023 · 342536c · 342536c
1 parent 8acb4e0
commit 342536c
Show file tree

Hide file tree

Showing 61 changed files with 266 additions and 105 deletions.
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -153,6 +153,7 @@ const de = {
 	'settings.account': 'Account',
 	'settings.preferences': 'Einstellungen',
 	'settings.colors': 'Farben',
+	'settings.api': 'API Einstellungen',
 	'settings.selectSpecificSection':
 		'Wähle links eine spezifische Sektion aus, um die Einstellungen zu ändern.',
 	'settings.apperance': 'Aussehen',
@@ -175,6 +176,16 @@ const de = {
 	'settings.subjectColors.explaination':
 		'Diese Farben werden bei den Hausaufgaben und dem Kalendar verwendet, sie ermöglichen es dir die Hausaufgaben noch schneller einem Fach zuzuordnen. Du kannst soviele Fächer hinzufügen wie du möchtest.',
 
+	'settings.api.warning':
+		'Wenn du nicht genau weißt, was diese Einstellung bedeutet, solltest du sie nicht ändern. Du brauchst sie aber auch nicht :)',
+	'settings.api.base': 'API URL',
+	'settings.api.placeholder': 'https://dlool-backend.onrender.com',
+	'settings.api.preset.offical': 'Offizielle API',
+	'settings.api.preset.dev': 'Development Server',
+	'settings.api.submit': 'Speichern',
+	'settings.api.toast.success': 'API URL erfolgreich gespeichert.',
+	'settings.api.toast.error': 'Diese URL ist kein gültiger Dlool Server.',
+
 	'colors.red': 'Rot',
 	'colors.green': 'Grün',
 	'colors.blue': 'Blau',

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -149,6 +149,7 @@ const en = {
 	'settings.account': 'Account',
 	'settings.preferences': 'Preferences',
 	'settings.colors': 'Colors',
+	'settings.api': 'API-Settings',
 	'settings.selectSpecificSection': 'Select a specific section on the left to change its settings',
 	'settings.apperance': 'Apperance',
 	'settings.apperance.theme': 'Theme',
@@ -170,6 +171,16 @@ const en = {
 	'settings.subjectColors.explaination':
 		'These colors are used in the homework and calendar view. You can add as many subjects as you want.',
 
+	'settings.api.warning':
+		"If you don't know what this is, you probably shouldn't change it and don't need to bother with it. It is primarilly for developers.",
+	'settings.api.base': 'API URL',
+	'settings.api.placeholder': 'https://dlool-backend.onrender.com',
+	'settings.api.preset.offical': 'Official API',
+	'settings.api.preset.dev': 'Development Server',
+	'settings.api.submit': 'Save',
+	'settings.api.toast.success': 'Successfully changed API URL',
+	'settings.api.toast.error': "This URL is'nt a valid Dlool API",
+
 	'colors.red': 'Red',
 	'colors.green': 'Green',
 	'colors.blue': 'Blue',

diff --git a/src/languages/i18n.ts b/src/languages/i18n.ts
@@ -1,5 +1,5 @@
 import { browser } from '$app/environment';
-import { currentLanguage } from '../routes/stores';
+import { currentLanguage } from '../stores';
 import type { ExtractWordsAfterDollarSign, ReplaceSubstringType } from '../types/i18n';
 import { slice, type FirstNStringChars } from '../types/strings/slice';
 import {

diff --git a/src/lib/I18n.svelte b/src/lib/I18n.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { i, type I18nProps, type Token, type TPar } from '../languages/i18n';
-	import { currentLanguage } from '../routes/stores';
+	import { currentLanguage } from '../stores';
 
 	export let key: Token | undefined = undefined;
 

diff --git a/src/lib/LanguageSwitcher.svelte b/src/lib/LanguageSwitcher.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
-	import { currentLanguage } from '../routes/stores';
+	import { currentLanguage } from '../stores';
 	import { languageShortcuts, type Languages, switchLanguage } from '../languages/i18n';
 
 	let languagesObj: Record<Languages, string> = {

diff --git a/src/lib/auth/loadClasses.ts b/src/lib/auth/loadClasses.ts
@@ -1,7 +1,10 @@
-import { PUBLIC_API_URL } from '$env/static/public';
+import { backendUrl as backendUrlStore } from '$lib/../stores';
+
+let backendUrl = '';
+backendUrlStore.subscribe((url) => (backendUrl = url));
 
 export const loadClasses = async (school: string) => {
-	const data = fetch(`${PUBLIC_API_URL}/classes?school=${school}`).then((res) => res.json());
+	const data = fetch(`${backendUrl}/classes?school=${school}`).then((res) => res.json());
 
 	return (await data).data;
 };
diff --git a/src/lib/auth/loadSchools.ts b/src/lib/auth/loadSchools.ts
@@ -1,10 +1,13 @@
-import { PUBLIC_API_URL } from '$env/static/public';
+import { backendUrl as backendUrlStore } from '$lib/../stores';
+
+let backendUrl = '';
+backendUrlStore.subscribe((url) => (backendUrl = url));
 
 export const loadSchools = async (query: string) => {
 	const page = 1;
 	const pageSize = 25;
 
-	const data = fetch(`${PUBLIC_API_URL}/schools?page=${page}&pageSize=${pageSize}&q=${query}`).then(
+	const data = fetch(`${backendUrl}/schools?page=${page}&pageSize=${pageSize}&q=${query}`).then(
 		(res) => res.json()
 	);
 

diff --git a/src/lib/classes/getClass.ts b/src/lib/classes/getClass.ts
@@ -1,9 +1,12 @@
-import { PUBLIC_API_URL } from '$env/static/public';
+import { backendUrl as backendUrlStore } from '$lib/../stores';
 import type { ClassResponse } from '../../types/classes';
 
+let backendUrl = '';
+backendUrlStore.subscribe((url) => (backendUrl = url));
+
 export async function getClassById(id: string) {
 	const uri = `/classes/${id}`;
-	const url = PUBLIC_API_URL + uri;
+	const url = backendUrl + uri;
 
 	const res = await fetch(url);
 	const response: ClassResponse = await res.json();

diff --git a/src/lib/events/CreateEvent.svelte b/src/lib/events/CreateEvent.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { PUBLIC_API_URL } from '$env/static/public';
 	import SubmitButton from '$lib/SubmitButton.svelte';
 	import DateTimePicker from '$lib/dates/EndStartDateTiimePicker.svelte';
 	import Box from '$lib/homework/Box.svelte';
@@ -11,6 +10,7 @@
 	import { subjectsSortetCapitalized } from '../../constants/subjecticons';
 	import type { CustomDateTime } from '../../types/customDate';
 	import { addToast } from '$lib/toast/addToast';
+	import { backendUrl } from '$lib/../stores';
 
 	const dispatch = createEventDispatcher();
 
@@ -49,7 +49,7 @@
 		if (isLocation) eventObj.location = location;
 
 		const token = localStorage.getItem('token') as string;
-		const res = fetch(`${PUBLIC_API_URL}/events`, {
+		const res = fetch(`${$backendUrl}/events`, {
 			method: 'POST',
 			body: JSON.stringify(eventObj),
 			headers: {

diff --git a/src/lib/events/EventBox.svelte b/src/lib/events/EventBox.svelte
@@ -7,7 +7,7 @@
 	import EventBoxInner from './EventBoxInner.svelte';
 	import Modal from '$lib/Modal.svelte';
 	import { isEventOver } from './isEventOver';
-	import { subjectColors } from '../../routes/stores';
+	import { subjectColors } from '../../stores';
 	import { rgbToHex } from '$lib/colors/hexToRgb';
 
 	export let event: Event;

diff --git a/src/lib/footer/Footer.svelte b/src/lib/footer/Footer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import PrintingFooter from '$lib/PrintingFooter.svelte';
-	import { network } from '../../routes/stores';
+	import { network } from '../../stores';
 	import Contact from './Contact.svelte';
 	import CopyRight from './CopyRight.svelte';
 	import Links from './Links.svelte';

diff --git a/src/lib/getBackendUrl.ts b/src/lib/getBackendUrl.ts
@@ -0,0 +1,24 @@
+import { backendUrl } from '../stores';
+import { setLocalstorageString } from './localstorage';
+
+export const setBackendUrl = async (url: string) => {
+	const data = await fetch(url)
+		.then(
+			(res) =>
+				res.json() as Promise<{
+					name: string;
+					isDlool: boolean;
+				}>
+		)
+		.catch(() => ({
+			isDlool: false
+		}));
+
+	if (data.isDlool) {
+		url = url.replace(/\/$/, '');
+		setLocalstorageString('backendUrl', url);
+		backendUrl.set(url);
+		return true;
+	}
+	return false;
+};
diff --git a/src/lib/homework/CreateHomework.svelte b/src/lib/homework/CreateHomework.svelte
@@ -2,7 +2,6 @@
 	import DatePicker from '../dates/DatePicker.svelte';
 
 	import { page } from '$app/stores';
-	import { PUBLIC_API_URL } from '$env/static/public';
 	import SubmitButton from '$lib/SubmitButton.svelte';
 	import { createDate } from '$lib/dates/createDateObject';
 	import Box from './Box.svelte';
@@ -12,7 +11,8 @@
 	import I18n from '$lib/I18n.svelte';
 	import { i } from '../../languages/i18n';
 	import { addToast } from '$lib/toast/addToast';
-	import { network } from '../../routes/stores';
+	import { network } from '../../stores';
+	import { backendUrl } from '$lib/../stores';
 
 	export let postSubmit: (e: Event) => void = () => {
 		return;
@@ -59,7 +59,7 @@
 				assignments: mappedAssignments
 			};
 
-			fetch(PUBLIC_API_URL + '/homework', {
+			fetch($backendUrl + '/homework', {
 				method: 'POST',
 				headers: new Headers({
 					authorization: `Bearer ${localStorage.getItem('token')}`,

diff --git a/src/lib/homework/DataBox.svelte b/src/lib/homework/DataBox.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import DataBoxInner from './DataBoxInner.svelte';
 
-	import { PUBLIC_API_URL } from '$env/static/public';
 	import type { CustomDate } from '../../types/customDate';
 	import type { Assignment } from '../../types/homework';
 	import Box from './Box.svelte';
@@ -11,7 +10,8 @@
 	import Modal from '$lib/Modal.svelte';
 	import { i } from '../../languages/i18n';
 	import { addToast } from '$lib/toast/addToast';
-	import { network } from '../../routes/stores';
+	import { network } from '../../stores';
+	import { backendUrl } from '$lib/../stores';
 
 	export let date: CustomDate;
 	export let assignments: Assignment[];
@@ -115,7 +115,7 @@
 							const confirmed = confirm(i('homework.delete.confirm'));
 							if (!confirmed) return;
 							const uri = `/homework/${id}`;
-							const url = PUBLIC_API_URL + uri;
+							const url = $backendUrl + uri;
 							fetch(url, {
 								method: 'DELETE',
 								headers: {

diff --git a/src/lib/homework/DataBoxAssignment.svelte b/src/lib/homework/DataBoxAssignment.svelte
@@ -3,7 +3,7 @@
 	import { dateIsInPast } from '$lib/dates/dateIsInPast';
 	import DateLabel from '$lib/dates/dateLabel.svelte';
 	import { getIconForSubject, iconExistsForSubject } from '../../constants/subjecticons';
-	import { subjectColors } from '../../routes/stores';
+	import { subjectColors } from '../../stores';
 	import type { Assignment } from '../../types/homework';
 
 	export let assignment: Assignment;

diff --git a/src/lib/homework/DataBoxInner.svelte b/src/lib/homework/DataBoxInner.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { PUBLIC_API_URL } from '$env/static/public';
 	import I18n from '$lib/I18n.svelte';
 	import SubmitButton from '$lib/SubmitButton.svelte';
 	import TimeAgo from '$lib/dates/TimeAgo.svelte';
@@ -11,8 +10,9 @@
 	import DateLabel from '../dates/dateLabel.svelte';
 	import CreateHomeworkInner from './CreateHomeworkInner.svelte';
 	import { addToast } from '$lib/toast/addToast';
-	import { network } from '../../routes/stores';
+	import { network } from '../../stores';
 	import DataBoxAssignment from './DataBoxAssignment.svelte';
+	import { backendUrl } from '$lib/../stores';
 
 	export let date: CustomDate;
 	export let assignments: Assignment[];
@@ -92,7 +92,7 @@
 			{disabled}
 			onClick={() => {
 				editMode = false;
-				const url = `${PUBLIC_API_URL}/homework/${id}`;
+				const url = `${$backendUrl}/homework/${id}`;
 
 				const mappedAssignments = newAssignments.map((assignment) => {
 					return {
@@ -133,7 +133,7 @@
 			}}
 		/>
 	{/if}
-	{#await fetch(`${PUBLIC_API_URL}/auth/${creatorId}`).then((res) => res.json()) then userData}
+	{#await fetch(`${$backendUrl}/auth/${creatorId}`).then((res) => res.json()) then userData}
 		<I18n>
 			<p class="text-xs">{userData.data.user.name || i('error')}</p>
 		</I18n>

diff --git a/src/lib/homework/Filters.svelte b/src/lib/homework/Filters.svelte
@@ -7,7 +7,7 @@
 	import SubmitButton from '$lib/SubmitButton.svelte';
 	import QuickActionButton from '$lib/QuickActionButton.svelte';
 	import { onMount } from 'svelte';
-	import { showHomeworkFilter } from '../../routes/stores';
+	import { showHomeworkFilter } from '../../stores';
 	import I18n from '$lib/I18n.svelte';
 	import { i } from '../../languages/i18n';
 

diff --git a/src/lib/layout/Language.svelte b/src/lib/layout/Language.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
-	import { currentLanguage } from '../../routes/stores';
+	import { currentLanguage } from '../../stores';
 	import type { Languages } from '../../languages/i18n';
 
 	currentLanguage.subscribe((l) => {

diff --git a/src/lib/layout/SubjectColors.svelte b/src/lib/layout/SubjectColors.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getLocalstorage, setLocalstorage } from '$lib/localstorage';
 	import { onMount } from 'svelte';
-	import { subjectColors } from '../../routes/stores';
+	import { subjectColors } from '../../stores';
 	import type { SubjectColor } from '../../types/subjectColors';
 
 	let readFromLocalstorage = false;

diff --git a/src/lib/layout/Theme.svelte b/src/lib/layout/Theme.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { th } from '$lib/theme';
 	import { onMount } from 'svelte';
-	import { theme } from '../../routes/stores';
+	import { theme } from '../../stores';
 	import { browser } from '$app/environment';
 
 	theme.subscribe((t) => {

diff --git a/src/lib/layout/launcher/KeyboardShortcuts.svelte b/src/lib/layout/launcher/KeyboardShortcuts.svelte
@@ -3,7 +3,7 @@
 	import { isElementVisible } from './elementIsVisible';
 	import { goto } from '$app/navigation';
 
-	import { showLauncher } from '../../../routes/stores';
+	import { showLauncher } from '../../../stores';
 
 	export let focusedId: number;
 	export let linkIds: number[];

diff --git a/src/lib/layout/launcher/launcher.svelte b/src/lib/layout/launcher/launcher.svelte
@@ -3,7 +3,7 @@
 	import LauncherLink from './LauncherLink.svelte';
 	import KeyboardShortcuts from './KeyboardShortcuts.svelte';
 	import { findLinks } from './findLinks';
-	import { showLauncher } from '../../../routes/stores';
+	import { showLauncher } from '../../../stores';
 
 	let show = false;
 

diff --git a/src/lib/layout/network.svelte b/src/lib/layout/network.svelte
@@ -2,7 +2,7 @@
 	import { addToast } from '$lib/toast/addToast';
 	import { onMount } from 'svelte';
 
-	import { network } from '../../routes/stores';
+	import { network } from '../../stores';
 
 	network.set('online');
 

diff --git a/src/lib/layout/settings.svelte b/src/lib/layout/settings.svelte
@@ -1,13 +1,16 @@
 <script>
 	import { onMount } from 'svelte';
-	import { settings } from '../../routes/stores';
-	import { getLocalstorage } from '$lib/localstorage';
+	import { backendUrl, settings } from '../../stores';
+	import { getLocalstorage, getLocalstorageString } from '$lib/localstorage';
+	import { PUBLIC_API_URL } from '$env/static/public';
 
 	onMount(() => {
 		settings.update((s) => {
 			s.showTextInNavbar = getLocalstorage('textInNav', true);
 			s.showSearchInNavbar = getLocalstorage('searchInNav', false);
 			return s;
 		});
+
+		backendUrl.set(getLocalstorageString('backendUrl', PUBLIC_API_URL));
 	});
 </script>
diff --git a/src/lib/layout/title.svelte b/src/lib/layout/title.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { page } from '$app/stores';
 	import { i } from '../../languages/i18n';
-	import { currentLanguage, title } from '../../routes/stores';
+	import { currentLanguage, title } from '../../stores';
 
 	let tit = 'Dlool';
 

diff --git a/src/lib/navbar/NavItem.svelte b/src/lib/navbar/NavItem.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { navData } from '../../constants/nav';
 	import { i } from '../../languages/i18n';
-	import { settings } from '../../routes/stores';
+	import { settings } from '../../stores';
 
 	export let uri: string;
 	export let currentUri: string;

diff --git a/src/lib/navbar/NavSearchButton.svelte b/src/lib/navbar/NavSearchButton.svelte
@@ -1,6 +1,6 @@
 <script>
 	import I18n from '$lib/I18n.svelte';
-	import { settings, showLauncher } from '../../routes/stores';
+	import { settings, showLauncher } from '../../stores';
 
 	let showText = true;
 

diff --git a/src/lib/navbar/Navbar.svelte b/src/lib/navbar/Navbar.svelte
@@ -3,7 +3,7 @@
 	import HalloweenLogo from '$lib/seasons/halloween/halloweenLogo.svelte';
 	import { isSpecialDate } from '$lib/specialDates/isInRange';
 	import { navData } from '../../constants/nav';
-	import { settings } from '../../routes/stores';
+	import { settings } from '../../stores';
 	import NavItem from './NavItem.svelte';
 	import NavSearchButton from './NavSearchButton.svelte';