feat: детали сайта на русском, SiteDetails component

components/SiteDetails.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="site-details">
+    <a class="site-details__title" :href="site.url" target="_blank">{{ site.url }}</a>
+    <div class="site-details__group" v-for="group in groups" :key="group.name">
+      <div class="site-details__group-name"></div>
+      <ul class="site-details__group-fields">
+        <li v-for="field in group.fields" :key="field.name" :title="field.name">
+          <span class="site-details__label">{{ field.comment }}</span>
+          <span class="site-details__value">{{ field.value }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.VueTables__child-row {
+  background: none !important;
+
+  &-toggler {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.site-details {
+  padding: 15px;
+  max-width: 100vw;
+  overflow-x: auto;
+
+  li {
+    list-style: none;
+    padding: 0;
+
+    &:hover {
+      background: #fbfbfb;
+    }
+  }
+
+  &__title {
+    font-size: 1.5rem;
+  }
+
+  &__group {
+    margin-bottom: 15px;
+
+    &-name {
+      font-size: 1.2rem;
+      font-weight: bold;
+    }
+
+    &-fields {
+      padding: 0;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    width: 290px;
+
+    @media (max-width: 400px) {
+      width: auto;
+      margin-right: 0.5em;
+      color: #999;
+      &:after {
+        content: ":";
+      }
+    }
+  }
+}
+</style>
+
+<script>
+export default {
+  props: ["site"],
+  computed: {
+    tests() {
+      return this.$store.state.tests;
+    },
+
+    groups() {
+      let groups = { unnamed: { name: "", fields: [] } };
+      for (let fieldName in this.site) {
+        const fieldValue = this.site[fieldName];
+        if (typeof fieldValue === "object") continue;
+        if (fieldValue === "") continue;
+        const info = this.tests.find(test => test.name == fieldName);
+        if (!info || !info.groups) {
+          // groups.unnamed.fields.push(fieldValue);
+          continue;
+        }
+
+        const groupsList = Array.isArray(info.groups)
+          ? info.groups
+          : [info.groups];
+
+        for (let g in groupsList) {
+          let groupName = groupsList[g];
+          if (!(groupName in groups)) {
+            groups[groupName] = { name: groupName, fields: [] };
+          }
+          info.value = fieldValue;
+          groups[groupName].fields.push(info);
+        }
+      }
+      return groups;
+    }
+  }
+};
+</script>

pages/index.vue

@@ -16,12 +16,7 @@
       :options="tableOptions"
     >
       <template slot="child_row" slot-scope="props">
-        <ul class="site-details">
-          <li v-if="typeof value != 'object'" v-for="(value, key, index) in props.row" :key="index">
-            <b>{{ key }}:</b>
-            {{ value }}
-          </li>
-        </ul>
+        <SiteDetails :site="$store.getters.getSiteByDomain(props.row.domain)"></SiteDetails>
       </template>
 
       <!-- для каждой колонки создается слот, который получает класс и значение через функции, медленно -->
@@ -44,11 +39,12 @@
 <script>
 import moment from "moment";
 import Toolbar from "~/components/Toolbar";
+import SiteDetails from "~/components/SiteDetails";
 import validateMap from "~/assets/js/validate.conf";
 import columnPresets from "~/assets/js/presets/columns.conf";
 
 export default {
-  components: { Toolbar },
+  components: { Toolbar, SiteDetails },
   data() {
     return {
       routerProcess: false,
@@ -158,9 +154,7 @@ export default {
             };
 
             // info from /etc/site-info.yml
-            const info = this.tests.find(
-              test => test.name == fieldName
-            );
+            const info = this.tests.find(test => test.name == fieldName);
             if (info) {
               if (info.comment) field.comment = info.comment;
               field.command = info.command;

store/index.js

@@ -40,6 +40,12 @@ export const getters = {
       // console.log('getters.fieldIndex(field): ', getters.fieldIndex(field));
       return getters.fieldIndex(field) != -1;
     };
+  },
+
+  getSiteByDomain(state) {
+    return domain => {
+      return state.filteredSites.find(site => site.domain == domain);
+    }
   }
 };