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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 25
      web/public/index.html
  2. 41
      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

25
web/public/index.html
View File

@ -1,17 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</head>
<style>
body, html {
width: 100%;
height: 100%;
}
</style>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

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

@ -1,11 +1,10 @@
<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">
<a class="navbar-item" href="/" >
<img src="../assets/undraw_server_q2pb.svg" width="60" height="150" />
<a class="navbar-item" href="/">
<img src="../assets/undraw_server_q2pb.svg" width="60" height="150"/>
<h3 class="is-size-4">Ichnaea</h3>
</a>
<a
role="button"
class="navbar-burger burger"
@ -18,10 +17,24 @@
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<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">
<span class="icon mr-1">
<i class="fas fa-book"></i>
</span>
Documentation
</a>
</div>
@ -32,9 +45,25 @@
import {Vue} from "vue-class-component";
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>
<style scoped>
.navbar {
height: 5vh;
}
</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>
<Navbar/>
<Hero/>
<Sidebar/>
<div class="content">
<Tile/>
</div>
</template>
<script lang="ts">
import {Options, Vue} from 'vue-class-component';
import {io} from 'socket.io-client'
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({
components: {
Navbar,
Hero
Sidebar,
Tile,
}
})
@ -27,19 +32,15 @@ export default class Dashboard extends Vue {
this.socket = io('/')
this.socket.on('connect', () => {
console.log(('Connected to server!'));
});
this.socket.on('disconnect', (reason: string) => {
console.log(('Lost connection!'));
if (reason === 'io server disconnect') this.socket.connect();
if (reason === 'io client disconnect') {
console.log(('Server kicked you!'))
}
console.log(('Reconnecting...'));
});
this.socket.on('console', (data: {}) => {
@ -49,5 +50,12 @@ export default class Dashboard extends Vue {
</script>
<style scoped>
@media (min-width: 572px) {
.content {
position: relative;
margin-top: 7vh;
margin-left: 17rem;
margin-right: 2rem;
}
}
</style>
Write Preview
Loading…
Cancel
Save