From 61833c67e709072f65928032fc8261a81c46f7ea Mon Sep 17 00:00:00 2001
From: igor <mino@tpsoft.org>
Date: Thu, 24 Apr 2025 00:20:48 +0200
Subject: [PATCH] added font awesome, added icons for main menu and report
 component, added List of reports into main menu

---
 webapp/package-lock.json         | 56 ++++++++++++++++++++++++++++++++
 webapp/package.json              |  4 +++
 webapp/src/App.vue               |  9 ++---
 webapp/src/components/Report.vue |  4 +--
 webapp/src/main.js               |  8 +++++
 5 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index ccb3638..93eb5c8 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -8,6 +8,10 @@
       "name": "bugreport",
       "version": "0.0.1",
       "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.7.2",
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/vue-fontawesome": "^3.0.8",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0",
         "vuedraggable": "^4.1.0"
@@ -488,6 +492,58 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.8.tgz",
+      "integrity": "sha512-yyHHAj4G8pQIDfaIsMvQpwKMboIZtcHTUvPqXjOHyldh1O1vZfH4W03VDPv5RvI9P6DLTzJQlmVgj9wCf7c2Fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 0848755..db1a4c9 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -9,6 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0",
     "vuedraggable": "^4.1.0"
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 474c6ae..a7b9d2b 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -9,10 +9,11 @@
 			</router-link>
 		</div>
 		<div class="menu">
-			<router-link to="/add">Pridať bug</router-link>
-			<router-link to="/archive">Archív</router-link>
-			<router-link to="/api">API</router-link>
-			<router-link to="/about">O aplikácii</router-link>
+			<router-link to="/add"><font-awesome-icon :icon="['fas', 'square-plus']" /> Pridať bug</router-link>
+			<router-link to="/"><font-awesome-icon :icon="['fas', 'list-check']" /> Zoznam reportov</router-link>
+			<router-link to="/archive"><font-awesome-icon :icon="['fas', 'box-archive']" /> Archív</router-link>
+			<router-link to="/api"><font-awesome-icon :icon="['fas', 'plug']" /> API</router-link>
+			<router-link to="/about"><font-awesome-icon :icon="['fas', 'address-card']" /> O aplikácii</router-link>
 		</div>
 	</div>
 	<router-view></router-view>
diff --git a/webapp/src/components/Report.vue b/webapp/src/components/Report.vue
index cd6a9de..949ce67 100644
--- a/webapp/src/components/Report.vue
+++ b/webapp/src/components/Report.vue
@@ -9,7 +9,7 @@ defineProps({
 	<div class="report">
 		<div class="report-header">
 			<div class="report-title">
-				<h3>{{ title }}</h3>
+				<h3><font-awesome-icon :icon="['fas', 'bug']" /> {{ title }}</h3>
 			</div>
 		</div>
 		<div class="report-description">
@@ -17,6 +17,6 @@ defineProps({
 				{{ description }}
 			</p>
 		</div>
-		<div class="report-date">{{ date }}</div>
+		<div class="report-date"><font-awesome-icon :icon="['fas', 'calendar-days']" /> {{ date }}</div>
 	</div>
 </template>
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 84deaba..b59ca18 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -3,7 +3,15 @@ import './assets/css/style.css'
 import App from './App.vue'
 import { router } from './router'
 
+// Font Awesome
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { fas } from '@fortawesome/free-solid-svg-icons' // alebo pridaj konkrétne ikony
+library.add(fas) // alebo napr. library.add(faSearch, faUser)
+
+
 const app = createApp(App)
+app.component('font-awesome-icon', FontAwesomeIcon)
 
 app.use(router)
 app.mount('#app')