config file + tooltips

src/components/InfobaseList.vue

@@ -77,7 +77,6 @@ export default {
     InfobaseListItem,
   },
   data: () => ({
-    url_base: "http://localhost:11111",
     is_loading: true,
     loading_error: false,
     infobases: [],

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",
     }),

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>

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>

src/config.js

@@ -0,0 +1,5 @@
+import config from "@/config.json";
+
+export default {
+  ...config,
+};

src/config.json

@@ -0,0 +1,6 @@
+{
+    "api": "http://localhost:17653",
+    "publication": {
+        "url_base": "http://localhost:11111"
+    }
+}

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");

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) {