loader timing and color

src/frontend_vue/Makefile

@@ -9,8 +9,7 @@ info:
 	echo "Pick either dev or prod."
 
 clean:
-	- docker kill $(CONNAME)
-	- docker rm $(CONNAME)
+	- docker rm -f $(CONNAME)
 
 build-container:
 	docker build . -t $(IMGNAME)
@@ -21,3 +20,5 @@ dev:	build-container clean
 prod: 	build-container clean
 	docker run --name $(CONNAME) -d -p 8080:8080 -v $(shell pwd):/src $(IMGNAME) /src/ops_scripts/prod.sh
 
+node-env: clean
+	docker run --name $(CONNAME) -it -p 8080:8080 -v $(shell pwd):/src $(IMGNAME)

src/frontend_vue/config/config.json

@@ -1,3 +1,3 @@
 {
-    "api_addr": "http://193.2.76.103"
+    "api_addr": "http://0.0.0.0:8084"
 }

src/frontend_vue/config/config_dev.json

@@ -1,3 +1,3 @@
 {
-    "api_addr": "http://193.2.76.103:8084"
+    "api_addr": "http://0.0.0.0:8084"
 }

src/frontend_vue/package.json

@@ -10,50 +10,52 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "ajv": "^6.10.0",
     "axios": "^0.18.0",
-    "bootstrap-vue": "^2.0.0-rc.11",
+    "bootstrap-vue": "^2.0.0-rc.19",
+    "jquery": "^3.4.0",
     "sha256": "^0.2.0",
-    "vue": "^2.5.2",
-    "vue-cookies": "^1.5.6",
-    "vue-router": "^3.0.1",
+    "vue": "^2.6.10",
+    "vue-cookies": "^1.5.13",
+    "vue-router": "^3.0.6",
     "vue-spinner": "^1.0.3"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.22.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^7.1.5",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
-    "chalk": "^2.0.1",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
+    "chalk": "^2.4.2",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "^2.1.1",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
-    "node-notifier": "^5.1.2",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "node-notifier": "^5.4.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
     "ora": "^1.2.0",
-    "portfinder": "^1.0.13",
+    "portfinder": "^1.0.20",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
+    "postcss-loader": "^2.1.6",
     "postcss-url": "^7.2.1",
-    "rimraf": "^2.6.0",
-    "semver": "^5.3.0",
+    "rimraf": "^2.6.3",
+    "semver": "^5.7.0",
     "shelljs": "^0.7.6",
-    "uglifyjs-webpack-plugin": "^1.1.1",
-    "url-loader": "^0.5.8",
-    "vue-loader": "^13.3.0",
+    "uglifyjs-webpack-plugin": "^1.3.0",
+    "url-loader": "^1.1.2",
+    "vue-loader": "^13.7.3",
     "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.2",
+    "vue-template-compiler": "^2.6.10",
     "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
+    "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-dev-server": "^2.11.5",
+    "webpack-merge": "^4.2.1"
   },
   "engines": {
     "node": ">= 6.0.0",

src/frontend_vue/src/App.vue

@@ -7,3 +7,25 @@ export default {
   name: 'App',
 }
 </script>
+
+<style>
+body {
+	font-family: cambria;
+}
+.ulred {
+	color: #b71511;
+	color: rgb(183,21,17);
+}
+.lmenu td {
+	color: #9e9e9e;
+}
+.redlinks a {
+	color: #9e9e9e;
+}
+.redlinks a:hover {
+	color: #b71511;
+}
+.text-secondary {
+	color: #9e9e9e !important;
+}
+</style>

src/frontend_vue/src/components/Home.vue

@@ -1,20 +1,17 @@
 <template>
 <div>
-  <p
-    v-if="this.$root.store.api_error !== null" 
-    class="text-warning"
-  >
-    api_error: {{ this.$root.store.api_error }}
-  </p>
   <Nav></Nav>
     <div class="my-home container-fluid">
       <div class="row">
-        <div id="serach" class="col-sm-2 border-right fill" :key=this.$root.store.indexReloader>
+        <div id="search" class="col-sm-2 border-right fill" :key=this.$root.store.indexReloader>
           <LWords 
             v-if="this.$root.store.selIndex.val === 'words'"></LWords>
           <LFunctors v-else></LFunctors>
         </div>
         <div class="col-sm-10">
+          <p v-if="this.$root.store.api_error != null">
+              {{ this.$root.store.api_error }}
+          </p>
           <router-view></router-view>
         </div>
       </div>

src/frontend_vue/src/components/LFunctors.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="redlinks">
     <table>
         <tr v-for="functor in functors">
             <td><a href="#" v-on:click="selectFunctor(functor)">{{ functor[0] }}</a></td>

src/frontend_vue/src/components/LWords.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="redlinks">
     <select v-model="selectedLetter">
         <option v-for="letter in alphabet" :value="letter">
             {{ letter.toUpperCase() }} ({{ getNumWords(letter) }})

src/frontend_vue/src/components/Login.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="redlinks">
   <div class="col-sm-2">
     <a href="#" v-on:click="this.$root.routeBack">Nazaj</a>
   </div>

src/frontend_vue/src/components/MainDispl.vue

@@ -1,6 +1,6 @@
 <template>
 <!--load mode-->
-<div v-if="show_loader">
+<div v-if="state === 'loading'">
     <pulse-loader :color="loader_color"></pulse-loader>
 </div>
 
@@ -76,16 +76,11 @@ export default {
         },
         state: "loading",  // editing, normal
         request_reload: false,
-        loader_color: "#007bff",
+        loader_color: "#b71511",
     }},
     created: function () {
         this.reload()
     },
