xrazis
/
ichnaea
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

➕ Add basic ui items of dashboard 

Buggy on small screens.
main
Haris Razis 4 years ago
parent
b8a23ab309
commit
4d5f40f021
5 changed files with 218 additions and 23 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      web/public/index.html
  2. 37
      web/src/components/Navbar.vue
  3. 84
      web/src/components/Sidebar.vue
  4. 67
      web/src/components/Tile.vue
  5. 24
      web/src/views/Dashboard.vue

9
web/public/index.html
View File

@ -7,9 +7,16 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<style>
body, html {
width: 100%;
height: 100%;
}
</style>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->

37
web/src/components/Navbar.vue
View File

@ -1,11 +1,10 @@
<template> <template>
<nav class="navbar is-dark" role="navigation" aria-label="main navigation"> <nav class="navbar is-fixed-top is-black" role="navigation" aria-label="main navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="/"> <a class="navbar-item" href="/">
<img src="../assets/undraw_server_q2pb.svg" width="60" height="150"/> <img src="../assets/undraw_server_q2pb.svg" width="60" height="150"/>
<h3 class="is-size-4">Ichnaea</h3> <h3 class="is-size-4">Ichnaea</h3>
</a> </a>
<a <a
role="button" role="button"
class="navbar-burger burger" class="navbar-burger burger"
@ -18,10 +17,24 @@
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
<div id="navbarBasicExample" class="navbar-menu"> <div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end"> <div class="navbar-end">
<a class="navbar-item">
<span class="icon mr-1">
<i class="fa fa-user"></i>
</span>
<span>{{ username }}</span>
</a>
<a class="navbar-item has-text-danger mr-2" @click="logout">
<span class="icon mr-1">
<i class="fa fa-sign-out-alt"></i>
</span>
<span>Logout</span>
</a>
<a class="navbar-item" href="https://github.com/xrazis/ichnaea" target="_blank"> <a class="navbar-item" href="https://github.com/xrazis/ichnaea" target="_blank">
<span class="icon mr-1">
<i class="fas fa-book"></i>
</span>
Documentation Documentation
</a> </a>
</div> </div>
@ -32,9 +45,25 @@
import {Vue} from "vue-class-component"; import {Vue} from "vue-class-component";
export default class Navbar extends Vue { export default class Navbar extends Vue {
private username = '';
mounted() {
this.username = this.$store.getters.user.username
}
private logout() {
this.$store.dispatch('logout')
.then(() => this.$router.push('/'))
.catch((err: any) => {
console.log(err)
this.$router.push('/')
})
}
} }
</script> </script>
<style scoped> <style scoped>
.navbar {
height: 5vh;
}
</style> </style>

84
web/src/components/Sidebar.vue
View File

@ -0,0 +1,84 @@
<template>
<aside class="menu has-background-black">
<div class="container mx-5 my-4">
<p class="menu-label">
General
</p>
<ul class="menu-list">
<li>
<a>
<span class="icon-text">
<span class="icon">
<i class="fas fa-digital-tachograph"/>
</span>
<span>&nbsp;Dashboard</span>
</span>
</a>
</li>
<li>
<a>
<span class="icon-text">
<span class="icon">
<i class="fas fa-users"/>
</span>
<span>&nbsp;Athletes</span>
</span>
</a>
</li>
</ul>
<p class="menu-label">
Athlete Data
</p>
<ul class="menu-list">
<li>
<a>
<span class="icon-text">
<span class="icon">
<i class="fas fa-table"/>
</span>
<span>&nbsp;Tables</span>
</span>
</a>
</li>
<li>
<a>
<span class="icon-text">
<span class="icon">
<i class="fas fa-chart-area"/>
</span>
<span>&nbsp;Charts</span>
</span>
</a>
</li>
</ul>
</div>
</aside>
</template>
<script lang="ts">
import {Vue} from 'vue-class-component';
export default class Sidebar extends Vue {
}
</script>
<style scoped>
@media (max-width: 572px) {
aside {
position: relative;
top: 5vh;
min-width: 100%;
}
}
@media (min-width: 572px) {
aside {
position: fixed;
height: 95vh;
width: 15rem;
top: 5vh;
}
}
</style>

67
web/src/components/Tile.vue
View File

@ -0,0 +1,67 @@
<template>
<div class="tile">
<article class="tile is-child notification has-background-primary-dark has-text-white">
<nav class="level">
<div class="level-left">
<div class="level-item ">
<span class="icon is-large">
<i class="fa fa-3x fa-user-circle"/>
</span>
<p class="is-size-4 is-bold">&nbspWhats up, {{ user.username }}</p>
</div>
</div>
<div class="level-right">
<div class="level-item has-text-centered">
<p class="is-size-6 is-bold">Last login on {{ date }}</p>
</div>
</div>
</nav>
<nav class="level">
<div class="level-item has-text-centered">
<div>
<p class="heading">Your Athletes</p>
<p class="title">3,456</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Live Athletes</p>
<p class="title">123</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Followers</p>
<p class="title">456K</p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Likes</p>
<p class="title">789</p>
</div>
</div>
</nav>
</article>
</div>
</template>
<script lang="ts">
import {Vue} from 'vue-class-component';
interface User {
username: string,
lastLogin: string
}
export default class Tile extends Vue {
private user!: User;
private date!: string;
created() {
this.user = this.$store.getters.user
this.date = new Date(this.user.lastLogin).toLocaleString()
}
}
</script>

24
web/src/views/Dashboard.vue
View File

@ -1,18 +1,23 @@
<template> <template>
<Navbar/> <Navbar/>
<Hero/> <Sidebar/>
<div class="content">
<Tile/>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import {Options, Vue} from 'vue-class-component'; import {Options, Vue} from 'vue-class-component';
import {io} from 'socket.io-client' import {io} from 'socket.io-client'
import Navbar from '@/components/Navbar.vue' import Navbar from '@/components/Navbar.vue'
import Hero from '@/components/Hero.vue' import Sidebar from '@/components/Sidebar.vue'
import Tile from '@/components/Tile.vue'
@Options({ @Options({
components: { components: {
Navbar, Navbar,
Hero Sidebar,
Tile,
} }
}) })
@ -27,19 +32,15 @@ export default class Dashboard extends Vue {
this.socket = io('/') this.socket = io('/')
this.socket.on('connect', () => { this.socket.on('connect', () => {
console.log(('Connected to server!'));
}); });
this.socket.on('disconnect', (reason: string) => { this.socket.on('disconnect', (reason: string) => {
console.log(('Lost connection!'));
if (reason === 'io server disconnect') this.socket.connect(); if (reason === 'io server disconnect') this.socket.connect();
if (reason === 'io client disconnect') { if (reason === 'io client disconnect') {
console.log(('Server kicked you!'))
} }
console.log(('Reconnecting...'));
}); });
this.socket.on('console', (data: {}) => { this.socket.on('console', (data: {}) => {
@ -49,5 +50,12 @@ export default class Dashboard extends Vue {
</script> </script>
<style scoped> <style scoped>
@media (min-width: 572px) {
.content {
position: relative;
margin-top: 7vh;
margin-left: 17rem;
margin-right: 2rem;
}
}
</style> </style>
Write Preview
Loading…
Cancel
Save