Browse Source

end file

master 08-details-end
vespasian 1 year ago
parent
commit
a6a531a89e
Signed by: Vespasian GPG Key ID: 541638E7E7F1A4E9
4 changed files with 41 additions and 11 deletions
  1. +9
    -0
      src/App.vue
  2. +18
    -9
      src/components/Navigation.vue
  3. +2
    -2
      src/components/SpaceDetails.vue
  4. +12
    -0
      src/router/index.ts

+ 9
- 0
src/App.vue View File

@ -32,6 +32,15 @@ export default class App extends Vue {
//Perform the mutation
this.setActive(id);
}
public mounted() {
this.$router.beforeEach((to, from, next) => {
if ( to.params.spaceName && to.params.spaceName.length > 0) {
this.changeActiveSpace(to.params.spaceName);
}
next();
})
}
}
</script>
<style lang="scss">


+ 18
- 9
src/components/Navigation.vue View File

@ -1,21 +1,25 @@
<template>
<div>
<h2 class="header">Navigation</h2>
Willkommen im Hackerspace Verzeicnis.
<h4 class="section-header"> Mitglieder bei {{space.name}}</h4>
<user-list :members="space.members"/>
<h4 class="section-header"> Alle Spaces</h4>
<div v-for="(space,i) in spaces" :key="'space'+i" class = "space">
<span v-if="space.name === activeSpace.name">[</span>{{space.name}}<span v-if="space.name === activeSpace.name">]</span>
<h2 class="header">Navigation</h2>Willkommen im Hackerspace Verzeicnis.
<h4 class="section-header">Mitglieder bei {{space.name}}</h4>
<user-list :members="space.members" />
<h4 class="section-header">Alle Spaces</h4>
<div v-for="(space,i) in spaces" :key="'space'+i" class="space">
<span v-if="space.id === activeSpace.id">👉</span>
<router-link
:to="{ name: 'space', params: {spaceName: space.id } }"
class="link"
>{{space.name}}</router-link>
<span v-if="space.id === activeSpace.id">👈</span>
</div>
<router-link class="link" to="/new">+Neuen Space anlegen</router-link>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Hackerspace } from "@/store/hackerspace";
import { Getter } from 'vuex-class';
import { Getter } from "vuex-class";
@Component
export default class Navigation extends Vue {
@ -43,4 +47,9 @@ export default class Navigation extends Vue {
font-weight: bold;
cursor: pointer;
}
.link {
color: white;
font-weight: bold;
}
</style>

+ 2
- 2
src/components/SpaceDetails.vue View File

@ -12,11 +12,11 @@
import { Component, Vue, Prop } from "vue-property-decorator";
import { Hackerspace } from "@/store/hackerspace";
import { DateTime } from 'luxon';
import { Getter } from 'vuex-class';
@Component
export default class SpaceDetails extends Vue {
@Prop({ required: true })
public space!: Hackerspace;
@Getter("activeSpace") space!: Hackerspace;
public get formattedFounded() {
return this.space.founded


+ 12
- 0
src/router/index.ts View File

@ -1,6 +1,8 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import Welcome from '../components/Welcome.vue'
import NewSpace from '../components/NewSpace.vue'
import SpaceDetails from '../components/SpaceDetails.vue'
Vue.use(VueRouter);
@ -10,6 +12,16 @@ const routes = [
name: 'Herzlich Willkommen',
component: Welcome,
},
{
path: '/new',
name: 'Neuen Space anlegen',
component: NewSpace,
},
{
path: '/space/:spaceName',
name: 'space',
component: SpaceDetails,
},
];
const router = new VueRouter({


Loading…
Cancel
Save