initial UI (and build tools)

Makefile

@@ -1,11 +1,18 @@
 
-all: deps gen build
+all: deps gen build build_ui
 
 rebuild: gen build
 
 build:
 	@GO111MODULE=on go build -o goliac ./cmd/goliac
 
+build_ui:
+	@echo "Building Goliac UI ..."
+	@cd ./browser/goliac-ui/; npm install --legacy-peer-deps && npm run build
+
+run_ui:
+	@cd ./browser/goliac-ui/; npm run serve
+
 test: deps verifiers
 	@GO111MODULE=on go test -race -covermode=atomic -coverprofile=coverage.txt ./internal/...
 	@go tool cover -html coverage.txt -o cover.html

browser/goliac-ui/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^1.5.0",
     "core-js": "^3.8.3",
+    "element-plus": "^1.0.2-beta.28",
     "vue": "^3.2.13",
     "vue-router": "^4.0.13"
   },
@@ -20,7 +21,8 @@
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
+    "eslint-plugin-vue": "^8.0.3",
+    "vue-cli-plugin-element-plus": "~0.0.13"
   },
   "eslintConfig": {
     "root": true,

browser/goliac-ui/src/App.vue

@@ -1,16 +1,25 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div id="app">
+    <el-row style="background-color:#000000; height:40px;">
+      <el-col :span="22" :offset="2" style="margin-top:8px;">
+        <router-link :to="{ name: 'dashboard' }">
+          <span style="color:#ffffff;">Goliac</span>
+        </router-link>
+      </el-col>
+    </el-row>
+    <el-row>
+      &nbsp;
+    </el-row>
+    <div class="router-view-container">
+      <router-view></router-view>
+    </div>
+  </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'App',
-  components: {
-    HelloWorld
-  }
 }
 </script>
 
@@ -19,8 +28,14 @@ export default {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+  text-align: left;
   color: #2c3e50;
-  margin-top: 60px;
 }
-</style>
+
+a:link { text-decoration: none; }
+a:visited { text-decoration: none; }
+a:hover { text-decoration: none; }
+a:active { text-decoration: none; }
+
+
+</style>

browser/goliac-ui/src/components/DashboardApp.vue

@@ -0,0 +1,42 @@
+<template>
+      <el-dialog v-model="flushcacheVisible" title="Cache flushed" width="60%">
+        <span class="dialog-content">
+            The cache has been flushed, next sync will load from Github
+            </span>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="flushcacheVisible = false">Ok</el-button>
+      </span>
+    </template>
+  </el-dialog>
+  test
+</template>
+
+<script>
+  import Axios from "axios";
+  
+  import constants from "@/constants";
+  import helpers from "@/helpers/helpers";
+  
+  const { handleErr } = helpers;
+  
+  const { API_URL } = constants;
+  
+  export default {
+    name: "DashboardApp",
+    components: {
+    },
+    data() {
+      return {
+        flushcacheVisible: false,
+      };
+    },
+    methods: {
+        flushcache() {
+        Axios.post(`${API_URL}/flushcache`,{}).then(() => {
+          this.flushcacheVisible=false
+        }, handleErr.bind(this));
+      }
+    }
+  };
+</script>

browser/goliac-ui/src/components/SpinnerApp.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="spinner"></div>
+  </template>
+
+  <script>
+  export default {
+    name: "SpinnerApp"
+  };
+  </script>
+
+  <style scoped>
+  .spinner {
+    width: 40px;
+    height: 40px;
+    background-color: #74e5e0;
+  
+    margin: 100px auto;
+    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+    animation: sk-rotateplane 1.2s infinite ease-in-out;
+  }
+  
+  @-webkit-keyframes sk-rotateplane {
+    0% {
+      -webkit-transform: perspective(120px);
+    }
+    50% {
+      -webkit-transform: perspective(120px) rotateY(180deg);
+    }
+    100% {
+      -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
+    }
+  }
+  
+  @keyframes sk-rotateplane {
+    0% {
+      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    }
+    50% {
+      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    }
+    100% {
+      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    }
+  }
+  </style>

browser/goliac-ui/src/constants.js

@@ -0,0 +1,5 @@
+const API_URL = process.env.VUE_APP_API_URL
+
+export default {
+  API_URL,
+}

browser/goliac-ui/src/helpers/helpers.js

@@ -0,0 +1,49 @@
+function indexBy (arr, prop) {
+    return arr.reduce((acc, el) => {
+      acc[el[prop]] = el
+      return acc
+    }, {})
+  }
+
+  function pluck (arr, prop) {
+    return arr.map(el => el[prop])
+  }
+
+  function sum (arr) {
+    return arr.reduce((acc, el) => {
+      acc += el
+      return acc
+    }, 0)
+  }
+
+  function get (obj, path, def) {
+    const fullPath = path
+      .replace(/\[/g, '.')
+      .replace(/]/g, '')
+      .split('.')
+      .filter(Boolean)
+
+    return fullPath.every(everyFunc) ? obj : def
+
+    function everyFunc (step) {
+      return !(step && (obj = obj[step]) === undefined)
+    }
+  }
+
+  function handleErr (err) {
+    let msg = get(err, 'response.data.message', 'request error')
+    this.$message.error(msg)
+    if (get(err, 'response.status') === 401) {
+      let redirectURL = err.response.headers['www-authenticate'].split(`"`)[1]
+      window.location = redirectURL
+      return
+    }
+  }
+
+  export default {
+    indexBy,
+    pluck,
+    sum,
+    get,
+    handleErr
+  }