implement base vue files

.eslintrc.json

@@ -20,19 +20,19 @@
     ],
     "rules": {
         "indent": [
-            "warn",
+            "error",
-            "tab"
+			"tab"
         ],
         "linebreak-style": [
-            "warn",
+            "off",
             "unix"
         ],
         "quotes": [
-            "warn",
+            "error",
             "single"
         ],
         "semi": [
-            "warn",
+            "error",
             "never"
         ],
 		"vue/no-v-model-argument": "off"

package-lock.json

@@ -28,7 +28,8 @@
         "naive-ui": "^2.23.2",
         "prettier": "^2.2.1",
         "sass": "^1.26.5",
-        "sass-loader": "^8.0.2"
+        "sass-loader": "^8.0.2",
+        "vfonts": "^0.1.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -12628,9 +12629,9 @@
       "dev": true
     },
     "node_modules/selfsigned": {
-      "version": "1.10.11",
+      "version": "1.10.14",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.14.tgz",
-      "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
+      "integrity": "sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==",
       "dev": true,
       "dependencies": {
         "node-forge": "^0.10.0"
@@ -25986,9 +25987,9 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.11",
+      "version": "1.10.14",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.14.tgz",
-      "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
+      "integrity": "sha512-lkjaiAye+wBZDCBsu5BGi0XiLRxeUlsGod5ZP924CRSEoGuZAw/f7y9RKu28rwTfiHVhdavhB0qH0INV6P1lEA==",
       "dev": true,
       "requires": {
         "node-forge": "^0.10.0"

package.json

@@ -28,6 +28,7 @@
     "naive-ui": "^2.23.2",
     "prettier": "^2.2.1",
     "sass": "^1.26.5",
-    "sass-loader": "^8.0.2"
+    "sass-loader": "^8.0.2",
+    "vfonts": "^0.1.0"
   }
 }

src/App.vue

@@ -1,46 +1,42 @@
 <template>
-  <n-config-provider :theme="null">
+	<n-config-provider :theme="null">
-    <n-message-provider>
+		<n-message-provider>
-  <div id="nav">
+			<NavBar v-if="!isHome" />
-    <router-link to="/">Startseite</router-link> |
+			<router-view />
-    <router-link to="/about">Das sind wir</router-link>
+		</n-message-provider>
-  </div>
+	</n-config-provider>
-  <router-view />
-  </n-message-provider>
-  </n-config-provider>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
 import {darkTheme} from 'naive-ui'
 
+import NavBar from '@/components/NavBar'
+
 export default defineComponent({
-  setup() {
+	components: {
-    return { darkTheme }
+		NavBar,
-  }
+	},
+	data() {
+		return { darkTheme }
+	},
+	computed: {
+		isHome() {
+			return this.$route.name == 'Home'
+		}
+	}
 })
 </script>
 
 
 <style lang="scss">
-#app {
+body,html {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+	margin: 0;
-  -webkit-font-smoothing: antialiased;
+	padding: 0;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
 }
 
-#nav {
+* {
-  padding: 30px;
+	font-family: v-sans;
-
+	font-weight: 400;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
 }
 </style>

src/components/HelloWorld.vue

@@ -1,67 +0,0 @@
-<template>
-  <div class="hello">
-	<h1>{{ msg }}</h1>
-	<p>
-		Check me out, BOY!!!
-	</p>
-
-	<n-button type="primary" @click="showModal = true">Open Modal</n-button>
-	<n-modal
-		v-model:show="showModal"
-		:mask-closable="false"
-		preset="dialog"
-		title="Dialog"
-		content="Are you sure?"
-		positive-text="Confirm"
-		@positive-click="onPositiveClick"
-		@negative-click="onNegativeClick"
-		negative-text="Cancel"
-	/>
-
-	</div>
-</template>
-
-<script>
-import { useMessage } from 'naive-ui'
-
-export default {
-	name: 'HelloWorld',
-	props: {
-		msg: String,
-	},
-	data() { 
-		return {
-			message: useMessage(),
-			showModal: false
-		}
-	},
-	methods: {
-		onPositiveClick () {
-			this.message.success('Submit')
-			this.showModal = false
-		},
-		onNegativeClick () {
-			this.message.success('Cancel')
-			this.showModalRef = false
-		}
-	}
-}
-</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>

src/components/NavBar.vue

@@ -0,0 +1,23 @@
+<template>
+	<nav>
+		<router-link :to="{name: 'Home'}">Home</router-link>
+		<router-link :to="{name: 'LogsList'}">All Logs</router-link>
+		<router-link :to="{name: 'CreateLog'}">+ New</router-link>
+	</nav>
+</template>
+
+<script>
+export default {
+	name: 'NavBar',
+	data() { 
+		return {}
+	}
+}
+</script>
+
+<style scoped>
+nav { 
+	width: 100%;
+	border-bottom: 1px solid gray;
+}
+</style>

src/main.js

@@ -1,10 +1,10 @@
-import { createApp } from "vue";
+import { createApp } from 'vue'
-import App from "./App.vue";
+import App from './App.vue'
-import router from "./router";
+import router from './router'
-import store from "./store";
+import store from './store'
 
-import naive from "naive-ui";
+import naive from 'naive-ui'
 
 var app = createApp(App).use(store).use(router)
-app.use(naive);
+app.use(naive)
-app.mount("#app");
+app.mount('#app')

src/router/index.js

@@ -1,26 +1,31 @@
-import { createRouter, createWebHistory } from "vue-router";
+import 'vfonts/FiraSans.css'
-import Home from "../views/Home.vue";
+
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/Home.vue'
+import LogsList from '../views/LogsList.vue'
+import CreateLog from '../views/CreateLog.vue'
 
 const routes = [
-  {
+	{
-    path: "/",
+		path: '/',
-    name: "Home",
+		name: 'Home',
-    component: Home,
+		component: HomeView,
-  },
+	},
-  {
+	{
-    path: "/about",
+		path: '/logs',
-    name: "About",
+		name: 'LogsList',
-    // route level code-splitting
+		component: LogsList
-    // this generates a separate chunk (about.[hash].js) for this route
+	},
-    // which is lazy-loaded when the route is visited.
+	{
-    component: () =>
+		path: '/logs/create',
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
+		name: 'CreateLog',
-  },
+		component: CreateLog
-];
+	}
+]
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+	history: createWebHistory(),
-  routes,
+	routes,
-});
+})
 
