From d3bb7df356812836e93bc900006c6b1a033a3c75 Mon Sep 17 00:00:00 2001
From: Dmitry <b4tm4n@mail.ru>
Date: Fri, 4 Jun 2021 14:13:40 +0300
Subject: [PATCH] config file + tooltips

---
 src/components/InfobaseList.vue      |  1 -
 src/components/InfobaseListItem.vue  | 21 +++++----
 src/components/InfobaseURLEditor.vue |  2 +
 src/components/ItemLoading.vue       | 64 ++++++++++++++--------------
 src/config.js                        |  5 +++
 src/config.json                      |  6 +++
 src/main.js                          | 21 ++++++++-
 src/store/modules/infobases.js       | 13 ++----
 8 files changed, 81 insertions(+), 52 deletions(-)
 create mode 100644 src/config.js
 create mode 100644 src/config.json

diff --git a/src/components/InfobaseList.vue b/src/components/InfobaseList.vue
index 8055b55..2f2caac 100644
--- a/src/components/InfobaseList.vue
+++ b/src/components/InfobaseList.vue
@@ -77,7 +77,6 @@ export default {
     InfobaseListItem,
   },
   data: () => ({
-    url_base: "http://localhost:11111",
     is_loading: true,
     loading_error: false,
     infobases: [],
diff --git a/src/components/InfobaseListItem.vue b/src/components/InfobaseListItem.vue
index c1bd0e6..bfa9e1f 100644
--- a/src/components/InfobaseListItem.vue
+++ b/src/components/InfobaseListItem.vue
@@ -15,9 +15,9 @@
         <a
           class="text-break"
           v-if="!url_edit"
-          v-bind:href="url_base + url"
+          v-bind:href="url_full"
           target="blank"
-          >{{ infobase.url }}</a
+          >{{ url }}</a
         >
       </template>
     </td>
@@ -29,6 +29,7 @@
           class="btn btn-warning"
           @click="start_edit_url"
           title="Изменить URL"
+          v-tooltip:left
         >
           Изменить
         </button>
@@ -38,6 +39,7 @@
           class="btn btn-danger"
           @click="remove_publication"
           title="Снять с публикации"
+          v-tooltip:top
         >
           Отменить
         </button>
@@ -47,6 +49,7 @@
           class="btn btn-primary"
           @click="add_publication"
           title="Опубликовать базу"
+          v-tooltip:left
         >
           Публиковать
         </button>
@@ -57,11 +60,15 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations, mapActions } from "vuex";
+import { mapGetters, mapActions } from "vuex";
 
 import InfobaseURLEditor from "@/components/InfobaseURLEditor.vue";
 import ItemLoading from "@/components/ItemLoading.vue";
 
+import config from "@/config.js";
+
+const url_base = config.publication.url_base;
+
 export default {
   name: "InfobaseListItem",
   components: {
@@ -69,7 +76,6 @@ export default {
     ItemLoading,
   },
   data: () => ({
-    url_base: "http://localhost:11111",
     url_edit: false,
   }),
   props: {
@@ -93,15 +99,14 @@ export default {
     url() {
       return this.infobase.url;
     },
+    url_full() {
+      return `${url_base}${this.infobase.url}`;
+    },
     is_locked() {
       return this.$store.getters.isInfobaseLocked(this.infobase.name);
     },
   },
   methods: {
-    ...mapMutations({
-      //set_url: "setInfobaseURL",
-      //set_publication: "setInfobasePublication",
-    }),
     ...mapActions({
       set_url: "updateInfobaseURL",
     }),
diff --git a/src/components/InfobaseURLEditor.vue b/src/components/InfobaseURLEditor.vue
index 67f6cde..38db38a 100644
--- a/src/components/InfobaseURLEditor.vue
+++ b/src/components/InfobaseURLEditor.vue
@@ -6,6 +6,7 @@
         type="submit"
         class="btn btn-sm btn-outline-primary"
         title="Принять"
+        v-tooltip:top
       >
         <svg width="16" height="16">
           <use xlink:href="#check-lg--sprite"></use>
@@ -16,6 +17,7 @@
         class="btn btn-sm btn-outline-secondary"
         @click="cancel"
         title="Отменить"
+        v-tooltip:top
       >
         <svg width="16" height="16"><use xlink:href="#x-lg--sprite"></use></svg>
       </button>
diff --git a/src/components/ItemLoading.vue b/src/components/ItemLoading.vue
index 8ad3624..2aa085c 100644
--- a/src/components/ItemLoading.vue
+++ b/src/components/ItemLoading.vue
@@ -7,38 +7,7 @@
   </div>
 </template>
 
-<style scoped>
-.lds-ellipsis {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 30px;
-}
-.lds-ellipsis div {
-  position: absolute;
-  top: 10px;
-  width: 13px;
-  height: 13px;
-  border-radius: 50%;
-  background: rgb(37, 192, 23);
-  animation-timing-function: cubic-bezier(0, 1, 1, 0);
-}
-.lds-ellipsis div:nth-child(1) {
-  left: 8px;
-  animation: lds-ellipsis1 0.6s infinite;
-}
-.lds-ellipsis div:nth-child(2) {
-  left: 8px;
-  animation: lds-ellipsis2 0.6s infinite;
-}
-.lds-ellipsis div:nth-child(3) {
-  left: 32px;
-  animation: lds-ellipsis2 0.6s infinite;
-}
-.lds-ellipsis div:nth-child(4) {
-  left: 56px;
-  animation: lds-ellipsis3 0.6s infinite;
-}
+<style lang="less" scoped>
 @keyframes lds-ellipsis1 {
   0% {
     transform: scale(0);
@@ -63,4 +32,35 @@
     transform: translate(24px, 0);
   }
 }
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 30px;
+  div {
+    position: absolute;
+    top: 10px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: rgb(37, 192, 23);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    &:nth-child(1) {
+      left: 8px;
+      animation: lds-ellipsis1 0.6s infinite;
+    }
+    &:nth-child(2) {
+      left: 8px;
+      animation: lds-ellipsis2 0.6s infinite;
+    }
+    &:nth-child(3) {
+      left: 32px;
+      animation: lds-ellipsis2 0.6s infinite;
+    }
+    &:nth-child(4) {
+      left: 56px;
+      animation: lds-ellipsis3 0.6s infinite;
+    }
+  }
+}
 </style>
diff --git a/src/config.js b/src/config.js
new file mode 100644
index 0000000..b0581c3
--- /dev/null
+++ b/src/config.js
@@ -0,0 +1,5 @@
+import config from "@/config.json";
+
+export default {
+  ...config,
+};
diff --git a/src/config.json b/src/config.json
new file mode 100644
index 0000000..0744410
--- /dev/null
+++ b/src/config.json
@@ -0,0 +1,6 @@
+{
+    "api": "http://localhost:17653",
+    "publication": {
+        "url_base": "http://localhost:11111"
+    }
+}
diff --git a/src/main.js b/src/main.js
index 15e99c1..e10c10c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,8 +5,25 @@ import store from "./store";
 
 import "jquery/src/jquery.js";
 import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap/dist/js/bootstrap.min.js";
+import "bootstrap/dist/js/bootstrap.bundle.min.js";
 
 window.jQuery = window.$ = require("jquery");
 
-createApp(App).use(store).use(router).mount("#app");
+const app = createApp(App).use(store).use(router);
+
+app.directive("tooltip", {
+  mounted(el, binding) {
+    window.$(el).tooltip({
+      placement: binding.arg,
+      trigger: "hover",
+    });
+  },
+  updated(el) {
+    window.$(el).tooltip("update");
+  },
+  unmounted(el) {
+    window.$(el).tooltip("dispose");
+  },
+});
+
+app.mount("#app");
diff --git a/src/store/modules/infobases.js b/src/store/modules/infobases.js
index 208c69b..ed8f4f2 100644
--- a/src/store/modules/infobases.js
+++ b/src/store/modules/infobases.js
@@ -1,7 +1,8 @@
 import axios from "axios";
 
-//const api_base = "http://localhost:5000/api/v1"; // test1
-const api_base = "http://localhost:17653"; // test2 - mock
+import config from "@/config.js";
+
+const api_base = config.api;
 
 const LoadingStatus = Object.freeze({
   Loaded: { loading: false, error: false },
@@ -9,12 +10,6 @@ const LoadingStatus = Object.freeze({
   Error: { loading: false, error: true },
 });
 
-// const new_infobase = (name) => ({
-//   name,
-//   url: "",
-//   publicated: false,
-// });
-
 const infobaseByName = (state) => (name) =>
   state.infobases.find((infobase) => name === infobase.name);
 
@@ -149,7 +144,7 @@ export default {
 
       ctx.commit("lockInfobase", name);
       try {
-        await axios.put(`${api_base}/publications`, { id:name, name });
+        await axios.put(`${api_base}/publications`, { id: name, name });
         ctx.commit("setErrorMessage", "");
         ctx.dispatch("fetchInfobase", name);
       } catch (err) {