rozpracovane API a frontend pomocou Vue.js

This commit is contained in:
Igor Miňo 2025-04-13 01:37:24 +02:00
parent 6dce7184bd
commit ee4729b8ef
23 changed files with 1929 additions and 0 deletions

46
api.php Normal file
View File

@ -0,0 +1,46 @@
<?php
include_once 'config.php';
$action = $_REQUEST['action'];
switch ($action) {
default:
case 'help':
$result = help();
break;
case 'add':
$result = reportAdd($_REQUEST['title'], $_REQUEST['description'], $_REQUEST['status'], $_REQUEST['group'], $_REQUEST['priority']);
break;
case 'update':
$result = reportUpdate($_REQUEST['report_id'], $_REQUEST['title'], $_REQUEST['description'], $_REQUEST['status'], $_REQUEST['group'], $_REQUEST['priority']);
break;
case 'delete':
$result = reportDelete($_REQUEST['report_id']);
break;
case 'get':
$result = reportGet($_REQUEST['report_id']);
break;
case 'getall':
$result = reportGetAll($_REQUEST['status']);
break;
}
header('Content-Type: application/json');
echo json_encode($result);
exit;
function help() {
return [
'actions' => [
'help' => 'Show this help',
'add' => 'Add report',
'update' => 'Update report',
'delete' => 'Delete report',
'get' => 'Get report',
'getall' => 'Get all reports'
]
];
}
?>

14
config.php Normal file
View File

@ -0,0 +1,14 @@
<?php
require_once __DIR__.'/lib/functions.inc.php';
require_once __DIR__.'/lib/Medoo/src/Medoo.php';
global $db;
$db = new Medoo\Medoo([
'type' => 'sqlite',
'database' => __DIR__ . '/data/database.db'
]);
dbCheck();
?>

11
index.php Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BugReport</title>
</head>
<body>
</body>
</html>

24
webapp/.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
webapp/.vscode/extensions.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar"]
}

5
webapp/README.md Normal file
View File

@ -0,0 +1,5 @@
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

13
webapp/index.html Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/bugreport.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BugReport</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

1348
webapp/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

19
webapp/package.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "bugreport",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build && node scripts/generateHtaccess.js",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"vite": "^6.2.0"
}
}

View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools, Modified by Igor Mino 2025-04-12 23:58:02 -->
<svg width="800px" height="800px" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg">
<defs>
<style>
.cls-1{fill:none;stroke:#020202;stroke-miterlimit:10;stroke-width:1.91px;}
.cls-2{fill:none;stroke:#5555FF;stroke-miterlimit:10;stroke-width:1.91px;}
.cls-3{fill:#cccccc;stroke:#cccccc;}
</style>
</defs>
<polygon class="cls-3" points="3 2 16 2 20 6 20 22 3 22" />
<line class="cls-2" x1="17.73" y1="14.86" x2="14.86" y2="14.86"/>
<line class="cls-2" x1="9.14" y1="14.86" x2="6.27" y2="14.86"/>
<polygon class="cls-1" points="20.59 6.27 20.59 22.5 3.41 22.5 3.41 1.5 15.82 1.5 20.59 6.27"/>
<polygon class="cls-1" points="20.59 6.27 20.59 7.23 14.86 7.23 14.86 1.5 15.82 1.5 20.59 6.27"/>
<path class="cls-2" d="M7.23,10.09v1A1.91,1.91,0,0,0,9.14,13"/>
<path class="cls-2" d="M16.77,10.09v1A1.91,1.91,0,0,1,14.86,13"/>
<path class="cls-2" d="M7.23,19.64v-1a1.92,1.92,0,0,1,1.91-1.91"/>
<path class="cls-2" d="M16.77,19.64v-1a1.92,1.92,0,0,0-1.91-1.91"/>
<rect class="cls-2" x="9.14" y="11.05" width="5.73" height="7.64" rx="2.86"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,23 @@
// generateHtaccess.js
import fs from 'fs';
import path from 'path';
import { baseUrl } from '../vite.config.js';
// Obsah .htaccess súboru
const htaccessContent = `
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase ${baseUrl}
RewriteRule ^index\\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . ${baseUrl}index.html [L]
</IfModule>
`;
// Určte cestu pre vygenerovanie .htaccess do dist/
const distPath = path.join(process.cwd(), 'dist', '.htaccess');
// Zapíšte obsah do súboru .htaccess
fs.writeFileSync(distPath, htaccessContent, 'utf8');
console.log('.htaccess bol úspešne vygenerovaný do dist/');

17
webapp/src/App.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div id="header">
<div>
<router-link to="/">
<img src="public/bugreport.svg" height="48" width="48" />
&nbsp;&nbsp;&nbsp;
<h1>Bug Report</h1>
</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="/about">O aplikácii</router-link>
</div>
</div>
<router-view></router-view>
</template>

View File

@ -0,0 +1,202 @@
/*
TPsoft.org 2000-2025
Cascade Style Document
posledna editacia:
2025-04-13 00:09 Igor
01 - GENERAL
02 - HEADER
03 - DASHBOARD
99 - LIGHT MODE
*/
/* ----------------------------------------------------
01 - GENERAL
*/
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--color-bg: #242424;
--color-bg0: #0D5EAF;
--color-bg1: #449ef8;
--color-bg2: #449ef820;
--color-text0: #fff;
--color-text1: rgb(11, 11, 104);
/* color-scheme: light dark; */
color: var(--color-text0);
background-color: var(--color-bg);
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
flex-direction: column;
/* place-items: center; */
min-width: 320px;
min-height: 100vh;
font-size: 14px;
}
h1 {
font-size: 24px;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
/* max-width: 1280px; */
/* margin: 0 auto; */
/* padding: 10px; */
/* text-align: center; */
}
/* ----------------------------------------------------
02 - HEADER
*/
#header {
background-color: var(--color-bg0);
color: var(--color-text0);
padding: 20px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: end;
}
#header a,
#header a:visited {
color: var(--color-text0);
}
#header .menu a,
#header .menu a:visited {
border: 1px solid var(--color-text0);
padding: 5px 10px;
border-radius: 5px;
margin-left: 20px;
}
#header .menu a:hover {
color: var(--color-text1);
background-color: var(--color-bg1);
}
#header h1 {
display: inline-block;
}
/* ----------------------------------------------------
03 - DASHBOARD
*/
#dashboard {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
/* border: 1px red solid; */
min-height: calc(100vh - 150px);
}
#dashboard > div {
width: 25%;
}
#dashboard > div:not(:first-child) {
border-left: 5px var(--color-bg0) dotted;
}
#dashboard > div h2 {
background-color: var(--color-bg1);
margin: 0px;
padding: 5px;
text-align: center;
}
#dashboard .report {
margin: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
border-left: 5px var(--color-bg1) solid;
border-radius: 5px;
}
#dashboard .report .report-header {
background-color: var(--color-bg0);
display: flex;
flex-direction: row;
justify-content: space-between;
border-top-right-radius: 5px;
}
#dashboard .report .report-header .report-title {
}
#dashboard .report .report-header h3 {
margin: 0px;
padding: 5px 10px;
}
#dashboard .report .report-description {
padding: 10px;
text-align: justify;
border-right: 5px var(--color-bg0) solid;
background-color: var(--color-bg2);
}
#dashboard .report .report-date {
background-color: var(--color-bg1);
text-align: right;
padding: 5px;
border-bottom-right-radius: 5px;
}
/* ----------------------------------------------------
99 - LIGHT MODE
*/
/* @media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
} */

