✨ [missionKeywords] allow as prefix

src/modules/extendedCallWindow/assets/missionKeywords.ts

@@ -1,6 +1,11 @@
 export default (
     LSSM: Vue,
-    settings: { keyword: string; color: string; missions: number[] }[]
+    settings: {
+        keyword: string;
+        color: string;
+        prefix: boolean;
+        missions: number[];
+    }[]
 ): void => {
     const missionHelpBtn = document.getElementById('mission_help');
     const missionTitle = document.getElementById('missionH1');
@@ -12,7 +17,7 @@ export default (
     );
     if (missionType < 0) return;
 
-    const addLabel = (text: string, color: string) => {
+    const addLabel = (text: string, color: string, prefix: boolean) => {
         const label = document.createElement('span');
         label.classList.add('label');
         label.style.backgroundColor = color;
@@ -23,11 +28,12 @@ export default (
         textNode.style.color = 'transparent';
         textNode.style.filter = 'invert(1) grayscale(1) contrast(9)';
         label.appendChild(textNode);
-        missionTitle.appendChild(label);
+        if (!prefix) missionTitle.appendChild(label);
+        else missionTitle.insertBefore(label, missionTitle.firstChild);
     };
 
     settings.forEach(s => {
         if (!s.missions.includes(missionType)) return;
-        addLabel(s.keyword, s.color);
+        addLabel(s.keyword, s.color, s.prefix);
     });
 };

src/modules/extendedCallWindow/components/missionKeywords/settings-item.vue

@@ -19,6 +19,13 @@
                 {{ updateName }}
             </span>
         </span>
+        <div>
+            <toggle-button
+                labels
+                v-model="updatePrefix"
+                class="pull-right"
+            ></toggle-button>
+        </div>
         <v-select
             placeholder="types"
             :multiple="true"
@@ -80,6 +87,14 @@ export default Vue.extend<
                 this.$emit('input', { ...this.value, color });
             },
         },
+        updatePrefix: {
+            get(): SettingsItemComputed['updatePrefix'] {
+                return this.value.prefix;
+            },
+            set(prefix) {
+                this.$emit('input', { ...this.value, prefix });
+            },
+        },
         updateMissions: {
             get(): SettingsItemComputed['updateMissions'] {
                 return (this.value.missions
@@ -111,14 +126,14 @@ export default Vue.extend<
             );
         },
     },
-    beforeMount() {
-        this.$store.dispatch('api/getMissions', false).then(
-            (missions: Mission[]) =>
-                (this.missions = missions.map(({ id, name }) => ({
-                    value: id,
-                    label: `${name} (ID: ${id})`,
-                })))
-        );
+    async beforeMount() {
+        this.missions = ((await this.$store.dispatch(
+            'api/getMissions',
+            false
+        )) as Mission[]).map(({ id, name }) => ({
+            value: id,
+            label: `${name} (ID: ${id})`,
+        }));
     },
 });
 </script>

src/modules/extendedCallWindow/components/missionKeywords/settings-titles.vue

@@ -9,6 +9,9 @@
         <b>{{
             $t('modules.extendedCallWindow.settings.missionKeywords.preview')
         }}</b>
+        <b>{{
+            $t('modules.extendedCallWindow.settings.missionKeywords.prepend')
+        }}</b>
         <b>{{
             $t('modules.extendedCallWindow.settings.missionKeywords.missions')
         }}</b>

src/modules/extendedCallWindow/i18n/de_DE.root.json

@@ -77,6 +77,7 @@
 			"description": "Lasse dir ein eigenes Stichwort neben dem Einsatznamen anzeigen",
 			"keyword": "Stichwort",
 			"color": "Hintergrundfarbe",
+            "prepend": "Vor dem Einsatznamen anzeigen",
 			"missions": "Einsätze",
 			"preview": "Vorschau"
 		},

src/modules/extendedCallWindow/main.ts

@@ -106,6 +106,7 @@ export default (async (LSSM, MODULE_ID, $m) => {
                 defaultItem: {
                     keyword: '',
                     color: '#777777',
+                    prefix: false,
                     missions: [],
                 },
             },
@@ -193,7 +194,12 @@ export default (async (LSSM, MODULE_ID, $m) => {
             ).default(LSSM, getSetting, $m);
 
         const missionKeywordsSettings = await getSetting<
-            { keyword: string; color: string; missions: number[] }[]
+            {
+                keyword: string;
+                color: string;
+                prefix: boolean;
+                missions: number[];
+            }[]
         >('missionKeywords');
 
         if (missionKeywordsSettings.length)

typings/modules/ExtendedCallWindow/missionKeywords/SettingsItem.d.ts

@@ -1,6 +1,7 @@
 interface item {
     keyword: string;
     color: string;
+    prefix: boolean;
     missions: number[];
 }
 
@@ -20,6 +21,7 @@ export interface SettingsItemProps {
 export interface SettingsItemComputed {
     updateName: item['keyword'];
     updateColor: item['color'];
+    updatePrefix: item['prefix'];
     updateMissions: Option[];
     selectableMissions: Option[];
 }