From 58a7444da279e5710dbc86af71efb13d36e910e1 Mon Sep 17 00:00:00 2001
From: igor <mino@tpsoft.org>
Date: Sun, 4 May 2025 18:08:27 +0200
Subject: [PATCH] implementovane zobrazenie API pomocnika

---
 api.php                         | 78 ++++++++++++++++++++++++++++++---
 webapp/src/assets/css/style.css | 24 ++++++++++
 webapp/src/backend.js           |  4 ++
 webapp/src/views/API.vue        | 59 ++++++++++++++++++++++++-
 4 files changed, 156 insertions(+), 9 deletions(-)

diff --git a/api.php b/api.php
index 7e55861..18db979 100644
--- a/api.php
+++ b/api.php
@@ -63,13 +63,77 @@ function help()
 {
 	return [
 		'actions' => [
-			'help' => 'Show this help',
-			'add' => 'Add report',
-			'update' => 'Update report',
-			'delete' => 'Delete report',
-			'get' => 'Get report',
-			'getall' => 'Get all reports',
-			'getallgrouped' => 'Get all reports grouped by group',
+			'help' => [
+				'name' => 'help',
+				'description' => 'Show this help',
+				'params' => []
+			],
+			'add' => [
+				'name' => 'add',
+				'description' => 'Add report',
+				'params' => [
+					'title' => 'Report title',
+					'description' => 'Report description',
+					'status' => 'Report status',
+					'group' => 'Report group',
+					'priority' => 'Report priority',
+				]
+			],
+			'update' => [
+				'name' => 'update',
+				'description' => 'Update report',
+				'params' => [
+					'report_id' => 'Report id',
+					'title' => 'Report title',
+					'description' => 'Report description',
+					'status' => 'Report status',
+					'group' => 'Report group',
+					'priority' => 'Report priority',
+				]
+			],
+			'delete' => [
+				'name' => 'delete',
+				'description' => 'Delete report',
+				'params' => [
+					'report_id' => 'Report id',
+				]
+			],
+			'get' => [
+				'name' => 'get',
+				'description' => 'Get report',
+				'params' => [
+					'report_id' => 'Report id',
+				]
+			],
+			'getall' => [
+				'name' => 'getall',
+				'description' => 'Get all reports',
+				'params' => [
+					'status' => '(ptional) Report status, default: 0,1,2,3',
+				]
+			],
+			'getallgrouped' => [
+				'name' => 'getallgrouped',
+				'description' => 'Get all reports grouped by group',
+				'params' => [
+					'status' => '(ptional) Report status, default: 0,1,2,3',
+				]
+			],
+			'updateordnum' => [
+				'name' => 'updateordnum',
+				'description' => 'Update report ordnum',
+				'params' => [
+					'ordnums' => 'Report ordnums in json format {report_id: ordnum, ...}',
+				]
+			],
+			'updatestatus' => [
+				'name' => 'updatestatus',
+				'description' => 'Update report status',
+				'params' => [
+					'report_id' => 'Report id',
+					'status' => 'Report status',
+				]
+			],
 		]
 	];
 }
diff --git a/webapp/src/assets/css/style.css b/webapp/src/assets/css/style.css
index 649f8a4..0801cd0 100644
--- a/webapp/src/assets/css/style.css
+++ b/webapp/src/assets/css/style.css
@@ -239,6 +239,30 @@ button:focus-visible,
 	margin: 0 auto;
 	padding: 20px;
 }
+#api .action {
+	margin-top: 10px;
+	padding-bottom: 10px;
+	background-color: var(--color-bg2);
+	transition: all 0.3s;
+	min-width: 150px;
+}
+#api .action:hover {
+	filter: brightness(1.2);
+}
+#api .action h3 {
+	background-color: var(--color-bg0);
+	margin: 0px;
+	padding: 5px;
+	text-align: center;
+}
+#api .action h4 {
+	margin: 0px;
+	padding-left: 10px;
+}
+#api .action p {
+	padding: 10px;
+	text-align: justify;
+}
 
 /* ----------------------------------------------------
    07 - ABOUT
diff --git a/webapp/src/backend.js b/webapp/src/backend.js
index 6cd4c96..001f47b 100644
--- a/webapp/src/backend.js
+++ b/webapp/src/backend.js
@@ -44,6 +44,10 @@ export const backend = {
 	/* ----------------------------------------------------
 	 * API akcie
 	 */
+	help() {
+		return this.callPromise('help', {});
+	},
+
 	add(title, description, status, group, priority) {
 		return this.callPromise('add', {
 			title: title,
diff --git a/webapp/src/views/API.vue b/webapp/src/views/API.vue
index 25871db..57237ef 100644
--- a/webapp/src/views/API.vue
+++ b/webapp/src/views/API.vue
@@ -2,18 +2,73 @@
 	<div id="api">
 		<h1>API</h1>
 		<p>
-			API prípojny bod je dostupná na adrese
+			API prípojny bod je dostupný na adrese
 			<a href="{{ api_endpoint }}">{{ api_endpoint }}</a
 			>.
 		</p>
+		<h2>Zoznam akcii</h2>
+		<ul>
+			<li v-for="action in help.actions" :key="action.name">
+				<a :href="'#' + action.name">{{ action.name }}</a>
+			</li>
+		</ul>
+		<h2>Prehľad parametrov akcií</h2>
+		<div v-for="action in help.actions" :key="action.name" class="action">
+			<h3 :id="action.name">{{ action.name }}</h3>
+			<p>
+				{{ action.description }} <br />
+				<a :href="api_endpoint + '?action=' + action.name" target="_blank">{{
+					api_endpoint + "?action=" + action.name
+				}}</a>
+			</p>
+			<h4>Parametre</h4>
+			<p v-if="Object.keys(action.params).length == 0">
+				<font-awesome-icon :icon="['fas', 'circle-info']" />
+				&nbsp;
+				Ziadne parametre
+			</p>
+			<ul>
+				<li v-for="(param_desc, param_name) in action.params" :key="param_name">
+					<strong>{{ param_name }}</strong>
+					&ndash;
+					{{ param_desc }}
+				</li>
+			</ul>
+		</div>
 	</div>
 </template>
+
 <script>
+import { backend } from "../backend";
+
 export default {
+	name: "API",
+	components: {},
 	data() {
 		return {
-			api_endpoint: window.location.origin + __SUBPATH__ + "api.php",
+			api_endpoint: backend.endpont,
+			help: {
+				actions: {
+					help: {
+						name: "help",
+						description: "This help",
+						params: {
+							foo: "bar",
+						},
+					},
+				},
+			},
 		};
 	},
+	mounted() {
+		this.loadHelp();
+	},
+	methods: {
+		loadHelp() {
+			backend.help().then((response) => {
+				this.help = response;
+			});
+		},
+	},
 };
 </script>