chore: improved table layout

src/components/RouteList.vue

@@ -1,6 +1,6 @@
 <template>
   <span class="routes">
-    <span
+    <!-- <span
       v-for="(route, i) in routes"
       class="route"
       :key="i"
@@ -10,9 +10,11 @@
         hidden: route.hidden,
       }"
     >
-      <span class="route-name">{{ route.routeName }}</span>
+    {{ route.routeName }}
+     <span class="route-name">{{ route.routeName }}</span> 
       <span class="route-info"> ({{ route.routeTracks }}/{{ route.isElectric ? 'E' : 'N' }}/{{ route.isRouteSBL ? 'S' : 'P' }}) </span>
     </span>
+     -->
   </span>
 </template>
 
@@ -36,7 +38,6 @@ export default defineComponent({
   }
 
   &.hidden > .route-name {
-    // text-decoration: underline;
     color: #ccc;
   }
 }

src/components/TableActions.vue

@@ -52,7 +52,7 @@
 
     <div class="pane">
       Pokazuj maks.
-      <input type="number" min="1" v-model="sceneriesStore.maxVisibleResults" style="width: 3em; margin: 0 0.5em" />
+      <input type="number" min="1" v-model="sceneriesStore.maxVisibleResults" style="width: 4em; margin: 0 0.5em" />
       wyników
     </div>
 

src/views/ManagerView.vue

@@ -10,21 +10,22 @@
     <div class="table_container">
       <table>
         <thead>
-          <th v-for="header in headerNameList">{{ header }}</th>
+          <th v-for="header in headers" :width="header.width">{{ header.value }}</th>
-          <th>Dostępność</th>
+          <th width="250">Dostępność</th>
-          <th>Usuń</th>
+          <th width="80">Usuń</th>
         </thead>
 
         <tbody>
           <tr v-for="(station, row) in sceneriesStore.sortedStationList" tabindex="0">
-            <td v-for="(_, propName) in headerNameList" @click="changeProperty(station, row, propName as string)" :class="propName">
+            <td v-for="{ id: propName } in headers" @click="changeProperty(station, row, propName as string)" :class="propName">
               <span v-if="propName === 'url'" :style="station.url ? 'color: gold' : 'color: gray;'">URL</span>
               <span v-else-if="propName === 'projectUrl'" :style="station.projectUrl ? 'color: gold' : 'color: gray;'">URL</span>
 
               <span v-else-if="propName === 'checkpoints'">{{ station[propName] ? 'POKAŻ' : 'DODAJ' }}</span>
 
-              <RouteList v-else-if="propName === 'routes'" :routes="station.routesInfo" />
+              <span v-else-if="propName === 'routes'" style="font-size: 1.1em;" :routes="station.routesInfo">
-              <!-- <span v-else-if="propName === 'routes'" v-html="getRouteNames(station.routesInfo)"></span> -->
+                <b>{{ station.routesInfo.length }}</b>
+              </span>
 
               <span v-else-if="propName === 'signalType'"> {{ station[propName] }}</span>
 
@@ -64,14 +65,13 @@ import changeMixin from '../mixins/changeMixin';
 import RoutesModal from '../components/RoutesModal.vue';
 import TableActions from '../components/TableActions.vue';
 import UpdateCard from '../components/UpdateCard.vue';
-import RouteList from '../components/RouteList.vue';
 import { AuthState } from '../types/auth.types';
 import { SceneryRowItem, Availability } from '../types/sceneries.types';
 import { useSceneriesStore } from '../stores/sceneries.store';
 import { useAuthStore } from '../stores/auth.store';
 
 export default defineComponent({
-  components: { RoutesModal, TableActions, UpdateCard, RouteList },
+  components: { RoutesModal, TableActions, UpdateCard },
   mixins: [changeMixin],
 
   data: () => ({
@@ -79,6 +79,26 @@ export default defineComponent({
     authStore: useAuthStore(),
 
     AuthState,
+
+    headers: [
+      { id: 'name', value: 'Nazwa', width: 150 },
+      { id: 'abbr', value: 'Skrót post.', width: 60 },
+      { id: 'hash', value: 'Hash', width: 120 },
+      { id: 'url', value: 'URL', width: 80 },
+      { id: 'projectUrl', value: 'URL projektu', width: 80 },
+      { id: 'lines', value: 'Linie', width: 80 },
+      { id: 'project', value: 'Projekt', width: 100 },
+      { id: 'reqLevel', value: 'Wym. poziom', width: 80 },
+      { id: 'signalType', value: 'Sygnalizacja', width: 150 },
+      { id: 'controlType', value: 'Sterowanie', width: 180 },
+      { id: 'SUP', value: 'SUP', width: 70 },
+      { id: 'ASDEK', value: 'ASDEK', width: 70 },
+      { id: 'authors', value: 'Autorzy', width: 200 },
+      { id: 'routes', value: 'Szlaki', width: 70 },
+      { id: 'checkpoints', value: 'Posterunki', width: 100 },
+      { id: 'hidden', value: 'Ukryty', width: 80 },
+    ],
+
     headerNameList: {
       name: 'Nazwa',
       abbr: 'Skrót posterunku',
@@ -130,7 +150,7 @@ export default defineComponent({
         return;
       }
 
-      let newValue = prompt(`Zmień wartość dla rubryki ${this.headerNameList[propertyName]}`, oldValue || '');
+      let newValue = prompt(`Zmień wartość dla rubryki ${this.headers.find(h => h.id === propertyName)?.value ?? ''}`, oldValue || '');
       if (newValue == null) return;
       (this.sceneriesStore.stationList[stationListRow] as any)[propertyName] = typeof oldValue === 'number' ? parseInt(newValue) : newValue;
       // this.$set(this.stationList[stationListRow], propertyName, parseInt(newValue));
@@ -173,17 +193,18 @@ export default defineComponent({
 <style lang="scss" scoped>
 .table_container {
   overflow: auto;
-  height: 100vh;
+  height: calc(100vh - 1em);
   margin: 0.5em 0;
+  width: 100%;
 }
 
 table {
+  table-layout: fixed;
   text-align: center;
   color: white;
   position: relative;
   border-collapse: collapse;
   width: 100%;
-  min-width: 1600px;
 }
 
 table thead {
@@ -195,7 +216,6 @@ table th {
   padding: 0.4rem 0.45rem;
   background-color: #151b24;
   color: white;
-
   top: 0;
 }
 
@@ -226,7 +246,7 @@ table tr:hover {
 table tr td {
   padding: 0.3rem 0.5rem;
   border: 1px solid #2c2c2c;
-  overflow: auto;
+  overflow: hidden;
   text-overflow: ellipsis;
 }