View File

@ -0,0 +1,43 @@
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

View File

@ -0,0 +1,23 @@
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
</div>
</template>
<style scoped>
</style>

View File

@ -0,0 +1,22 @@
<script setup>
defineProps({
title: String,
description: String,
date: String
})
</script>
<template>
<div class="report">
<div class="report-header">
<div class="report-title">
<h3>{{ title }}</h3>
</div>
</div>
<div class="report-description">
<p>
{{ description }}
</p>
</div>
<div class="report-date">{{ date }}</div>
</div>
</template>

9
webapp/src/main.js Normal file
View File

@ -0,0 +1,9 @@
import { createApp } from 'vue'
import './assets/css/style.css'
import App from './App.vue'
import { router } from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')

18
webapp/src/router.js Normal file
View File

@ -0,0 +1,18 @@
import { createRouter, createWebHistory } from "vue-router";
import Dashboard from "./views/Dashboard.vue";
import About from "./views/About.vue";
import BugAdd from "./views/BugAdd.vue";
import Archive from "./views/Archive.vue";
const routes = [
{ path: "/", component: Dashboard },
{ path: "/about", component: About },
{ path: "/add", component: BugAdd },
{ path: "/archive", component: Archive },
];
export const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
});

View File

@ -0,0 +1,6 @@
<template>
<div>
<h1>O aplikácii</h1>
<router-link to="/">Späť domov</router-link>
</div>
</template>

View File

@ -0,0 +1,6 @@
<template>
<div>
<h1>Archív</h1>
<router-link to="/">Späť domov</router-link>
</div>
</template>

View File

@ -0,0 +1,6 @@
<template>
<div>
<h1>Pridať bug</h1>
<router-link to="/">Prejsť na Dashboard</router-link>
</div>
</template>

View File

@ -0,0 +1,41 @@
<template>
<div id="dashboard">
<div id="inbox">
<h2>Nezaradené</h2>
<Report title="Pridať bug" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
<Report title="Resetovat pismo" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
</div>
<div id="waiting">
<h2>Čakajúce</h2>
<Report title="Vymena obrazkov za ikonky" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
<Report title="Doplnit serverove ikoky a toto bude dlhy nadpis, ze ako sa s tym vysporiada" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
<Report title="Rozdelit na 2 polozky na fakture" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa eros, porta id, vestibulum sit amet, malesuada in, sapien. Donec nec justo eget felis facilisis fermentum." date="2025-04-13 01:30:18" />
</div>
<div id="inprogress">
<h2>Rozpracované</h2>
</div>
<div id="done">
<h2>Hotové</h2>
</div>
</div>
</template>
<script>
import Report from '../components/Report.vue';
export default {
components: {
Report
}
}
</script>

10
webapp/vite.config.js Normal file
View File

@ -0,0 +1,10 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export const baseUrl = '/bugreport/webapp/dist/';
// https://vite.dev/config/
export default defineConfig({
base: baseUrl,
plugins: [vue()],
});