From ec28f3843ace571f877d1d4dbd336f5f04f1c058 Mon Sep 17 00:00:00 2001
From: Ramaguru Radhakrishnan <r_ramaguru@cb.amrita.edu>
Date: Mon, 14 Feb 2022 20:46:23 +0530
Subject: [PATCH] Commented Profile Option, Search Logs Option, Sync Option and
Notification Icon
---
src/components/Navbar.vue | 158 +++++++++++++++++++-------------------
1 file changed, 81 insertions(+), 77 deletions(-)
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index e654e3e..71790d4 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,76 +1,79 @@
<template>
- <div class="sticky top-0 z-40">
- <div class="w-full h-20 px-6 bg-gray-100 border-b flex items-center justify-between">
+ <div class="sticky top-0 z-40">
+ <div class="w-full h-20 px-6 bg-gray-100 border-b flex items-center justify-between">
- <!-- left navbar -->
- <div class="flex">
+ <!-- left navbar -->
+ <div class="flex">
- <!-- mobile hamburger -->
- <div class="inline-block lg:hidden flex items-center mr-4">
- <button class="hover:text-blue-500 hover:border-white focus:outline-none navbar-burger" @click="toggleSidebar()">
- <svg class="h-5 w-5" v-bind:style="{ fill: 'black' }" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
- </button>
- </div>
-
- <!-- search bar -->
- <div class="relative text-gray-600">
- <input type="search" name="serch" placeholder="Search logs" class="bg-white h-10 w-full xl:w-64 px-5 rounded-lg border text-sm focus:outline-none">
- <button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
- <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
- <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"/>
- </svg>
- </button>
- </div>
+ <!-- mobile hamburger -->
+ <div class="inline-block lg:hidden flex items-center mr-4">
+ <button class="hover:text-blue-500 hover:border-white focus:outline-none navbar-burger" @click="toggleSidebar()">
+ <svg class="h-5 w-5" v-bind:style="{ fill: 'black' }" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+ </button>
</div>
- <!-- right navbar -->
- <div class="flex items-center relative">
- <li class="border-yellow-200 bg-yellow-200 inline-block -ml-3">
- <router-link to="/dashboard/logs" class="text-xs h-4 w-45 flex items-center justify-center overflow-hidden text-grey">
- Last Logged on {{lastUpdateTime}}
- </router-link>
- </li>
- <div class="px-4">
- <button v-on:click="syncButton(), fetchingStats = true" class="center bg-blue-400 hover:bg-blue-600 focus:outline-none rounded-lg px-2 text-white font-semibold shadow">{{syncMessage}}</button>
- </div>
- <!--svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="fill-current mr-3 hover:text-blue-500"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/></svg-->
- <!-- <img src="https://a7sas.net/wp-content/uploads/2019/07/4060.jpeg" class="w-12 h-12 rounded-full shadow-lg" @click="dropDownOpen = !dropDownOpen"> -->
- <a @click="dropDownOpen = !dropDownOpen" class="hover:text-gray-900">Profile</a>
- </div>
+ <!-- search bar -->
+ <!--div class="relative text-gray-600">
+ <input type="search" name="serch" placeholder="Search logs" class="bg-white h-10 w-full xl:w-64 px-5 rounded-lg border text-sm focus:outline-none">
+ <button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
+ <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
+
+ <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"/>
+ </svg>
+ </button>
+ </div-->
+ </div>
+
+ <!-- right navbar -->
+ <div class="flex items-center relative">
+ <li class="border-yellow-200 bg-yellow-200 inline-block -ml-3">
+ <router-link to="/dashboard/logs" class="text-xs h-4 w-45 flex items-center justify-center overflow-hidden text-grey">
+ Last Logged on {{lastUpdateTime}}
+ </router-link>
+ </li>
+ <!--div class="px-4">
+ <button v-on:click="syncButton(), fetchingStats = true" class="center bg-blue-400 hover:bg-blue-600 focus:outline-none rounded-lg px-2 text-white font-semibold shadow">{{syncMessage}}</button>
+ </div-->
+ <!--svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" class="fill-current mr-3 hover:text-blue-500"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/></svg-->
+
+ <!-- <img src="https://a7sas.net/wp-content/uploads/2019/07/4060.jpeg" class="w-12 h-12 rounded-full shadow-lg" @click="dropDownOpen = !dropDownOpen"> -->
+ <!--a @click="dropDownOpen = !dropDownOpen" class="hover:text-gray-900">Profile</a-->
+ </div>
- </div>
+ </div>
- <!-- dropdown menu -->
- <div class="absolute bg-gray-100 border border-t-0 shadow-xl text-gray-700 rounded-b-lg w-48 bottom-10 right-0 mr-6" :class="dropDownOpen ? '' : 'hidden'">
- <router-link to="/dashboard/account"><a href="#" class="block px-4 py-2 hover:bg-gray-200">Account</a></router-link>
- <a v-on:click="shutdownWAMPAC()" class="block px-4 py-2 hover:bg-gray-200">Shutdown</a>
- </div>
- <!-- dropdown menu end -->
+ <!-- dropdown menu -->
+ <div class="absolute bg-gray-100 border border-t-0 shadow-xl text-gray-700 rounded-b-lg w-48 bottom-10 right-0 mr-6" :class="dropDownOpen ? '' : 'hidden'">
+ <router-link to="/dashboard/account"><a href="#" class="block px-4 py-2 hover:bg-gray-200">Account</a></router-link>
+ <a v-on:click="shutdownWAMPAC()" class="block px-4 py-2 hover:bg-gray-200">Shutdown</a>
+ </div>
+ <!-- dropdown menu end -->
- </div>
+ </div>
</template>
<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
- name: 'Navbar',
- computed: {
- ...mapState(['sideBarOpen'])
- },
- data() {
- return {
- dropDownOpen: false,
- syncMessage: 'sync',
- lastUpdateTime: "",
- }
- },
- methods: {
- syncButton: function () {
+ name: 'Navbar',
+ computed: {
+ ...mapState(['sideBarOpen'])
+ },
+ data() {
+ return {
+ dropDownOpen: false,
+ syncMessage: 'sync',
+ lastUpdateTime: "",
+ }
+ },
+ methods: {
+
+ syncButton: function () {
- console.log("SYNC STARTED..")
+ console.log("SYNC STARTED..")
- axios.get('http://localhost:1898/sync')
+ axios.get('http://localhost:1898/sync')
.then((response) => {
console.log(response);
this.syncMessage = response.data.data.payload
@@ -82,7 +85,7 @@ export default {
lastUpdate: function () {
- axios.get('http://localhost:1898/getLastLogTime')
+ axios.get('http://localhost:1898/getLastLogTime')
.then((response) => {
console.log(response);
this.lastUpdateTime = response.data.data
@@ -92,27 +95,28 @@ export default {
});
},
- toggleSidebar() {
- this.$store.dispatch('toggleSidebar')
- },
- shutdownWAMPAC: function () {
+ toggleSidebar() {
+ this.$store.dispatch('toggleSidebar')
+ },
- console.log("Shutting Down WAMPAC")
+ shutdownWAMPAC: function () {
+
+ console.log("Shutting Down WAMPAC")
- axios.get('http://localhost:1898/shutdown')
- .then((response) => {
+ axios.get('http://localhost:1898/shutdown')
+ .then((response) => {
- console.log(response);
- this.$router.push({path: '/shutdown'})
+ console.log(response);
+ this.$router.push({path: '/shutdown'})
- })
- .catch(function (error) {
- console.log(error);
- });
- }
- },
- beforeMount() {
- this.lastUpdate()
- },
+ })
+ .catch(function (error) {
+ console.log(error);
+ });
+ }
+ },
+ beforeMount() {
+ this.lastUpdate()
+ },
}
-</script>
\ No newline at end of file
+</script>
--
GitLab