-    computed: {
-        show_loader: function () {
-            return this.state === "loading" && this.$root.store.api_error !== null
-        }
-    },
     watch: {
         hw: function () {
             this.reload()
@@ -118,6 +113,7 @@ export default {
                 }
             }
             var component = this
+            component.state = "loading"
             this.$http.get(
                 this.$root.store.api_addr + 
                 "/api/functor-frames" + 
@@ -131,6 +127,7 @@ export default {
                 })
                 .catch(function(error) {
                     component.$root.store.api_error = error
+                    component.state = "error"
                 })
         },
         getFrames: function (hw, reduce_fun=null) {
@@ -149,6 +146,7 @@ export default {
                 }
             }
             var component = this
+            component.state = "loading"
             this.$http.get(
                 this.$root.store.api_addr + "/api/frames" + 
                     "?hw=" + hw + "&rf=" + reduce_fun +
@@ -161,6 +159,7 @@ export default {
                 })
                 .catch(function(error) {
                     component.$root.store.api_error = error
+                    component.state = "error"
                 })
         },
         buildSentences: function () {

src/frontend_vue/src/components/Nav.vue

@@ -2,7 +2,8 @@
 <nav>
     <b-navbar toggleable="md" type="light" variant="light">
     <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
-    <b-navbar-brand>Vezljivostni vzorci slovenskih glagolov</b-navbar-brand>
+    <!--b-navbar-brand>Vezljivostni vzorci slovenskih glagolov</b-navbar-brand-->
+    <b-navbar-brand>VEZLJIVOSTNI VZORCI SLOVENSKIH GLAGOLOV</b-navbar-brand>
     <b-collapse is-nav id="nav_collapse">
 
     <b-navbar-nav>
@@ -103,4 +104,16 @@ export default {
         }
     }
 }
-</script>
+</script>
+
+<style>
+.bg-light {
+    background-color: rgb(183,21,17,0.9) !important;
+}
+nav a {
+    color: white;
+}
+nav a:hover {
+    color: white;
+}
+</style>

src/frontend_vue/src/components/NewPass.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class=redlinks>
   <div class="col-sm-2">
     <a href="#" v-on:click="this.$root.routeBack">Nazaj</a>
   </div>

src/frontend_vue/src/components/Register.vue

@@ -1,5 +1,5 @@
 <template>
-<div>
+<div class="redlinks">
   <div class="col-sm-2">
     <a href="#" v-on:click="this.$root.routeBack">Nazaj</a>
   </div>
@@ -7,15 +7,6 @@
     <div class="alert alert-danger" v-if="error">
       <p>{{ error }}</p>
     </div>
-    <div class="form-group">
-      <input 
-        type="text"
-        class="form-control js-login__username"
-        placeholder="Uporabnik"
-        v-model="credentials.username" 
-        autocomplete="off"
-      >
-    </div>
     <div class="form-group">
       <input
         type="email"
@@ -25,6 +16,15 @@
         autocomplete="off"
       >
     </div>
+    <div class="form-group">
+      <input 
+        type="text"
+        class="form-control js-login__username"
+        placeholder="Uporabnik"
+        v-model="credentials.username" 
+        autocomplete="off"
+      >
+    </div>
     <div class="form-group">
       <input
         type="password"
@@ -38,7 +38,7 @@
       <input
         type="password"
         class="form-control js-login__password "
-        placeholder="Ponovite geslo."
+        placeholder="Ponovite geslo"
         v-model="credentials.snd_password" 
         autocomplete="off"
       >