pridany modul Backend pre komuniaciu s API,
pridany template pre Bug Add, implementovana funkcionalita pre Bug Add, doplnene BUILD a DEV premenne
This commit is contained in:
parent
a144663070
commit
93126ecd47
@ -8,8 +8,11 @@
|
||||
01 - GENERAL
|
||||
02 - HEADER
|
||||
03 - DASHBOARD
|
||||
04 - BUG ADD
|
||||
05 - ARCHIVE
|
||||
06 - API
|
||||
07 - ABOUT
|
||||
80 - FORM
|
||||
99 - LIGHT MODE
|
||||
|
||||
*/
|
||||
@ -67,7 +70,8 @@ h1 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
button,
|
||||
.button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--color-bg0);
|
||||
padding: 0.6em 1.2em;
|
||||
@ -79,12 +83,15 @@ button {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
button:hover {
|
||||
button:hover,
|
||||
.button:hover {
|
||||
border-color: var(--color-bg1);
|
||||
background-color: var(--color-bg0);
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
.button:focus,
|
||||
button:focus-visible,
|
||||
.button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@ -205,6 +212,26 @@ button:focus-visible {
|
||||
#dashboard:has(.dragging) .draggable-item:not(.dragging) .report {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
04 - BUG ADD
|
||||
*/
|
||||
#bug-add {
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
#bug-add .cols {
|
||||
/* border: 1px red solid; */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
05 - ARCHIVE
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------------------------------
|
||||
06 - API
|
||||
*/
|
||||
@ -238,6 +265,34 @@ button:focus-visible {
|
||||
filter: brightness(1.2);
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
80 - FORM
|
||||
*/
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 99%;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
background-color: var(--color-bg2);
|
||||
color: var(--color-text0);
|
||||
}
|
||||
.form-actions {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
.form-actions button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------
|
||||
99 - LIGHT MODE
|
||||
*/
|
||||
|
||||
76
webapp/src/backend.js
Normal file
76
webapp/src/backend.js
Normal file
@ -0,0 +1,76 @@
|
||||
export const backend = {
|
||||
endpont: __IS_BUILD__
|
||||
? window.location.origin + __SUBPATH__ + "api.php"
|
||||
: "http://localhost/bugreport/api.php",
|
||||
|
||||
/* ----------------------------------------------------
|
||||
* Vsebecne API volanie
|
||||
*/
|
||||
call(method, data, callback) {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.withCredentials = true;
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4) {
|
||||
if (this.status == 200) {
|
||||
if (callback != null) callback(JSON.parse(this.responseText));
|
||||
} else {
|
||||
if (callback != null) callback({'status': 'ERROR', 'message': 'HTTP STATUS ' + this.status});
|
||||
}
|
||||
}
|
||||
}
|
||||
var form_data = new FormData();
|
||||
Object.keys(data).forEach(key => {
|
||||
form_data.append(key, data[key]);
|
||||
});
|
||||
xhttp.open('POST', this.endpont + '?action=' + method);
|
||||
//xhttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
|
||||
xhttp.send(form_data);
|
||||
},
|
||||
|
||||
callPromise(method, data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.call(method, data, function(response) {
|
||||
if (response.status == 'OK') {
|
||||
resolve(response.data);
|
||||
} else {
|
||||
reject(response.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
/* ----------------------------------------------------
|
||||
* API akcie
|
||||
*/
|
||||
add(title, description, status, group, priority) {
|
||||
return this.callPromise('add', {
|
||||
title: title,
|
||||
description: description,
|
||||
status: status,
|
||||
group: group,
|
||||
priority: priority});
|
||||
},
|
||||
|
||||
update(id, title, description, status, group, priority) {
|
||||
return this.callPromise('update', {
|
||||
id: id,
|
||||
title: title,
|
||||
description: description,
|
||||
status: status,
|
||||
group: group,
|
||||
priority: priority});
|
||||
},
|
||||
|
||||
delete(id) {
|
||||
return this.callPromise('delete', {id: id});
|
||||
},
|
||||
|
||||
get(id) {
|
||||
return this.callPromise('get', {id: id});
|
||||
},
|
||||
|
||||
getAll() {
|
||||
return this.callPromise('getall', {});
|
||||
},
|
||||
|
||||
};
|
||||
@ -1,6 +1,193 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Pridať bug</h1>
|
||||
<router-link to="/">Prejsť na Dashboard</router-link>
|
||||
<div id="bug-add">
|
||||
<h1>Pridať nový bug</h1>
|
||||
|
||||
<form @submit.prevent="submitForm" class="form">
|
||||
<div class="form-group">
|
||||
<label for="title">Názov:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
v-model="bugReport.title"
|
||||
required
|
||||
class="form-control"
|
||||
placeholder="Zadajte názov bug reportu"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="description">Popis:</label>
|
||||
<textarea
|
||||
id="description"
|
||||
v-model="bugReport.description"
|
||||
rows="5"
|
||||
class="form-control"
|
||||
placeholder="Detailný popis problému"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="cols">
|
||||
<div class="form-group">
|
||||
<label for="files">Prílohy:</label>
|
||||
<input
|
||||
type="file"
|
||||
id="files"
|
||||
@change="handleFileUpload"
|
||||
multiple
|
||||
class="form-control file-input"
|
||||
/>
|
||||
<div class="selected-files" v-if="selectedFiles.length > 0">
|
||||
<p>Vybrané súbory:</p>
|
||||
|
||||
<p v-for="(file, index) in selectedFiles" :key="index">
|
||||
<button
|
||||
type="button"
|
||||
class="remove-file"
|
||||
@click="removeFile(index)"
|
||||
>
|
||||
<font-awesome-icon :icon="['fas', 'circle-xmark']" /> Odober
|
||||
súbor
|
||||
</button>
|
||||
|
||||
{{ file.name }} ({{ formatFileSize(file.size) }})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="priority">Priorita:</label>
|
||||
<select
|
||||
id="priority"
|
||||
v-model="bugReport.priority"
|
||||
class="form-control"
|
||||
required
|
||||
>
|
||||
<option value="" disabled>Vyberte prioritu</option>
|
||||
<option value="0">Nízka</option>
|
||||
<option value="1">Stredná</option>
|
||||
<option value="2">Vysoká</option>
|
||||
<option value="3">Kritická</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="group">Skupina:</label>
|
||||
<select
|
||||
id="group"
|
||||
v-model="bugReport.group"
|
||||
class="form-control"
|
||||
required
|
||||
>
|
||||
<option value="" disabled>Vyberte skupinu</option>
|
||||
<option value="cp">Control Panel</option>
|
||||
<option value="task">Task.Platon.sk</option>
|
||||
<option value="websiteip">WebsiteIP</option>
|
||||
<option value="antispam">Antispam</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<router-link to="/" class="button"
|
||||
><font-awesome-icon :icon="['fas', 'circle-arrow-left']" />
|
||||
Zrušiť</router-link
|
||||
>
|
||||
<button type="submit">
|
||||
<font-awesome-icon :icon="['fas', 'circle-check']" /> Odoslať
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { backend } from "../backend";
|
||||
|
||||
export default {
|
||||
name: "BugAdd",
|
||||
data() {
|
||||
return {
|
||||
bugReport: {
|
||||
title: "",
|
||||
description: "",
|
||||
priority: "1",
|
||||
group: "cp",
|
||||
files: [],
|
||||
},
|
||||
selectedFiles: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleFileUpload(event) {
|
||||
const files = event.target.files;
|
||||
if (files) {
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
this.selectedFiles.push(files[i]);
|
||||
}
|
||||
}
|
||||
},
|
||||
removeFile(index) {
|
||||
this.selectedFiles.splice(index, 1);
|
||||
},
|
||||
formatFileSize(size) {
|
||||
if (size < 1024) {
|
||||
return size + " B";
|
||||
} else if (size < 1024 * 1024) {
|
||||
return (size / 1024).toFixed(2) + " KB";
|
||||
} else {
|
||||
return (size / (1024 * 1024)).toFixed(2) + " MB";
|
||||
}
|
||||
},
|
||||
submitForm() {
|
||||
// Vytvorenie FormData objektu pre odoslanie súborov
|
||||
const formData = new FormData();
|
||||
formData.append("title", this.bugReport.title);
|
||||
formData.append("description", this.bugReport.description);
|
||||
formData.append("priority", this.bugReport.priority);
|
||||
|
||||
// Pridanie súborov do FormData
|
||||
this.selectedFiles.forEach((file, index) => {
|
||||
formData.append(`file${index}`, file);
|
||||
});
|
||||
|
||||
// Tu by nasledovalo odoslanie dát na server
|
||||
console.log("Odosielam bug report:", {
|
||||
title: this.bugReport.title,
|
||||
description: this.bugReport.description,
|
||||
priority: this.bugReport.priority,
|
||||
files: this.selectedFiles.map((f) => f.name),
|
||||
});
|
||||
backend
|
||||
.add(
|
||||
this.bugReport.title,
|
||||
this.bugReport.description,
|
||||
"0",
|
||||
this.bugReport.group,
|
||||
this.bugReport.priority
|
||||
)
|
||||
.then((result) => {
|
||||
console.log(result);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
// this.resetForm();
|
||||
// this.$router.push("/");
|
||||
},
|
||||
resetForm() {
|
||||
this.bugReport = {
|
||||
title: "",
|
||||
description: "",
|
||||
priority: "",
|
||||
files: [],
|
||||
};
|
||||
this.selectedFiles = [];
|
||||
// Resetovanie file input
|
||||
const fileInput = document.getElementById("files");
|
||||
if (fileInput) fileInput.value = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -21,6 +21,8 @@ export default defineConfig(({ command, mode }) => {
|
||||
__APP_VERSION__: JSON.stringify(pkg.version),
|
||||
__BUILD_DATE__: JSON.stringify(new Date().toISOString()),
|
||||
__SUBPATH__: JSON.stringify(isBuild ? subpath : "/"),
|
||||
__IS_BUILD__: JSON.stringify(isBuild),
|
||||
__IS_DEV__: JSON.stringify(isDev),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user