-export default router;
+export default router

src/views/About.vue

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

src/views/CreateLog.vue

@@ -0,0 +1,3 @@
+<template>
+	<h1>Create Log</h1>
+</template>

src/views/Home.vue

@@ -1,18 +1,84 @@
 <template>
-  <div class="home">
+	<div>
-    <img alt="Vue logo" src="../assets/logo.png" />
+		<div class="banner-bg">
-    <HelloWorld msg="Willkommen to MEINE Vue App" />
+			<div>
-  </div>
+				<n-gradient-text :size="40" type="success">
+					Zierle-Training
+				</n-gradient-text>
+				<br>
+				<n-gradient-text :size="30" type="info">
+					Online Tools
+				</n-gradient-text>
+			</div>
+		</div>
+
+		<div class="home-menu">
+			<n-space justify="space-around" >
+				<n-space vertical>
+					<h2>Documents</h2>
+					<n-button type="primary">All Documents</n-button>
+				</n-space>
+				<n-space vertical>
+					<h2>Photo Logs</h2>
+					<n-space>
+						<router-link :to="{name: 'LogsList'}">
+							<n-button type="primary">All Logs</n-button>
+						</router-link>
+						<router-link :to="{name: 'CreateLog'}">
+							<n-button type="info">+ New</n-button>
+						</router-link>
+					</n-space>
+					<n-button>Crop Photos</n-button>
+				</n-space>
+			</n-space>
+		</div>
+	</div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
 
 export default {
-  name: "Home",
+	name: 'HomeView'
-  components: {
+}
-    HelloWorld,
-  },
-};
 </script>
+
+<style scoped>
+.home-menu {
+	margin: auto;
+	position: relative;
+	min-width: 30vw;
+	max-width: 60vw;
+	min-height: 20vh;
+	background-color: white;
+	z-index: 1;
+	margin-top: 30vh;
+	box-shadow: 0 0 50px rgba(0,0,0,0.25);
+	border: none;
+	border-radius: 0 2em;
+	padding: 1em;
+}
+
+.banner-bg {
+	background-image: url('../assets/images/home_bg.jpg');
+	background-size: cover;
+	background-position: center;
+	width: 100%;
+	height: 50%;
+	position: absolute;
+	top: 0;
+	z-index: -1;
+	border-bottom-left-radius: 100% 30%;
+	border-bottom-right-radius: 100% 30%;
+	box-shadow: 0 0 50px rgba(0,0,0,0.25);
+}
+
+.banner-bg div {
+	margin: auto;
+	text-align: center;
+	margin-top: 3em;
+}
+
+a {
+	text-decoration: none;
+}
+</style>

src/views/LogsList.vue

@@ -0,0 +1,3 @@
+<template>
+	<h1>Logs List</h1>
+</template>