add api client and implement simple log list

babel.config.js

@@ -1,3 +1,5 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+	presets: [
+		"@vue/cli-plugin-babel/preset"
+	],
 };

package-lock.json

@@ -8,8 +8,10 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.24.0",
         "core-js": "^3.6.5",
         "vue": "^3.0.0",
+        "vue-meta": "^3.0.0-alpha.8",
         "vue-router": "^4.0.0-0",
         "vuex": "^4.0.0-0"
       },
@@ -3373,6 +3375,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "dependencies": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -7321,7 +7331,6 @@
       "version": "1.14.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
       "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -14868,6 +14877,14 @@
       "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
       "dev": true
     },
+    "node_modules/vue-meta": {
+      "version": "3.0.0-alpha.9",
+      "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-3.0.0-alpha.9.tgz",
+      "integrity": "sha512-/ff7qNKy4c5NwmDl6N5XK2hhiXEdMeUxvk+SXCs40W9DOgu7VWGqPtgdSnXHnYMRoofkT/nKHE+vXklJ47r9Dw==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.0.12",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",
@@ -18596,6 +18613,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -21758,8 +21783,7 @@
     "follow-redirects": {
       "version": "1.14.6",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
-      "dev": true
+      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -27824,6 +27848,12 @@
         }
       }
     },
+    "vue-meta": {
+      "version": "3.0.0-alpha.9",
+      "resolved": "https://registry.npmjs.org/vue-meta/-/vue-meta-3.0.0-alpha.9.tgz",
+      "integrity": "sha512-/ff7qNKy4c5NwmDl6N5XK2hhiXEdMeUxvk+SXCs40W9DOgu7VWGqPtgdSnXHnYMRoofkT/nKHE+vXklJ47r9Dw==",
+      "requires": {}
+    },
     "vue-router": {
       "version": "4.0.12",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.12.tgz",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "frontend",
+  "name": "zierle-training-online-tools",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -8,8 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
+    "vue-meta": "^3.0.0-alpha.8",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="https://www.zierle-training.de/images/152x152/2980389/favicon.png">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

src/App.vue

@@ -1,14 +1,21 @@
 <template>
-	<n-config-provider :theme="null">
-		<n-message-provider>
-			<NavBar v-if="!isHome" />
-			<router-view />
-		</n-message-provider>
-	</n-config-provider>
+	<div>
+		<metainfo>
+			<template v-slot:title="{ content }">{{ content ? `${content} // Online-Tools` : `Zierle-Training // Online-Tools` }}</template>
+		</metainfo>
+
+		<n-config-provider :theme="null">
+			<n-message-provider>
+				<NavBar v-if="!isHome" />
+				<router-view />
+			</n-message-provider>
+		</n-config-provider>
+	</div>
 </template>
 
 <script>
 import { defineComponent } from 'vue'
+import { useMeta } from 'vue-meta'
 import {darkTheme} from 'naive-ui'
 
 import NavBar from '@/components/NavBar'
@@ -17,6 +24,12 @@ export default defineComponent({
 	components: {
 		NavBar,
 	},
+	setup() {
+		useMeta({
+			title: '',
+			htmlAttrs: { lang: 'en' }
+		})
+	},
 	data() {
 		return { darkTheme }
 	},

src/api/index.js

@@ -0,0 +1,15 @@
+import axios from 'axios'
+
+const apiClient = axios.create({
+	baseURL: 'https://server.riezel.com/api/v1',
+	withCredentials: false,
+	timeout: 2000,
+	headers: {
+		Accept: 'application/json',
+		'Content-Type': 'application/json'
+	}
+})
+
+export function getPhotoLogList() {
+	return apiClient.get('/photologs/')
+}

src/main.js

@@ -3,8 +3,16 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+import { createMetaManager, plugin as metaPlugin } from 'vue-meta'
+
 import naive from 'naive-ui'
 
 var app = createApp(App).use(store).use(router)
+
+app.use(createMetaManager())
+app.use(metaPlugin)
+
 app.use(naive)
+
+//await router.isReady()
 app.mount('#app')

src/store/index.js

@@ -1,8 +1,23 @@
-import { createStore } from "vuex";
+import { createStore } from 'vuex'
+import { getPhotoLogList } from '@/api'
 
 export default createStore({
-  state: {},
-  mutations: {},
-  actions: {},
-  modules: {},
-});
+	state: {
+		photoLogList: []
+	},
+	mutations: {
+		SET_PHOTO_LOG_LIST(state, newPhotoLogList) {
+			state.photoLogList = newPhotoLogList
+		}
+	},
+	actions: {
+		loadPhotoLogList({commit}) {
+			getPhotoLogList().then((response) => {
+				commit('SET_PHOTO_LOG_LIST', response.data)
+			}).catch((error) => {
+				console.log(error)
+			})
+		}
+	},
+	modules: {},
+})

src/views/CreateLog.vue

@@ -1,3 +1,14 @@
 <template>
 	<h1>Create Log</h1>
-</template>
+</template>
+
+<script>
+import { useMeta } from 'vue-meta'
+
+export default {
+	name: 'CreateLog',
+	setup() {
+		useMeta({ title: 'Create a new Photo Log' })
+	},
+}
+</script>

src/views/LogsList.vue

@@ -1,3 +1,79 @@
 <template>
-	<h1>Logs List</h1>
-</template>
+	<div>
+		<h1>Logs List</h1>
+		<n-table :bordered="false" :single-line="true">
+			<thead>
+				<th>Photo Log Title</th>
+				<th>Date created</th>
+				<th>delete</th>
+			</thead>
+			<tbody>
+				<tr v-for="photolog in photoLogList" :key="photolog.id">
+					<td>{{ photolog.title }}</td>
+					<td>{{ photolog.date }}</td>
+					<td>
+						<n-button type="error" @click="askDeleteLog(photolog.id)">Delete</n-button>
+					</td>
+				</tr>
+			</tbody>
+		</n-table>
+
+		<n-modal
+			v-model:show="showDeleteModal"
+			:mask-closable="true"
+			preset="dialog"
+			type="warning"
+			title="Delete Log"
+			:content=deleteModalContent
+			positive-text="Cancel"
+			negative-text="Delete"
+			@negative-click="deleteLog"
+		/>
+	</div>
+</template>
+
+<script>
+import { useMeta } from 'vue-meta'
+
+export default {
+	name: 'LogsList',
+	setup() {
+		useMeta({ title: 'All Photo Logs' })
+	},
+	data() {
+		return { 
+			showDeleteModal: false,
+			deleteId: null,
+			deleteModalContent: '',
+		}
+	},
+	mounted() {
+		this.$store.dispatch('loadPhotoLogList')
+	},
+	computed: {
+		photoLogList() {
+			let list = this.$store.state.photoLogList
+			if (list !== null) {
+				list.sort((a,b) => {
+					return a.date < b.date ? 1 : -1
+				})
+				return list
+			}
+			return null
+		}
+	},
+	methods: { 
+		askDeleteLog(logId) {
+			this.showDeleteModal = true
+			this.deleteId = logId
+			let logtitle = this.photoLogList.filter((o) => {
+				return o.id == logId
+			})[0].title
+			this.deleteModalContent = 'Do you want to permanently delete "' + logtitle + '"?'
+		},
+		deleteLog() {
+			console.log('delete ' + this.deleteId)
+		}
+	}
+}
+</script>

vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    transpileDependencies: [
+        'vue-meta',
+    ],
+}