⚡️♻️[all] replace querySelector with getElementById if possible

src/LSSM-Menu.vue

@@ -487,8 +487,7 @@ export default Vue.extend<
                 this.iconBgAsNavBg = iconBgAsNavBg;
 
                 if (iconBgAsNavBg) {
-                    this.navbg.navbar =
-                        document.querySelector<HTMLElement>('#main_navbar');
+                    this.navbg.navbar = document.getElementById('main_navbar');
                     const bgImg = this.navbg.navbar
                         ? window.getComputedStyle(this.navbg.navbar)
                               .backgroundImage
@@ -541,9 +540,7 @@ export default Vue.extend<
             })
             .then(v3MenuAsSubmenu => {
                 if (!v3MenuAsSubmenu) return;
-
-                const v3Dropdown =
-                    document.querySelector<HTMLLIElement>('#lssm_dropdown');
+                const v3Dropdown = document.getElementById('lssm_dropdown');
                 const versionWrapper = this.$el.querySelector<HTMLLIElement>(
                     `#${this.versionWrapperId}`
                 );

src/LSSMV4.vue

@@ -76,8 +76,7 @@ onMounted(() => {
         });
 
     // Workaround for when modals container appears behind V4 instance (dialogs are behind modals)
-    const modalsContainer =
-        document.querySelector<HTMLDivElement>('#modals-container');
+    const modalsContainer = document.getElementById('modals-container');
     if (
         modalsContainer &&
         getCurrentInstance()?.proxy.$el.compareDocumentPosition(

src/components/anniversaryComponent.vue

@@ -190,7 +190,7 @@ onMounted(() => {
     navbar.classList.add('lssmv4-anniversary-navbar');
     for (let i = 0; i < window.innerWidth / 100; i++)
         navbar.append(createBalloon(false, true, false).balloon);
-    document.querySelector<HTMLElement>('#main_navbar')?.prepend(navbar);
+    document.getElementById('main_navbar')?.prepend(navbar);
 });
 </script>
 

src/modules/asyncButtons/assets/buildings.ts

@@ -6,7 +6,7 @@ export default (
     $m: $m,
     MODULE_ID: string
 ): void => {
-    const BUILDING_MODE = document.querySelector<HTMLDivElement>('#ausbauten')
+    const BUILDING_MODE = document.getElementById('ausbauten')
         ? 'building'
         : 'dispatch';
 

src/modules/asyncButtons/assets/missions.ts

@@ -8,8 +8,7 @@ export default (
         document.querySelector('.vehicle_prisoner_select') &&
         missionSettings.includes('missionPrisoners')
     ) {
-        const prisonersLabel =
-            document.querySelector<HTMLHeadingElement>('#h2_prisoners');
+        const prisonersLabel = document.getElementById('h2_prisoners');
         let currentPrisoners = parseInt(
             prisonersLabel?.textContent?.trim().match(/^\d+/u)?.[0] || '0'
         );
@@ -100,9 +99,9 @@ export default (
     const replyButton = document.querySelector<HTMLButtonElement>(
         '#mission_reply_content ~ div button[type="submit"]'
     );
-    const replyInputField = document.querySelector<HTMLInputElement>(
-        '#mission_reply_content'
-    );
+    const replyInputField = document.getElementById(
+        'mission_reply_content'
+    ) as HTMLInputElement;
     if (
         missionSettings.includes('missionReply') &&
         replyButton &&

src/modules/buildingListFilter/main.ts

@@ -87,6 +87,7 @@ export default <ModuleMainFunction>(async ({
         buildings: number[];
         state: 'disabled' | 'enabled';
     }
+
     const filters = [
         {
             contentType: 'text',
@@ -257,8 +258,7 @@ export default <ModuleMainFunction>(async ({
             }
         );
 
-        const buildingList =
-            document.querySelector<HTMLUListElement>('#building_list');
+        const buildingList = document.getElementById('building_list');
         if (!buildingList) return;
 
         const buildings: [HTMLLIElement, string][] = [];
@@ -401,8 +401,7 @@ export default <ModuleMainFunction>(async ({
 
     const observer = new MutationObserver(updateFilters);
 
-    const buildingsElement =
-        document.querySelector<HTMLDivElement>('#buildings');
+    const buildingsElement = document.getElementById('buildings');
     if (buildingsElement)
         observer.observe(buildingsElement, { childList: true });
 

src/modules/creditsextension/main.ts

@@ -3,7 +3,7 @@ import creditsextension from './creditsextension.vue';
 import type { ModuleMainFunction } from 'typings/Module';
 
 export default <ModuleMainFunction>(async ({ LSSM, MODULE_ID, getSetting }) => {
-    const wrapper = document.querySelector('#navigation_top')?.parentElement;
+    const wrapper = document.getElementById('navigation_top')?.parentElement;
     if (wrapper) {
         const settings = {
             showSales: await getSetting('showSales'),
@@ -17,6 +17,6 @@ export default <ModuleMainFunction>(async ({ LSSM, MODULE_ID, getSetting }) => {
                     props: { MODULE_ID, ...settings, getSetting },
                 }),
         }).$mount(wrapper);
-        document.querySelector('#coins_top')?.parentElement?.remove();
+        document.getElementById('coins_top')?.parentElement?.remove();
     }
 });

src/modules/enhancedPOI/main.ts

@@ -140,7 +140,7 @@ export default (async ({ LSSM, MODULE_ID, $m, getSetting, setSetting }) => {
             'poi-hider-style',
             true
         );
-        document.querySelector<HTMLStyleElement>(`#${extraStyleId}`)?.remove();
+        document.getElementById(extraStyleId)?.remove();
         const style = document.createElement('style');
         style.id = extraStyleId;
         style.textContent = `${selector} {display: block !important;}`;
@@ -168,9 +168,7 @@ export default (async ({ LSSM, MODULE_ID, $m, getSetting, setSetting }) => {
             }
             if (
                 isPOIWindow &&
-                document.querySelector<HTMLDivElement>(
-                    `#${poiSettingsWrapperId}`
-                )
+                document.getElementById(poiSettingsWrapperId) as HTMLDivElement
             )
                 return;
             isPOIWindow = true;
@@ -277,8 +275,7 @@ export default (async ({ LSSM, MODULE_ID, $m, getSetting, setSetting }) => {
         });
     });
 
-    const buildingsElement =
-        document.querySelector<HTMLDivElement>('#buildings');
+    const buildingsElement = document.getElementById('buildings');
     if (buildingsElement)
         observer.observe(buildingsElement, { childList: true });
 }) as ModuleMainFunction;

src/modules/extendedBuilding/main.ts

@@ -25,17 +25,15 @@ export default (async ({
                 window.location.pathname
             ) &&
             !/^\/schoolings\/\d+\/?$/u.test(window.location.pathname)) ||
-        (!document.querySelector('#bereitstellungsraumReset') &&
+        (!document.getElementById('bereitstellungsraumReset') &&
             document.querySelectorAll('[href*="profile"]').length)
     )
         return;
 
     if (/^\/buildings\/\d+\/?$/u.test(window.location.pathname)) {
-        const BUILDING_MODE = document.querySelector<HTMLDivElement>(
-            '#tab_protocol'
-        )
+        const BUILDING_MODE = document.getElementById('tab_protocol')
             ? 'dispatch'
-            : document.querySelector<HTMLDivElement>('#schooling_running')
+            : document.getElementById('schooling_running')
               ? 'schooling'
               : 'building';
 
@@ -64,7 +62,7 @@ export default (async ({
         if (BUILDING_MODE === 'building') {
             if (
                 (await getSetting('personnelDemands')) &&
-                document.querySelector<HTMLTableElement>('#vehicle_table')
+                document.getElementById('vehicle_table')
             ) {
                 import(
                     /* webpackChunkName: "modules/extendedBuilding/personnelDemands" */ './assets/personnelDemands'
@@ -86,7 +84,7 @@ export default (async ({
 
         if (
             (await getSetting('expansions')) &&
-            document.querySelector('#ausbauten')
+            document.getElementById('ausbauten')
         ) {
             import(
                 /* webpackChunkName: "modules/extendedBuilding/expansions" */ './assets/expansions'

src/modules/extendedCallList/assets/collapsableMissions/missionlist.ts

@@ -163,7 +163,7 @@ export default (
 
     if (allMissionsCollapsed) allBtn.click();
 
-    const sortBtn = document.querySelector<HTMLButtonElement>(`#${sortBtnId}`);
+    const sortBtn = document.getElementById(sortBtnId);
     if (sortBtn) {
         sortBtn.parentElement?.before(allBtn);
     } else {

src/modules/extendedCallList/assets/fixedEventInfo.ts

@@ -1,5 +1,5 @@
 export default (LSSM: Vue) => {
-    const eventInfo = document.querySelector<HTMLDivElement>('#eventInfo');
+    const eventInfo = document.getElementById('eventInfo');
     if (!eventInfo) return;
 
     const whitespace = document.createElement('div');

src/modules/extendedCallList/assets/sort/callList.ts

@@ -120,7 +120,7 @@ export default async (
     );
 
     const panelBodyId = 'missions-panel-body';
-    const panelBody = document.querySelector<HTMLDivElement>(`#${panelBodyId}`);
+    const panelBody = document.getElementById(panelBodyId);
 
     if (!panelBody) return;
 

src/modules/extendedCallList/assets/sort/mission.ts

@@ -57,8 +57,7 @@ export default async (
 
     if (found) {
         const alarm = (publish = false) => {
-            const form =
-                document.querySelector<HTMLFormElement>('#mission-form');
+            const form = document.getElementById('mission-form');
             if (!form) return;
             const nextMissionIdInput =
                 form.querySelector<HTMLInputElement>('#next_mission_id');
@@ -72,9 +71,7 @@ export default async (
             if (publishInput) publishInput.value = Number(publish).toString();
 
             // we've set the next mission id and the publishing value, so we can easily submit the form with normal alarm button
-            document
-                .querySelector<HTMLAnchorElement>('#mission_alarm_btn')
-                ?.click();
+            document.getElementById('mission_alarm_btn')?.click();
         };
 
         const toggleInput = document.createElement('input');

src/modules/extendedCallWindow/assets/alarmIcons.ts

@@ -7,11 +7,8 @@ export default (
         vehicleTypes: (number | string)[];
     }[]
 ): void => {
-    const alarmBtn =
-        document.querySelector<HTMLAnchorElement>('#mission_alarm_btn');
-    const vehicleList = document.querySelector<HTMLTableElement>(
-        '#vehicle_show_table_all'
-    );
+    const alarmBtn = document.getElementById('mission_alarm_btn');
+    const vehicleList = document.getElementById('vehicle_show_table_all');
     if (!alarmBtn || !vehicleList) return;
 
     const spacing = document.createElement('span');

src/modules/extendedCallWindow/assets/alarmTime.ts

@@ -1,6 +1,5 @@
 export default (LSSM: Vue): void => {
-    const alarmBtn =
-        document.querySelector<HTMLAnchorElement>('#mission_alarm_btn');
+    const alarmBtn = document.getElementById('mission_alarm_btn');
     if (!alarmBtn) return;
 
     LSSM.$stores.root.addStyle({
@@ -59,8 +58,7 @@ export default (LSSM: Vue): void => {
 
     const amountObserver = new MutationObserver(update);
 
-    const amountElement =
-        document.querySelector<HTMLSpanElement>('#vehicle_amount');
+    const amountElement = document.getElementById('vehicle_amount');
 
     if (amountElement) {
         amountObserver.observe(amountElement, {

src/modules/extendedCallWindow/assets/arrCounter.ts

@@ -5,8 +5,7 @@ export default async (
     getSetting: (key: string) => Promise<boolean>,
     $m: $m
 ): Promise<void> => {
-    const ARRContainer =
-        document.querySelector<HTMLDivElement>('#mission-aao-group');
+    const ARRContainer = document.getElementById('mission-aao-group');
 
     if (!ARRContainer) return;
 

src/modules/extendedCallWindow/assets/arrHover.ts

@@ -7,8 +7,7 @@ export default (
     MODULE_ID: string,
     $m: $m
 ): void => {
-    const ARRContainer =
-        document.querySelector<HTMLDivElement>('#mission-aao-group');
+    const ARRContainer = document.getElementById('mission-aao-group');
 
     if (!ARRContainer) return;
 
@@ -410,7 +409,7 @@ export default (
     LSSM.$stores.root.hook({
         event: 'aao_available',
         callback(id: number) {
-            const arr = document.querySelector<HTMLAnchorElement>(`#aao_${id}`);
+            const arr = document.getElementById(`aao_${id}`) as HTMLAnchorElement;
             if (!arr) return;
             const buildingIds: number[] = JSON.parse(
                 arr.getAttribute('building_ids') || '[]'

src/modules/extendedCallWindow/assets/arrMatchHighlight.ts

@@ -1,7 +1,7 @@
 import type { $m } from 'typings/Module';
 
 export default (LSSM: Vue, allWords: boolean, $m: $m): void => {
-    const title = document.querySelector('#mission_general_info');
+    const title = document.getElementById('mission_general_info');
     if (!title) return;
 
     const greyClass = LSSM.$stores.root.nodeAttribute('arr-grey');

src/modules/extendedCallWindow/assets/arrSearch.ts

@@ -11,8 +11,7 @@ export default (
     clearOnEnter: boolean,
     $sm: $m
 ) => {
-    const aaoGroupElement =
-        document.querySelector<HTMLDivElement>('#mission-aao-group');
+    const aaoGroupElement = document.getElementById('mission-aao-group');
     if (!aaoGroupElement) return;
 
     if (!dropdown) {

src/modules/extendedCallWindow/assets/emv/getVehicleListObserveHandler.ts

@@ -32,10 +32,8 @@ export default (
         group: Group
     ) => void
 ) => {
-    const vehicleList = document.querySelector<HTMLTableSectionElement>(
-        '#vehicle_show_table_body_all'
-    );
-    const occupiedList = document.querySelector<HTMLDivElement>('#occupied');
+    const vehicleList = document.getElementById('vehicle_show_table_body_all');
+    const occupiedList = document.getElementById('occupied');
 
     if (!vehicleList || !occupiedList) return;
 

src/modules/extendedCallWindow/assets/enhancedHeader.ts

@@ -30,8 +30,7 @@ export default (LSSM: Vue, sticky: boolean, load: boolean): void => {
         '.missing_vehicles_load'
     ) as HTMLAnchorElement | null;
     if (load && loadBtn) {
-        const people_amount =
-            document.querySelector<HTMLSpanElement>('#amount_of_people');
+        const people_amount = document.getElementById('amount_of_people');
         if (people_amount && people_amount.parentElement) {
             people_amount.parentElement.classList.add(
                 `col-md-${

src/modules/extendedCallWindow/assets/enhancedMissingVehicles.ts

@@ -7,8 +7,9 @@ export default (
     getSetting: Parameters<ModuleMainFunction>[0]['getSetting'],
     $m: $m
 ): void => {
-    const missingDialog =
-        document.querySelector<HTMLDivElement>('#missing_text');
+    const missingDialog = document.getElementById(
+        'missing_text'
+    ) as HTMLDivElement;
     if (!missingDialog) return;
 
     import(

src/modules/extendedCallWindow/assets/hideVehicleList.ts

@@ -9,13 +9,12 @@ export default (LSSM: Vue, MODULE_ID: string, $m: $m): void => {
     btn.setAttribute('id', toggleBtnId);
     btn.classList.add('btn', 'btn-success');
     const toggleHidden = () => {
-        const free_vehicles = document.querySelector('#h2_free_vehicles');
+        const free_vehicles = document.getElementById('h2_free_vehicles');
         free_vehicles?.classList.toggle('hidden');
-        const vehicle_list_step = document.querySelector('#vehicle_list_step');
+        const vehicle_list_step = document.getElementById('vehicle_list_step');
         vehicle_list_step?.classList.toggle('hidden');
-        const group_max_distance = document.querySelector(
-            '#group_max_distance'
-        );
+        const group_max_distance =
+            document.getElementById('group_max_distance');
         group_max_distance?.classList.toggle('hidden');
         btn.textContent = $m(
             `hideVehicleList.${

src/modules/extendedCallWindow/assets/missionKeywords.ts

@@ -9,8 +9,7 @@ export default async (
         missions: (number | string)[];
     }[]
 ): Promise<void> => {
-    const missionTitle =
-        document.querySelector<HTMLHeadingElement>('#missionH1');
+    const missionTitle = document.getElementById('missionH1');
     if (!missionTitle) return;
 
     const missionType = LSSM.$utils.getMissionTypeInMissionWindow();

src/modules/extendedCallWindow/assets/selectedVehicleCounter.ts

@@ -67,7 +67,7 @@ export default (LSSM: Vue, MODULE_ID: string, btnVehicles: string[]): void => {
         );
     });
 
-    document.querySelector('#navbar-alarm-spacer')?.before(holder);
+    document.getElementById('navbar-alarm-spacer')?.before(holder);
 
     LSSM.$stores.root.addStyle({
         selectorText: `#${table.id} tr:nth-child(1) td`,