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

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save