Zmiany w karcie filtrów stacji

src/components/StationsView/FilterOption.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="filter-option option">
+    <label class="option-label">
+      <input
+        class="option-input"
+        type="checkbox"
+        :name="option.name"
+        :defaultValue="option.defaultValue"
+        :id="option.id"
+        v-model="option.value"
+        @change="handleChange"
+      />
+      <span
+        class="option-content"
+        :class="option.section + (option.value ? ' checked' : '')"
+        >{{ $t(`filters.${option.id}`) }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+interface FilterOption {
+  id: string;
+  name: string;
+  section: string;
+  value: boolean;
+  defaultValue: boolean;
+}
+
+export default defineComponent({
+  props: {
+    option: {
+      type: Object as () => FilterOption,
+      required: true,
+    },
+  },
+  emits: ["optionChange"],
+  methods: {
+    handleChange() {
+      this.$emit("optionChange", {
+        name: this.option.name,
+        value: this.option.value,
+      });
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+$accessCol: #e03b07;
+$controlCol: #0085ff;
+$signalCol: #bf7c00;
+$statusCol: #349b32;
+$saveCol: #28a826;
+$routesCol: #9049c0;
+
+.option {
+  input {
+    display: none;
+  }
+
+  span {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    width: 100%;
+    text-align: center;
+
+    cursor: pointer;
+
+    padding: 0.5em 0.55em;
+
+    display: inline-block;
+    position: relative;
+
+    transition: all 0.2s;
+
+    border-radius: 0.5em;
+
+    &:not(.checked) {
+      background-color: #585858;
+
+      &::before {
+        box-shadow: none;
+      }
+    }
+
+    &.checked {
+      &.access {
+        background-color: $accessCol;
+
+        &::before {
+          box-shadow: 0 0 6px 1px $accessCol;
+        }
+      }
+
+      &.control {
+        background-color: $controlCol;
+
+        &::before {
+          box-shadow: 0 0 6px 1px $controlCol;
+        }
+      }
+
+      &.signals {
+        background-color: $signalCol;
+
+        &::before {
+          box-shadow: 0 0 6px 1px $signalCol;
+        }
+      }
+
+      &.routes {
+        background-color: $routesCol;
+
+        &::before {
+          box-shadow: 0 0 6px 1px $routesCol;
+        }
+      }
+
+      &.status {
+        background-color: $statusCol;
+
+        &::before {
+          box-shadow: 0 0 6px 1px $statusCol;
+        }
+      }
+
+      &.save {
+        background-color: $saveCol;
+
+        &::before {
+          box-shadow: 0 0 6px 1px $saveCol;
+        }
+      }
+
+      &.mode {
+        background-color: lightgreen;
+        color: black;
+
+        font-weight: 500;
+      }
+
+      &::before {
+        position: absolute;
+        content: "";
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+
+        border-radius: 0.5em;
+      }
+    }
+  }
+}
+</style>

src/components/StationsView/StationFilterCard.vue

@@ -1,47 +1,26 @@
 <template>
-  <section
+  <section class="card" v-if="showCard">
-    class="card"
+    <div class="card_exit" @click="exit">
-    v-if="showCard"
-  >
-    <div
-      class="card-exit"
-      @click="exit"
-    >
       <!-- <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" /> -->
     </div>
 
-    <div class="card-title flex">{{ $t("filters.title") }}</div>
+    <div class="card_title flex">{{ $t("filters.title") }}</div>
 
-    <div class="card-options">
+    <section class="card_options">
-      <div
+      <filter-option
-        class="option"
         v-for="(option, i) in inputs.options"
+        :option="option"
         :key="i"
-      >
+        @optionChange="handleChange"
-        <label class="option-label">
+      />
-          <input
+    </section>
-            class="option-input"
-            type="checkbox"
-            :name="option.name"
-            :defaultValue="option.defaultValue"
-            :id="option.id"
-            v-model="option.value"
-            @change="handleChange"
-          />
-          <span
-            class="option-content"
-            :class="option.section + (option.value ? ' checked' : '')"
-          >{{ $t(`filters.${option.id}`) }}</span>
-        </label>
-      </div>
-    </div>
 
-    <div class="card-sliders">
+    <!-- <section class="card_modes">
-      <div
+      <filter-option :option="inputs.modes[0]" @optionChange="invertFilters" />
-        class="slider"
+    </section> -->
-        v-for="(slider, i) in inputs.sliders"
+
-        :key="i"
+    <section class="card_sliders">
-      >
+      <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
         <input
           class="slider-input"
           type="range"
@@ -59,40 +38,37 @@
           {{ $t(`filters.sliders.${slider.id}`) }}
         </div>
       </div>
-    </div>
+    </section>
 
-    <div class="card-save">
+    <section class="card_save">
-      <div class="option">
+      <filter-option
+        @optionChange="saveFilters"
+        :option="{
+          id: 'save',
+          name: 'save',
+          section: 'mode',
+          value: saveOptions,
+          defaultValue: true,
+        }"
+      />
+      <!-- <div class="option">
         <label>
-          <input
+          <input type="checkbox" v-model="saveOptions" @change="saveFilters" />
-            type="checkbox"
+          <span class="save" :class="{ checked: saveOptions }">
-            v-model="saveOptions"
-            @change="saveFilters"
-          />
-          <span
-            class="save"
-            :class="{ checked: saveOptions }"
-          >
             {{ $t("filters.save") }}
           </span>
         </label>
-      </div>
+      </div> -->
-    </div>
+    </section>
 
-    <div class="card-actions flex">
+    <section class="card_actions flex">
-      <action-button
+      <action-button class="outlined" @click="resetFilters">
-        class="outlined"
-        @click="resetFilters"
-      >
         {{ $t("filters.reset") }}
       </action-button>
-      <action-button
+      <action-button class="outlined" @click="exit">{{
-        class="outlined"
-        @click="exit"
-      >{{
         $t("filters.close")
       }}</action-button>
-    </div>
+    </section>
   </section>
 </template>
 
@@ -102,10 +78,12 @@ import inputData from "@/data/options.json";
 import StorageManager from "@/scripts/managers/storageManager";
 import { defineComponent } from "@vue/runtime-core";
 import ActionButton from "../Global/ActionButton.vue";
+import FilterOption from "./FilterOption.vue";
 
 export default defineComponent({
-  components: { ActionButton },
+  components: { ActionButton, FilterOption },
   props: ["showCard", "exit"],
+  emits: ["changeFilterValue", "invertFilters", "resetFilters"],
 
   data: () => ({
     inputs: { ...inputData },
@@ -118,15 +96,14 @@ export default defineComponent({
   },
 
   methods: {
-    handleChange(e: Event) {
+    handleChange(change: { name: string; value: boolean }) {
-      const target = e.target as HTMLInputElement;
-
       this.$emit("changeFilterValue", {
-        name: target.name,
+        name: change.name,
-        value: !target.checked,
+        value: !change.value,
       });
+
       if (this.saveOptions)
-        StorageManager.setBooleanValue(target.name, target.checked);
+        StorageManager.setBooleanValue(change.name, change.value);
     },
 
     handleInput(e: Event) {
@@ -140,7 +117,18 @@ export default defineComponent({
         StorageManager.setStringValue(target.name, target.value);
     },
 
-    saveFilters() {
+    invertFilters() {
+      this.inputs.options.forEach((option) => {
+        option.value = !option.value;
+        StorageManager.setBooleanValue(option.name, option.value);
+      });
+
+      this.$emit("invertFilters");
+    },
+
+    saveFilters(change: { value }) {
+      this.saveOptions = change.value;
+
       if (!this.saveOptions) {
         StorageManager.unregisterStorage(this.STORAGE_KEY);
         return;
@@ -182,14 +170,12 @@ export default defineComponent({
 @import "../../styles/responsive";
 @import "../../styles/card";
 
-$accessCol: #e03b07;
-$controlCol: #0085ff;
-$signalCol: #bf7c00;
-$statusCol: #349b32;
-$saveCol: #28a826;
-
 .card {
-  &-title {
+  > section {
+    margin-top: 1em;
+  }
+
+  &_title {
     font-size: 2em;
     font-weight: 700;
     color: $accentCol;
@@ -199,7 +185,7 @@ $saveCol: #28a826;
     text-align: center;
   }
 
-  &-options {
+  &_options {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     grid-template-rows: repeat(4, 1fr);
@@ -211,19 +197,20 @@ $saveCol: #28a826;
     }
   }
 
-  &-sliders {
+  &_modes {
-    margin-top: 1em;
+    display: flex;
-  }
+    justify-content: center;
 
-  &-actions {
+    .option {
-    margin-top: 0.7em;
+      margin: 0 1em;
-
-    button {
-      margin: 0 0.3em;
     }
   }
 
-  &-save {
+  &_actions button {
+    margin: 0 0.3em;
+  }
+
+  &_save {
     display: flex;
     justify-content: center;
 
@@ -232,101 +219,13 @@ $saveCol: #28a826;
     }
   }
 
-  &-exit {
+  &_exit {
     img {
       width: 2em;
     }
   }
 }
 
-.option {
-  input {
-    display: none;
-  }
-
-  span {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    width: 100%;
-    text-align: center;
-
-    cursor: pointer;
-
-    padding: 0.5em 0.55em;
-
-    display: inline-block;
-    position: relative;
-
-    transition: all 0.2s;
-
-    border-radius: 0.5em;
-
-    &:not(.checked) {
-      background-color: #585858;
-
-      &::before {
-        box-shadow: none;
-      }
-    }
-
-    &.checked {
-      &.access {
-        background-color: $accessCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $accessCol;
-        }
-      }
-
-      &.control {
-        background-color: $controlCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $controlCol;
-        }
-      }
-
-      &.signals {
-        background-color: $signalCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $signalCol;
-        }
-      }
-
-      &.status {
-        background-color: $statusCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $statusCol;
-        }
-      }
-
-      &.save {
-        background-color: $saveCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $saveCol;
-        }
-      }
-
-      &::before {
-        position: absolute;
-        content: "";
-        top: 0;
-        left: 0;
-
-        width: 100%;
-        height: 100%;
-
-        border-radius: 0.5em;
-      }
-    }
-  }
-}
-
 .slider {
   display: flex;
   align-items: center;

src/components/StationsView/StationTable.vue

@@ -68,8 +68,8 @@
                 :style="calculateExpStyle(station.reqLevel)"
               >
                 {{
-                  station.reqLevel && station.reqLevel > -1
+                  station.reqLevel && Number(station.reqLevel) > -1
-                    ? parseInt(station.reqLevel) >= 2
+                    ? Number(station.reqLevel) >= 2
                       ? station.reqLevel
                       : "L"
                     : "?"
@@ -162,21 +162,21 @@
 
               <img
                 v-if="station.SBL && station.SBL !== ''"
-                :src="require(`@/assets/icon-SBL.svg`)"
+                :src="SBLIcon"
                 alt="SBL"
                 :title="$t('desc.SBL') + `${station.SBL}`"
               />
 
               <img
                 v-if="station.nonPublic || !station.reqLevel"
-                :src="require(`@/assets/icon-lock.svg`)"
+                :src="lockIcon"
                 alt="non-public"
                 :title="$t('desc.non-public')"
               />
 
               <img
                 v-if="station.unavailable"
-                :src="require(`@/assets/icon-unavailable.svg`)"
+                :src="unavailableIcon"
                 alt="icon-unavailable"
                 :title="$t('desc.unavailable')"
               />
@@ -240,12 +240,12 @@ export default defineComponent({
     },
 
     sorterActive: {
-      type: Object as () => { id: string; dir: number },
+      type: Object as () => { index: number; dir: number },
       required: true,
     },
 
-    setFocusedStation: Function,
+    setFocusedStation: { type: Function, required: true },
-    changeSorter: Function,
+    changeSorter: { type: Function, required: true },
   },
 
   mixins: [styleMixin],
@@ -256,6 +256,9 @@ export default defineComponent({
     timetableIcon: require("@/assets/icon-timetable.svg"),
     userIcon: require("@/assets/icon-user.svg"),
     trainIcon: require("@/assets/icon-train.svg"),
+    SBLIcon: require("@/assets/icon-SBL.svg"),
+    lockIcon: require("@/assets/icon-lock.svg"),
+    unavailableIcon: require("@/assets/icon-unavailable.svg"),
 
     ascIcon: require("@/assets/icon-arrow-asc.svg"),
     descIcon: require("@/assets/icon-arrow-desc.svg"),

src/data/options.json

@@ -1,6 +1,5 @@
 {
-  "options": [
+  "options": [{
-    {
       "id": "default",
       "name": "default",
       "iconName": "td2",
@@ -49,7 +48,7 @@
       "value": true,
       "defaultValue": true
     },
-     {
+    {
       "id": "SPE",
       "name": "SPE",
       "iconName": "SPE",
@@ -73,7 +72,14 @@
       "value": true,
       "defaultValue": true
     },
-
+    {
+      "id": "SBL",
+      "name": "SBL",
+      "iconName": "SBL",
+      "section": "routes",
+      "value": true,
+      "defaultValue": true
+    },
     {
       "id": "modern",
       "name": "współczesna",
@@ -126,8 +132,7 @@
       "defaultValue": true
     }
   ],
-  "sliders": [
+  "sliders": [{
-    {
       "id": "min-lvl",
       "name": "minLevel",
       "minRange": 0,
@@ -175,5 +180,20 @@
       "value": 0,
       "defaultValue": 0
     }
-  ]
+  ],
-}
+  "modes": [{
+    "id": "include-selected",
+    "name": "include-selected",
+    "iconName": "",
+    "section": "mode",
+    "value": true,
+    "defaultValue": true
+  }, {
+    "id": "save",
+    "name": "save",
+    "iconName": "",
+    "section": "mode",
+    "value": true,
+    "defaultValue": true
+  }]
+}

src/locales/en.json

@@ -58,6 +58,7 @@
     "SPE": "SPE",
     "manual": "MANUAL",
     "mechanical": "MECHANICAL",
+    "SBL": "SBL",
     "modern": "MODERN",
     "semaphores": "SEMAPHORES",
     "mixed": "MIXED",
@@ -72,6 +73,7 @@
       "routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
       "routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
     },
+    "include-selected": "INCLUDE SELECTED",
     "save": "SAVE FILTERS",
     "reset": "RESET FILTERS",
     "close": "CLOSE FILTERS"
@@ -147,4 +149,4 @@
     "search-train": "Search by train number",
     "search-driver": "Search by driver name"
   }
-}
+}

src/locales/pl.json

@@ -57,6 +57,7 @@
     "SCS": "SCS",
     "SPE": "SPE",
     "manual": "RĘCZNE",
+    "SBL": "SBL",
     "mechanical": "MECHANICZNE",
     "modern": "WSPÓŁCZESNA",
     "semaphores": "KSZTAŁTOWA",
@@ -72,6 +73,7 @@
       "routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
       "routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
     },
+    "include-selected": "POKAŻ ZAZNACZONE",
     "save": "ZAPISZ FILTRY",
     "reset": "RESETUJ FILTRY",
     "close": "ZAMKNIJ FILTRY"
@@ -147,4 +149,4 @@
     "search-train": "Szukaj nr pociągu",
     "search-driver": "Szukaj maszynisty"
   }
-}
+}

src/scripts/interfaces/Filter.ts

@@ -9,6 +9,7 @@ export default interface Filter {
   "SPE": boolean;
   ręczne: boolean;
   mechaniczne: boolean;
+  "SBL": boolean;
   współczesna: boolean;
   kształtowa: boolean;
   historyczna: boolean;
@@ -21,6 +22,7 @@ export default interface Filter {
   minTwoWay: number;
   'no-1track': boolean;
   'no-2track': boolean;
+  'include-selected': boolean;
   free: boolean;
   occupied: boolean;
   ending: boolean;

src/scripts/managers/stationFilterManager.ts

@@ -54,44 +54,48 @@ const sortStations = (a: Station, b: Station, sorter: { index: number; dir: numb
 }
 
 const filterStations = (station: Station, filters: Filter) => {
-  if ((station.nonPublic || !station.reqLevel) && filters['nonPublic']) return false;
+  const returnMode = false;
 
-  if (station.online && station.statusID == 'ending' && filters['ending']) return false;
+  if ((station.nonPublic || !station.reqLevel) && filters['nonPublic']) return returnMode;
 
-  if (station.online && filters['occupied']) return false;
+  if (station.online && station.statusID == 'ending' && filters['ending']) return returnMode;
-  if (!station.online && filters['free']) return false;
 
-  if (station.default && filters['default']) return false;
+  if (station.online && filters['occupied']) return returnMode;
-  if (!station.default && filters['notDefault']) return false;
+  if (!station.online && filters['free']) return returnMode;
 
-  if (filters['real'] && station.stationLines != '') return false;
+  if (station.default && filters['default']) return returnMode;
-  if (filters['fictional'] && station.stationLines == '') return false;
+  if (!station.default && filters['notDefault']) return returnMode;
+
+  if (filters['real'] && station.stationLines != '') return returnMode;
+  if (filters['fictional'] && station.stationLines == '') return returnMode;
 
   if (station.reqLevel == '-1') return true;
-  if (parseInt(station.reqLevel) < filters['minLevel']) return false;
+  if (parseInt(station.reqLevel) < filters['minLevel']) return returnMode;
-  if (parseInt(station.reqLevel) > filters['maxLevel']) return false;
+  if (parseInt(station.reqLevel) > filters['maxLevel']) return returnMode;
 
-  if (filters['no-1track'] && (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)) return false;
+  if (filters['no-1track'] && (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)) return returnMode;
-  if (filters['no-2track'] && (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)) return false;
+  if (filters['no-2track'] && (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)) return returnMode;
 
-  if (station.routes.oneWay.catenary < filters['minOneWayCatenary']) return false;
+  if (station.routes.oneWay.catenary < filters['minOneWayCatenary']) return returnMode;
-  if (station.routes.oneWay.noCatenary < filters['minOneWay']) return false;
+  if (station.routes.oneWay.noCatenary < filters['minOneWay']) return returnMode;
 
-  if (station.routes.twoWay.catenary < filters['minTwoWayCatenary']) return false;
+  if (station.routes.twoWay.catenary < filters['minTwoWayCatenary']) return returnMode;
-  if (station.routes.twoWay.noCatenary < filters['minTwoWay']) return false;
+  if (station.routes.twoWay.noCatenary < filters['minTwoWay']) return returnMode;
 
-  if (filters[station.controlType]) return false;
+  if (filters[station.controlType]) return returnMode;
-  if (filters[station.signalType]) return false;
+  if (filters[station.signalType]) return returnMode;
 
-  if (filters['SPK'] && (station.controlType === 'SPK' || station.controlType.includes('+SPK'))) return false;
+  if (filters['SPK'] && (station.controlType === 'SPK' || station.controlType.includes('+SPK'))) return returnMode;
-  if (filters['SCS'] && (station.controlType === 'SCS' || station.controlType.includes('+SCS'))) return false;
+  if (filters['SCS'] && (station.controlType === 'SCS' || station.controlType.includes('+SCS'))) return returnMode;
-  if (filters['SPE'] && (station.controlType === 'SPE' || station.controlType.includes('+SPE'))) return false;
+  if (filters['SPE'] && (station.controlType === 'SPE' || station.controlType.includes('+SPE'))) return returnMode;
 
-  if (filters['SCS'] && filters['SPK'] && (station.controlType.includes('SPK') || station.controlType.includes('SCS'))) return false;
+  if (filters['SCS'] && filters['SPK'] && (station.controlType.includes('SPK') || station.controlType.includes('SCS'))) return returnMode;
 
-  if (filters['mechaniczne'] && station.controlType.includes('mechaniczne')) return false;
+  if (filters['mechaniczne'] && station.controlType.includes('mechaniczne')) return returnMode;
 
-  if (filters['ręczne'] && station.controlType.includes('ręczne')) return false;
+  if (filters['ręczne'] && station.controlType.includes('ręczne')) return returnMode;
+
+  if (filters['SBL'] && station.SBL) return returnMode;
 
   return true;
 }
@@ -111,12 +115,14 @@ export default class StationFilterManager {
     kształtowa: false,
     historyczna: false,
     mieszana: false,
+    SBL: false,
     minLevel: 0,
     maxLevel: 20,
     minOneWayCatenary: 0,
     minOneWay: 0,
     minTwoWayCatenary: 0,
     minTwoWay: 0,
+    'include-selected': false,
     'no-1track': false,
     'no-2track': false,
     free: true,
@@ -143,6 +149,24 @@ export default class StationFilterManager {
     this.filters = { ...this.filterInitStates };
   }
 
+  invertFilters() {
+    Object.keys(this.filters).forEach(prop => {
+      if(typeof this.filters[prop] !== "boolean") return;      
+
+      this.filters[prop] = !this.filters[prop];
+      
+    })
+    
+    // for(let prop in this.filters) {
+    //   if(typeof prop !== "boolean") continue;
+
+    //   this.filters[prop] = !this.filterInitStates[prop];
+
+    //   console.log("inverted!");
+      
+    // }
+  }
+
   changeSorter(index: number) {
     if (index > 4 && index < 7) return;
 

src/views/StationsView.vue

@@ -4,11 +4,7 @@
       <div class="body">
         <div class="options-bar">
           <action-button @click="() => toggleCardsState('filter')">
-            <img
+            <img class="button_icon" :src="filterIcon" alt="icon-filter" />
-              class="button_icon"
-              :src="require('@/assets/icon-filter2.svg')"
-              alt="icon-filter"
-            />
             <p>{{ $t("options.filters") }}</p>
           </action-button>
 
@@ -37,6 +33,7 @@
         :showCard="filterCardOpen"
         :exit="() => toggleCardsState('filter')"
         @changeFilterValue="changeFilterValue"
+        @invertFilters="invertFilters"
         @resetFilters="resetFilters"
       />
     </transition>
@@ -52,8 +49,9 @@ import StationFilterManager from "@/scripts/managers/stationFilterManager";
 import inputData from "@/data/options.json";
 
 import StationTable from "@/components/StationsView/StationTable.vue";
-import FilterCard from "@/components/StationsView/FilterCard.vue";
+import FilterCard from "@/components/StationsView/StationFilterCard.vue";
 import ActionButton from "@/components/Global/ActionButton.vue";
+
 import { StoreData } from "@/scripts/interfaces/StoreData";
 import { DataStatus } from "@/scripts/enums/DataStatus";
 import { computed, ComputedRef, defineComponent, reactive } from "vue";
@@ -70,6 +68,7 @@ export default defineComponent({
     trainIcon: require("@/assets/icon-train.svg"),
     timetableIcon: require("@/assets/icon-timetable.svg"),
     dolarIcon: require("@/assets/icon-dolar.svg"),
+    filterIcon: require("@/assets/icon-filter2.svg"),
     filterCardOpen: false,
     modalHidden: true,
     STORAGE_KEY: "options_saved",
@@ -148,6 +147,9 @@ export default defineComponent({
     resetFilters() {
       this.filterManager.resetFilters();
     },
+    invertFilters() {
+      this.filterManager.invertFilters();
+    },
     closeCard() {
       this.focusedStationName = "";
     },