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

🔨 Change routing

main
Haris Razis 4 years ago
parent
df69cfc9bf
commit
e5240d1871
8 changed files with 90 additions and 38 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. 7
      web/src/App.vue
  2. 21
      web/src/components/Footer.vue
  3. 18
      web/src/components/Navbar.vue
  4. 36
      web/src/components/Sidebar.vue
  5. 21
      web/src/router/index.ts
  6. 13
      web/src/views/Dashboard.vue
  7. 8
      web/src/views/DashboardHome.vue
  8. 4
      web/src/views/Login.vue

7
web/src/App.vue
View File

@ -1,11 +1,4 @@
<template> <template>
<!-- <div id="nav">-->
<!-- <router-link to="/">Home</router-link>-->
<!-- |-->
<!-- <router-link to="/about">About</router-link>-->
<!-- |-->
<!-- <router-link to="/login">Login</router-link>-->
<!-- </div>-->
<router-view/> <router-view/>
</template> </template>

21
web/src/components/Footer.vue
View File

@ -0,0 +1,21 @@
<template>
<footer class="footer">
<div class="content has-text-centered">
<p class="menu-label">
A Project by Haris Razis
<br>
ichnaea © {{ new Date().getFullYear() }}
</p>
</div>
</footer>
</template>
<script>
export default {
name: 'Footer'
}
</script>
<style scoped>
</style>

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

