🔀♻️⚡️ rewrite api-store

docs/.vuepress/utils/v3Comparison.json

@@ -79,7 +79,6 @@
         "chatExtras",
         "enhancedPOI",
         "generalExtensions",
-        "lssmaql",
         "messageTemplates",
         "schoolingOverview"
     ]

src/components/LoadingIndicator.vue

@@ -85,10 +85,10 @@ onMounted(() => {
     // if there are no file-sizes cached, fetch them
     if (Object.values(fileSizes.value).length === 0) {
         useAPIStore()
-            .request({
-                url: rootStore.lssmUrl('/static/fileSizes.json', true),
-                feature: 'loading-indicator',
-            })
+            .request(
+                rootStore.lssmUrl('/static/fileSizes.json', true),
+                'loading-indicator'
+            )
             .then(res => res.json())
             .then(sizes => {
                 fileSizes.value = sizes;

src/components/settings.vue

@@ -848,10 +848,7 @@ export default Vue.extend<
         (window[PREFIX] as Vue).$settings = this;
 
         useAPIStore()
-            .request({
-                url: this.rootStore.lssmUrl('/branches.json'),
-                feature: 'settings',
-            })
+            .request(this.rootStore.lssmUrl('/branches.json'), 'settings')
             .then(res => res.json() as Promise<SettingsData['branches']>)
             .then(branches => (this.branches = branches));
     },

src/core.ts

@@ -120,8 +120,6 @@ utils(Vue);
 
     const locale = LSSM.$stores.root.locale;
 
-    LSSM.$stores.api._initAPIsFromBroadcast().then();
-
     import('./natives/checkboxMultiSelect').then(({ default: multiSelect }) =>
         multiSelect(LSSM)
     );

src/importableScripts/LSSMStorage.ts

@@ -0,0 +1,108 @@
+import type { Mission } from 'typings/Mission';
+import type { MissionsById } from '@workers/stores/api/missionTypes.worker';
+
+export default class LSSMStorage {
+    readonly #DB_NAME = `${PREFIX}-storage-v2`;
+
+    #db: IDBDatabase | null = null;
+
+    async #upgradeDB({ oldVersion }: IDBVersionChangeEvent) {
+        if (!this.#db) return;
+
+        const transactions: Promise<void>[] = [];
+
+        const addTransaction = (transaction: IDBTransaction) =>
+            transactions.push(
+                new Promise<void>(resolve =>
+                    transaction.addEventListener('complete', () => resolve())
+                )
+            );
+
+        // In version 1, we introduced storing missionTypes
+        if (oldVersion < 1) {
+            addTransaction(
+                this.#db.createObjectStore('missionTypes', { keyPath: 'id' })
+                    .transaction
+            );
+        }
+
+        await Promise.all(transactions);
+    }
+
+    #setDB(db: IDBDatabase) {
+        if (this.#db) return;
+        this.#db = db;
+    }
+
+    #openDB() {
+        if (this.#db) return Promise.resolve(this.#db);
+        return new Promise<IDBDatabase>((resolve, reject) => {
+            const request = indexedDB.open(this.#DB_NAME, 1);
+
+            let upgradeNeeded = false;
+
+            request.addEventListener('success', () => {
+                if (upgradeNeeded) return;
+                this.#setDB(request.result);
+                return resolve(request.result);
+            });
+            request.addEventListener('error', () => reject(request.error));
+
+            request.addEventListener('upgradeneeded', async event => {
+                upgradeNeeded = true;
+                this.#setDB(request.result);
+                await this.#upgradeDB(event);
+                return resolve(request.result);
+            });
+        });
+    }
+
+    #closeDB() {
+        if (this.#db) this.#db.close();
+        this.#db = null;
+    }
+
+    // region missionTypes
+    public storeMissionTypes(missionTypes: MissionsById) {
+        return this.#openDB()
+            .then(db => {
+                const tx = db.transaction('missionTypes', 'readwrite');
+                const store = tx.objectStore('missionTypes');
+                Object.values(missionTypes).forEach(missionType => {
+                    store.put(missionType);
+                });
+                return new Promise<void>((resolve, reject) => {
+                    tx.addEventListener('complete', () => resolve());
+                    tx.addEventListener('error', () => reject(tx.error));
+                });
+            })
+            .finally(() => this.#closeDB());
+    }
+
+    public getMissionTypes() {
+        return this.#openDB()
+            .then(db => {
+                const tx = db.transaction('missionTypes', 'readonly');
+                const store = tx.objectStore('missionTypes');
+                const request = store.getAll();
+                return new Promise<Mission[]>((resolve, reject) => {
+                    request.addEventListener('success', () =>
+                        resolve(request.result)
+                    );
+                    request.addEventListener('error', () =>
+                        reject(request.error)
+                    );
+                });
+            })
+            .then(missionTypes => {
+                // indexedDB returns an array, so we need to convert it to an object
+                const missionTypesObject: MissionsById = {};
+                missionTypes.forEach(missionType => {
+                    missionTypesObject[missionType.id] = missionType;
+                });
+                return missionTypesObject;
+            })
+            .finally(() => this.#closeDB());
+    }
+    // endregion
+}

src/importableScripts/checkRequestInit.ts

@@ -0,0 +1,16 @@
+/**
+ * Checks if the RequestInit has the LSSM-Header set and throws an error if not.
+ * @param init - The RequestInit to check against.
+ * @throws Error If the LSSM-Header is not set.
+ */
+export default (init: RequestInit) => {
+    const headers = new Headers(init.headers);
+
+    // CAVEAT: headers are stored lowercase
+    // if the LSSM-Header is not set, abort the request!
+    if (!headers.has('x-lss-manager')) {
+        throw new Error(
+            'No X-LSS-Manager Header has been set. Aborting the request!'
+        );
+    }
+};

src/mainpageCore.ts

@@ -1,5 +1,3 @@
-import he from 'he';
-
 import loadingIndicatorStorageKey from '../build/plugins/LoadingProgressPluginStorageKey';
 import LSSMMenu from './LSSM-Menu.vue';
 import telemetry from './modules/telemetry/main';
@@ -115,7 +113,7 @@ export default async (LSSM: Vue): Promise<void> => {
                 control.style.setProperty('cursor', 'pointer');
                 LSSM.$stores.api
                     .getSettings('mainPage-core_map-expand')
-                    .then(({ value: { design_mode } }) =>
+                    .then(({ design_mode }) =>
                         control.addEventListener('click', () => {
                             window.mapExpand(design_mode >= 3);
                         })
@@ -142,51 +140,28 @@ export default async (LSSM: Vue): Promise<void> => {
         event: 'radioMessage',
         post: false,
         callback(radioMessage: RadioMessage) {
-            if (
-                radioMessage.type === 'vehicle_fms' &&
-                radioMessage.user_id === window.user_id
-            )
-                LSSM.$stores.api.radioMessage(radioMessage);
+            LSSM.$stores.api.updateVehicleFromRadioMessage(radioMessage);
         },
     });
 
-    await LSSM.$stores.api.getBuildings('mainPage-core_initial-update');
-    await LSSM.$stores.api.getMissions('mainPage-core_initial-update', true);
+    LSSM.$stores.api.getBuildings('mainPage-core_initial-update').then();
 
     LSSM.$stores.root.hook({
         event: 'buildingMarkerAdd',
-        callback(buildingMarker: BuildingMarkerAdd) {
-            if (buildingMarker.user_id !== window.user_id) return;
-            const buildings = LSSM.$stores.api.buildings;
-            const building = buildings.find(
-                ({ id }) => id === buildingMarker.id
-            );
-            if (
-                !building ||
-                building.caption !== he.decode(buildingMarker.name)
-            ) {
-                LSSM.$stores.api
-                    .getBuilding(
-                        buildingMarker.id,
-                        'mainPage-core_buildingMarkerAdd'
-                    )
-                    .then(building =>
-                        LSSM.$stores.api
-                            .getVehiclesAtBuilding(
-                                building.id,
-                                'mainPage-core_buildingMarkerAdd'
-                            )
-                            .then(() =>
-                                LSSM.$stores.event.createAndDispatchEvent({
-                                    name: 'buildingMarkerAdd',
-                                    detail: {
-                                        marker: buildingMarker,
-                                        building,
-                                    },
-                                })
-                            )
-                    );
-            }
+        async callback(buildingMarker: BuildingMarkerAdd) {
+            const building =
+                await LSSM.$stores.api.updateBuildingFromBuildingMarkerAdd(
+                    buildingMarker
+                );
+
+            if (!building) return;
+            LSSM.$stores.event.createAndDispatchEvent({
+                name: 'buildingMarkerAdd',
+                detail: {
+                    marker: buildingMarker,
+                    building,
+                },
+            });
         },
     });
 };

src/modules/asyncButtons/assets/arr.ts

@@ -45,22 +45,18 @@ export default (LSSM: Vue, $m: $m, MODULE_ID: string): void => {
                                     ?.getAttribute('content') || ''
                             );
                             await LSSM.$stores.api
-                                .request({
-                                    url: btn.href,
-                                    init: {
-                                        method: 'POST',
-                                        body: url.searchParams.toString(),
-                                        credentials: 'include',
-                                        mode: 'cors',
-                                        headers: {
-                                            'Accept':
-                                                'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
-                                            'Content-Type':
-                                                'application/x-www-form-urlencoded',
-                                            'Upgrade-Insecure-Requests': '1',
-                                        },
+                                .request(btn.href, `${MODULE_ID}-arr`, {
+                                    method: 'POST',
+                                    body: url.searchParams.toString(),
+                                    credentials: 'include',
+                                    mode: 'cors',
+                                    headers: {
+                                        'Accept':
+                                            'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
+                                        'Content-Type':
+                                            'application/x-www-form-urlencoded',
+                                        'Upgrade-Insecure-Requests': '1',
                                     },
-                                    feature: `${MODULE_ID}-arr`,
                                 })
                                 .then(({ status }) => {
                                     if (status !== 200) return;

src/modules/asyncButtons/assets/buildingPersonal.ts

@@ -36,9 +36,10 @@ export default (LSSM: Vue, $m: $m, MODULE_ID: string): void => {
                                     ?.getAttribute('content') || ''
                             );
                             await LSSM.$stores.api
-                                .request({
-                                    url: btn.href,
-                                    init: {
+                                .request(
+                                    btn.href,
+                                    `${MODULE_ID}-buildingPersonal`,
+                                    {
                                         method: 'POST',
                                         body: url.searchParams.toString(),
                                         credentials: 'include',
@@ -50,9 +51,8 @@ export default (LSSM: Vue, $m: $m, MODULE_ID: string): void => {
                                                 'application/x-www-form-urlencoded',
                                             'Upgrade-Insecure-Requests': '1',
                                         },
-                                    },
-                                    feature: `${MODULE_ID}-buildingPersonal`,
-                                })
+                                    }
+                                )
                                 .then(({ status }) => {
                                     if (status !== 200) return;
                                     btn.parentElement?.parentElement?.parentElement?.classList.add(

src/modules/asyncButtons/assets/buildings.ts

@@ -22,10 +22,10 @@ export default (
                 e.preventDefault();
                 taxBtns.forEach(taxBtn => taxBtn.classList.add('disabled'));
                 await LSSM.$stores.api
-                    .request({
-                        url: btn.getAttribute('href') ?? '',
-                        feature: `${MODULE_ID}-buildings`,
-                    })
+                    .request(
+                        btn.getAttribute('href') ?? '',
+                        `${MODULE_ID}-buildings`
+                    )
                     .then(({ status }) => {
                         if (status === 200) {
                             document
@@ -72,9 +72,10 @@ export default (
                         ?.getAttribute('content') || ''
                 );
                 await LSSM.$stores.api
-                    .request({
-                        url: btn.getAttribute('href') ?? '',
-                        init: {
+                    .request(
+                        btn.getAttribute('href') ?? '',
+                        'ab-buildings-extensionState',
+                        {
                             method: 'POST',
                             body: url.searchParams.toString(),
                             headers: {
@@ -84,9 +85,8 @@ export default (
                                     'application/x-www-form-urlencoded',
                                 'Upgrade-Insecure-Requests': '1',
                             },
-                        },
-                        feature: 'ab-buildings-extensionState',
-                    })
+                        }
+                    )
                     .then(({ status }) => {
                         if (status === 200) {
                             extensionStateBtns.forEach(tbtn =>

src/modules/asyncButtons/assets/forumpost.ts

@@ -44,20 +44,16 @@ export default (LSSM: Vue, $m: $m, MODULE_ID: string): void => {
                                     ?.getAttribute('content') || ''
                             );
                             await LSSM.$stores.api
-                                .request({
-                                    url: btn.href,
-                                    init: {
-                                        method: 'POST',
-                                        body: url.searchParams.toString(),
-                                        credentials: 'include',
-                                        mode: 'cors',
-                                        headers: {
-                                            'content-type':
-                                                'application/x-www-form-urlencoded',
-                                            'upgrade-insecure-requests': '1',
-                                        },
+                                .request(btn.href, `${MODULE_ID}-forumpost`, {
+                                    method: 'POST',
+                                    body: url.searchParams.toString(),
+                                    credentials: 'include',
+                                    mode: 'cors',
+                                    headers: {
+                                        'content-type':
+                                            'application/x-www-form-urlencoded',
+                                        'upgrade-insecure-requests': '1',
                                     },
-                                    feature: `${MODULE_ID}-forumpost`,
                                 })
                                 .then(({ status }) => {
                                     if (status !== 200) return;

src/modules/asyncButtons/assets/memberlist.ts

@@ -14,10 +14,7 @@ export default (LSSM: Vue, $m: $m, MODULE_ID: string): void => {
         t: HTMLAnchorElement
     ) => {
         await LSSM.$stores.api
-            .request({
-                url: t.getAttribute('href') ?? '',
-                feature: `${MODULE_ID}-memberlist`,
-            })
+            .request(t.getAttribute('href') ?? '', `${MODULE_ID}-memberlist`)
             .then(({ status }) => {
                 if (status !== 200) return;
                 const href = t.getAttribute('href')?.split('/');