Browse Source

data model and default data

master
Alexander Jäger 1 year ago
parent
commit
fe14fc756a
12 changed files with 190 additions and 183 deletions
  1. +15
    -0
      package-lock.json
  2. +4
    -1
      package.json
  3. +18
    -3
      src/App.vue
  4. +19
    -0
      src/components/Header.vue
  5. +0
    -131
      src/components/HelloWorld.vue
  6. +2
    -2
      src/main.ts
  7. +22
    -23
      src/router/index.ts
  8. +90
    -0
      src/store/hackerspace.ts
  9. +10
    -0
      src/store/index.ts
  10. +10
    -0
      src/store/member.ts
  11. +0
    -5
      src/views/About.vue
  12. +0
    -18
      src/views/Home.vue

+ 15
- 0
package-lock.json View File

@ -1094,6 +1094,11 @@
"integrity": "sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA==",
"dev": true
},
"@types/luxon": {
"version": "1.21.0",
"resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-1.21.0.tgz",
"integrity": "sha512-Zhrf65tpjOlVIYrUhX9eu1VzRo8iixQDLFPbfqFxPpG4pBTNNPZ2BFhYE0IAsDfW9GWg+RcrUqiLwrGJH4rq4w=="
},
"@types/minimatch": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@ -7775,6 +7780,11 @@
"yallist": "^3.0.2"
}
},
"luxon": {
"version": "1.22.0",
"resolved": "https://registry.npmjs.org/luxon/-/luxon-1.22.0.tgz",
"integrity": "sha512-3sLvlfbFo+AxVEY3IqxymbumtnlgBwjDExxK60W3d+trrUzErNAz/PfvPT+mva+vEUrdIodeCOs7fB6zHtRSrw=="
},
"make-dir": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
@ -11968,6 +11978,11 @@
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
"integrity": "sha512-ha3jNLJqNhhrAemDXcmMJMKf1Zu4sybMPr9KxJIuOpVcsDQlTBYLLladav2U+g1AvdYDG5Gs0xBTb0M5pXXYFQ=="
},
"vuex-class": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/vuex-class/-/vuex-class-0.3.2.tgz",
"integrity": "sha512-m0w7/FMsNcwJgunJeM+wcNaHzK2KX1K1rw2WUQf7Q16ndXHo7pflRyOV/E8795JO/7fstyjH3EgqBI4h4n4qXQ=="
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",


+ 4
- 1
package.json View File

@ -8,13 +8,16 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@types/luxon": "^1.21.0",
"core-js": "^3.6.4",
"luxon": "^1.22.0",
"register-service-worker": "^1.6.2",
"vue": "^2.6.11",
"vue-class-component": "^7.2.2",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.5",
"vuex": "^3.1.2"
"vuex": "^3.1.2",
"vuex-class": "^0.3.2"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.18.0",


+ 18
- 3
src/App.vue View File

@ -2,12 +2,25 @@
<div id="app" class="main">
<div class="header">Header</div>
<div class="content">
<div class="nav"> Nav</div>
<div class="nav">Nav</div>
<div class="details">Details</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Getter } from "vuex-class";
import { Hackerspace } from "./store/hackerspace";
import Header from "./components/Header.vue";
@Component({
components: { Header }
})
export default class App extends Vue {
@Getter("activeSpace") activeSpace!: Hackerspace;
}
</script>
<style lang="scss">
.main {
font-family: Avenir, Helvetica, Arial, sans-serif;
@ -19,7 +32,6 @@
height: 100%;
display: flex;
flex-direction: column;
}
.header {
@ -36,7 +48,10 @@
.nav {
background-color: lightblue;
flex: 0 0 10em;
flex: 0 0 15em;
margin-top: 1em;
margin-left: 1em;
margin-bottom: 1em;
}
.details {


+ 19
- 0
src/components/Header.vue View File

@ -0,0 +1,19 @@
<template>
<div class="hello">
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class Header extends Vue {
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>

+ 0
- 131
src/components/HelloWorld.vue View File

@ -1,131 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,
<br />check out the
<a
href="https://cli.vuejs.org"
target="_blank"
rel="noopener"
>vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
target="_blank"
rel="noopener"
>babel</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
target="_blank"
rel="noopener"
>typescript</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
target="_blank"
rel="noopener"
>pwa</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
target="_blank"
rel="noopener"
>router</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
target="_blank"
rel="noopener"
>vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
target="_blank"
rel="noopener"
>eslint</a>
</li>
</ul>
<h3>Essential Links</h3>
<ul>
<li>
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
</li>
<li>
<a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
</li>
<li>
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
</li>
<li>
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
</li>
<li>
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
</li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li>
<a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
</li>
<li>
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
</li>
<li>
<a
href="https://github.com/vuejs/vue-devtools#vue-devtools"
target="_blank"
rel="noopener"
>vue-devtools</a>
</li>
<li>
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
</li>
<li>
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
</li>
</ul>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
@Watch("msg")
private updateMessage() {
//console.log(this.msg);
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

+ 2
- 2
src/main.ts View File

@ -1,13 +1,13 @@
import Vue from 'vue';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
//import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
// router,
store,
render: (h) => h(App),
}).$mount('#app');

+ 22
- 23
src/router/index.ts View File

@ -1,29 +1,28 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
Vue.use(VueRouter);
// Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
},
];
// const routes = [
// {
// path: '/',
// name: 'Home',
// component: Home,
// },
// {
// path: '/about',
// name: 'About',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
// },
// ];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
// const router = new VueRouter({
// mode: 'history',
// base: process.env.BASE_URL,
// routes,
// });
export default router;
// export default router;