@ -1,10 +1,12 @@
<template> <template>
<nav class="navbar is-fixed-top is-black" 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="/"> <router-link to="/">
<img src="../assets/undraw_server_q2pb.svg" width="60" height="150"/> <a class="navbar-item">
<h3 class="is-size-4">Ichnaea</h3> <img src="../assets/undraw_server_q2pb.svg" width="60" height="150"/>
</a> <h3 class="is-size-4 has-text-white">Ichnaea</h3>
</a>
</router-link>
<a <a
role="button" role="button"
class="navbar-burger burger" class="navbar-burger burger"
@ -20,10 +22,12 @@
<div id="navbarBasicExample" class="navbar-menu"> <div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end"> <div class="navbar-end">
<a class="navbar-item"> <a class="navbar-item">
<span class="icon mr-1"> <router-link :to="{ name: 'Profile', params: { username: username }}">
<span class="icon mr-1 has-text-white">
<i class="fa fa-user"></i> <i class="fa fa-user"></i>
</span> </span>
<span>{{ username }}</span> <span class="has-text-white">{{ username }}</span>
</router-link>
</a> </a>
<a class="navbar-item has-text-danger mr-2" @click="logout"> <a class="navbar-item has-text-danger mr-2" @click="logout">
<span class="icon mr-1"> <span class="icon mr-1">
@ -47,7 +51,7 @@ import {Vue} from "vue-class-component";
export default class Navbar extends Vue { export default class Navbar extends Vue {
private username = ''; private username = '';
mounted() { created() {
this.username = this.$store.getters.user.username this.username = this.$store.getters.user.username
} }

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

@ -6,24 +6,40 @@
</p> </p>
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
<a> <router-link :to="{ name: 'DashboardHome', params: { username: $route.params.username }}">
<a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
<i class="fas fa-digital-tachograph"/> <i class="fas fa-digital-tachograph"/>
</span> </span>
<span>&nbsp;Dashboard</span> <span>&nbsp;Dashboard</span>
</span> </span>
</a> </a>
</router-link>
</li> </li>
<li> <li>
<a> <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
<a>
<span class="icon-text">
<span class="icon">
<i class="fas fa-user"/>
</span>
<span>&nbsp;Profile</span>
</span>
</a>
</router-link>
</li>
<li>
<router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
<a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
<i class="fas fa-users"/> <i class="fas fa-users"/>
</span> </span>
<span>&nbsp;Athletes</span> <span>&nbsp;Athletes</span>
</span> </span>
</a> </a>
</router-link>
</li> </li>
</ul> </ul>
<p class="menu-label"> <p class="menu-label">
@ -31,24 +47,28 @@
</p> </p>
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
<a> <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
<a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
<i class="fas fa-table"/> <i class="fas fa-table"/>
</span> </span>
<span>&nbsp;Tables</span> <span>&nbsp;Tables</span>
</span> </span>
</a> </a>
</router-link>
</li> </li>
<li> <li>
<a> <router-link :to="{ name: 'Profile', params: { username: $route.params.username }}">
<a>
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">
<i class="fas fa-chart-area"/> <i class="fas fa-chart-area"/>
</span> </span>
<span>&nbsp;Charts</span> <span>&nbsp;Charts</span>
</span> </span>
</a> </a>
</router-link>
</li> </li>
</ul> </ul>
</div> </div>

21
web/src/router/index.ts
View File

@ -1,6 +1,7 @@
import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router' import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
import Home from '../views/Home.vue'
import store from '../store/index' import store from '../store/index'
import Home from '../views/Home.vue'
import Login from "@/views/Login.vue";
const routes: Array<RouteRecordRaw> = [ const routes: Array<RouteRecordRaw> = [
{ {
@ -11,15 +12,27 @@ const routes: Array<RouteRecordRaw> = [
{ {
path: '/login', path: '/login',
name: 'Login', name: 'Login',
component: () => import('../views/Login.vue'), component: Login
}, },
{ {
path: '/dashboard', path: '/:username/dashboard',
name: 'Dashboard', name: 'Dashboard',
component: () => import('../views/Dashboard.vue'), component: () => import('../views/Dashboard.vue'),
children: [
{
path: '',
name: 'DashboardHome',
component: () => import('../views/DashboardHome.vue')
},
{
path: 'profile',
name: 'Profile',
component: () => import('../views/Profile.vue')
}
],
meta: { meta: {
requiresAuth: true requiresAuth: true
} },
} }
] ]

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

@ -2,8 +2,9 @@
<Navbar/> <Navbar/>
<Sidebar/> <Sidebar/>
<div class="content"> <div class="content">
<Tile/> <router-view></router-view>
</div> </div>
<Footer/>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -11,13 +12,13 @@ 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 Sidebar from '@/components/Sidebar.vue' import Sidebar from '@/components/Sidebar.vue'
import Tile from '@/components/Tile.vue' import Footer from '@/components/Footer.vue'
@Options({ @Options({
components: { components: {
Navbar, Navbar,
Sidebar, Sidebar,
Tile, Footer
} }
}) })
@ -32,15 +33,13 @@ export default class Dashboard extends Vue {
this.socket = io('/') this.socket = io('/')
this.socket.on('connect', () => { this.socket.on('connect', () => {
this.$store.commit("serverConnected", true);
}); });
this.socket.on('disconnect', (reason: string) => { this.socket.on('disconnect', (reason: string) => {
this.$store.commit("serverConnected", false);
if (reason === 'io server disconnect') this.socket.connect(); if (reason === 'io server disconnect') this.socket.connect();
if (reason === 'io client disconnect') {
}
}); });
this.socket.on('console', (data: {}) => { this.socket.on('console', (data: {}) => {

8
web/src/components/Tile.vue → web/src/views/DashboardHome.vue
View File

@ -1,4 +1,5 @@
<template> <template>
<h1 class="title is-2">Home</h1>
<div class="tile"> <div class="tile">
<article class="tile is-child notification has-background-primary-dark has-text-white"> <article class="tile is-child notification has-background-primary-dark has-text-white">
<nav class="level"> <nav class="level">
@ -31,8 +32,9 @@
</div> </div>
<div class="level-item has-text-centered"> <div class="level-item has-text-centered">
<div> <div>
<p class="heading">Followers</p> <p class="heading">Server</p>
<p class="title">456K</p> <p class="title" v-if="this.$store.getters.serverStatus">Connected</p>
<p class="title" v-else>Disconnected</p>
</div> </div>
</div> </div>
<div class="level-item has-text-centered"> <div class="level-item has-text-centered">
@ -54,7 +56,7 @@ interface User {
lastLogin: string lastLogin: string
} }
export default class Tile extends Vue { export default class DashboardHome extends Vue {
private user!: User; private user!: User;
private date!: string; private date!: string;

4
web/src/views/Login.vue
View File

@ -61,7 +61,7 @@ export default class Login extends Vue {
private getCurrentUser() { private getCurrentUser() {
this.$store.dispatch('getCurrentUser') this.$store.dispatch('getCurrentUser')
.then(() => this.$router.push('/dashboard')) .then((res: any) => this.$router.push({name: 'Dashboard', params: {username: res.data.username}}))
.catch((err: any) => { .catch((err: any) => {
this.$router.push('/login') this.$router.push('/login')
}) })
@ -71,7 +71,7 @@ export default class Login extends Vue {
let user = {username: this.username, password: this.password} let user = {username: this.username, password: this.password}
this.$store.dispatch('login', user) this.$store.dispatch('login', user)
.then(() => this.$router.push('/dashboard')) .then(() => this.$router.push({name: 'Dashboard', params: {username: this.username}}))
.catch((err: any) => { .catch((err: any) => {
this.msg = err.response.data.errors.message || err.message || 'Something went wrong!' this.msg = err.response.data.errors.message || err.message || 'Something went wrong!'
this.$router.push('/login') this.$router.push('/login')

Write Preview
Loading…
Cancel
Save