implementovane zobrazenie API pomocnika

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

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,

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>