+ 90
- 0
src/store/hackerspace.ts View File

@ -0,0 +1,90 @@
import { Member } from './member';
import { DateTime } from 'luxon';
export interface Hackerspace {
name: string;
id: string;
location: string;
isOpen: boolean;
members: Member[];
}
export function defaultHackerSpaces(): Hackerspace[] {
const spaces: Hackerspace[] = [{
name: 'Hacknology e.V.',
id: 'hacknology',
location: 'TZK Keller, Blarerstraße 56, 78462 Konstanz',
isOpen: true,
members: [{
firstname: 'Anna',
lastname: 'Admin',
joined: DateTime.local(2013, 6, 15),
isAdmin: true,
isHidden: false
},
{
firstname: 'Bastian',
lastname: 'Beta',
joined: DateTime.local(2015, 7, 6),
isAdmin: false,
isHidden: false
},
{
firstname: 'Corinna',
lastname: 'Charlie',
joined: DateTime.local(2013, 6, 15),
isAdmin: false,
isHidden: false
},
{
firstname: 'Dietmar',
lastname: 'Kötke',
joined: DateTime.local(2013, 6, 15),
isAdmin: false,
isHidden: false
},
{
firstname: 'Sven',
lastname: 'Secret',
joined: DateTime.local(2016, 10, 9),
isAdmin: false,
isHidden: true
}]
}, {
name: 'Innovationswerkstatt Konstanz e.V.',
id: 'innowerkstatt',
location: 'TZK Keller, Blarerstraße 56, 78462 Konstanz',
isOpen: true,
members: [
{
firstname: 'Harry',
lastname: 'Holz',
joined: DateTime.local(2016, 10, 9),
isAdmin: true,
isHidden: false
},
{
firstname: 'Tim',
lastname: 'Techniker',
joined: DateTime.local(2016, 10, 9),
isAdmin: false,
isHidden: false
}
]
},
{
name: 'Toolbox Bodensee e.V.',
id: 'toolbox',
location: 'Bergheimer Str. 6-12, 88677 Markdorf',
isOpen: false,
members: [ {
firstname: 'Günther',
lastname: 'Gründer',
joined: DateTime.local(2015, 9, 1),
isAdmin: true,
isHidden: false
}]
}];
return spaces;
}

+ 10
- 0
src/store/index.ts View File

@ -1,10 +1,20 @@
import Vue from 'vue';
import Vuex from 'vuex';
import {defaultHackerSpaces} from './hackerspace';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
spaces: defaultHackerSpaces(),
activeSpace: 'hacknology'
},
getters: {
activeSpace: state => {
const currentSpace = state.spaces.filter( space => space.id === state.activeSpace);
return currentSpace && currentSpace.length > 0 ? currentSpace[0] : null;
}
},
mutations: {
},


+ 10
- 0
src/store/member.ts View File

@ -0,0 +1,10 @@
import {DateTime} from 'luxon';
export interface Member {
firstname: string;
lastname: string;
joined: DateTime;
isAdmin: boolean;
isHidden: boolean;
}

+ 0
- 5
src/views/About.vue View File

@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

+ 0
- 18
src/views/Home.vue View File

@ -1,18 +0,0 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
export default {
name: 'Home',
components: {
HelloWorld,
},
};
</script>

Loading…
Cancel
Save