Compare commits
3 Commits
potInstanc
...
authentica
| Author | SHA1 | Date | |
|---|---|---|---|
| 6d6b36bdd9 | |||
| 7c19ee9215 | |||
| 601449d7e0 |
14
app.vue
14
app.vue
@ -7,9 +7,21 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
//import { createPinia } from "pinia";
|
||||
//import piniaPluginPersistedState from "pinia-plugin-persistedstate"
|
||||
|
||||
//const layout = "empty";
|
||||
|
||||
//const layout = "empty";
|
||||
//const route = useRoute();
|
||||
//const pinia = createPinia();
|
||||
//pinia.use(piniaPluginPersistedState);
|
||||
|
||||
|
||||
useHead({
|
||||
//title: `Tüit ERP - ${route.meta.title}`,
|
||||
title: `Tüit ERP`,
|
||||
link: [{ rel: "icon", type: "image/png", href: "/favicon-gelb-rot-32x32.png" }]
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@ -1,14 +1,30 @@
|
||||
import axios from 'axios';
|
||||
import axios, {AxiosError} from 'axios';
|
||||
import clientsideConfig from './clientsideConfig'
|
||||
|
||||
//create axios instance
|
||||
const Axios = axios.create({
|
||||
// baseURL: `https://${serversideConfig.url}:${serversideConfig.port}`,
|
||||
//baseURL: `https://${serversideConfig.url}:${serversideConfig.port}/`,
|
||||
baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||
headers: {
|
||||
// 'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
//Authorization: `Bearer`,
|
||||
Accept: "*",
|
||||
},
|
||||
withCredentials: true,
|
||||
credentials: true,
|
||||
})
|
||||
|
||||
|
||||
Axios.interceptors.response.use((response) => response, (error) => {
|
||||
|
||||
if (error instanceof AxiosError) {
|
||||
console.error('Status: ', error.response?.status, '\nHeaders: '. error.response?.headers, '\nMessage: '. error.response?.data.message)
|
||||
} else { console.error('Error: ', error); };
|
||||
|
||||
if (error.response?.status === 403) { window.location.href = '/login'; };
|
||||
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
export default Axios;
|
||||
|
||||
@ -93,7 +93,15 @@ export const login = async (req, res, next) => {
|
||||
}
|
||||
if (bResult) {
|
||||
// password match
|
||||
const token = jwt.sign(
|
||||
const authtoken = jwt.sign(
|
||||
{
|
||||
username: result[0].username,
|
||||
userId: result[0].id,
|
||||
},
|
||||
'SECRETTUEITKEY',
|
||||
{ expiresIn: '300s' } // 5min
|
||||
);
|
||||
const refreshtoken = jwt.sign(
|
||||
{
|
||||
username: result[0].username,
|
||||
userId: result[0].id,
|
||||
@ -115,7 +123,7 @@ export const login = async (req, res, next) => {
|
||||
const results = await ownConn.query(sql1, [dateTimeString, result[0].id]);
|
||||
return res.status(200).send({
|
||||
message: 'Logged in!',
|
||||
token,
|
||||
token: { authToken: authtoken, refreshToken: refreshtoken },
|
||||
user: result[0],
|
||||
});
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@ import ownConn from "../dbConfig.js";
|
||||
export const insertChecklistSolutionTodo = async (data, result) => {
|
||||
try {
|
||||
const results = await ownConn.query(`INSERT INTO checklistsolutions(solutionID, step, asset, task, comments) VALUES(?, ?, ?, ?, ?)`, [data.solutionID, data.step, data.asset, data.task, data.comments]);
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -48,7 +47,6 @@ export const updateChecklistSolutionTodoById = async (data, result) => {
|
||||
const id = data.primaryID;
|
||||
let sql = `UPDATE checklistsolutions SET step = ?, asset = ?, task = ?, comments = ? WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comments, id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -63,7 +61,6 @@ export const deleteAllChecklistSolutionTodosSolutionID = async (id, result) => {
|
||||
try {
|
||||
let sql = `DELETE FROM checklistsolutions WHERE solutionID = ?`;
|
||||
const results = await ownConn.query(sql, [id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -78,7 +75,6 @@ export const deleteChecklistSolutionTodo = async (id, result) => {
|
||||
try {
|
||||
let sql = `DELETE FROM checklistsolutions WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
|
||||
@ -89,7 +89,7 @@ export const insertConfigItem = async (data, result) => {
|
||||
//get all selected config items by customer
|
||||
export const getSelectedConfigItemsByCustomer = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM changedb WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
|
||||
let sql = `SELECT * FROM changedb WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -103,7 +103,7 @@ export const getSelectedConfigItemsByCustomer = async (selected, result) => {
|
||||
//get all selected config items by asset name
|
||||
export const getSelectedConfigItemsByAssetName = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM changedb WHERE LOWER(assetName) LIKE '%${selected.toLowerCase()}%' ORDER BY assetName ASC`;
|
||||
let sql = `SELECT * FROM changedb WHERE assetName LIKE '%${selected}%' ORDER BY assetName ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ export const getCustomers = async (result) => {
|
||||
//get all selected customers
|
||||
export const getSelectedCustomers = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM customers WHERE LOWER(customername) LIKE '%${selected.toLowerCase()}%' ORDER BY customername ASC`;
|
||||
let sql = `SELECT * FROM customers WHERE customername LIKE '%${selected}%' ORDER BY customername ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
|
||||
@ -31,7 +31,7 @@ export const getSelectedIssueSlipsByTicketnumber = async (selected, result) => {
|
||||
//get all selected issue slips by customer
|
||||
export const getSelectedIssueSlipsByCustomer = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM issueslips WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
|
||||
let sql = `SELECT * FROM issueslips WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
|
||||
@ -45,7 +45,7 @@ export const getSelectedIssueVariantsByIssueId = async (selected, result) => {
|
||||
//get all selected issue variants by name
|
||||
export const getSelectedIssueVariantsByName = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM issuevariants WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
|
||||
let sql = `SELECT * FROM issuevariants WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ export const getMaintenanceVisits = async (result) => {
|
||||
//get all selected maintenance visits by checklistname
|
||||
export const getSelectedMaintenanceVisitsByChecklistname = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM maintenancevisits WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
|
||||
let sql = `SELECT * FROM maintenancevisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -31,7 +31,7 @@ export const getSelectedMaintenanceVisitsByChecklistname = async (selected, resu
|
||||
//get all selected maintenance visits by customer
|
||||
export const getSelectedMaintenanceVisitsByCustomer = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM maintenancevisits WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
|
||||
let sql = `SELECT * FROM maintenancevisits WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -59,7 +59,7 @@ export const getSelectedMaintenanceVisitsByDate = async (selected, result) => {
|
||||
//get all selected maintenance visits by state
|
||||
export const getSelectedMaintenanceVisitsByState = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM maintenancevisits WHERE LOWER(state) LIKE '%${selected.toLowerCase()}%' ORDER BY state ASC`;
|
||||
let sql = `SELECT * FROM maintenancevisits WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -88,7 +88,6 @@ export const deleteMaintenanceVisitById = async (id, result) => {
|
||||
export const insertMaintenanceVisit = async (data, result) => {
|
||||
try {
|
||||
const results = await ownConn.query(`INSERT INTO maintenancevisits(name, templateID, maintenanceType, state, creationDate, completionDate, user, customer, customerID, templateNotes, type, timeSpent, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.name, data.templateID, data.maintenanceType, data.state, data.creationDate, data.completionDate, data.user, data.customer, data.customerID, data.templateNotes, data.type, data.timeSpent, data.notes])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -101,7 +100,7 @@ export const insertMaintenanceVisit = async (data, result) => {
|
||||
//get single maintenance visit by name
|
||||
export const getMaintenanceVisitByName = async (id, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM maintenancevisits WHERE name = ?`;
|
||||
let sql = `SELECT * FROM maintenancevisits WHERE name = ?`;
|
||||
const results = await ownConn.execute(sql, [id])
|
||||
result(null, results[0]);
|
||||
}
|
||||
@ -115,7 +114,7 @@ export const getMaintenanceVisitByName = async (id, result) => {
|
||||
//get single maintenance visit by id
|
||||
export const getMaintenanceVisitById = async (id, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM maintenancevisits WHERE primaryID = ?`;
|
||||
let sql = `SELECT * FROM maintenancevisits WHERE primaryID = ?`;
|
||||
const results = await ownConn.execute(sql, [id])
|
||||
result(null, results[0]);
|
||||
}
|
||||
@ -132,7 +131,6 @@ export const updateMaintenanceVisitStateById = async (data, result) => {
|
||||
const id = data.primaryID;
|
||||
let sql = `UPDATE maintenancevisits SET state = ? WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [data.state, id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
|
||||
@ -4,7 +4,6 @@ import ownConn from "../dbConfig.js";
|
||||
export const insertMaintenanceVisitTodo = async (data, result) => {
|
||||
try {
|
||||
const results = await ownConn.query(`INSERT INTO maintenancevisittodos(templateID, step, asset, task, comment, done) VALUES(?, ?, ?, ?, ?, ?)`, [data.templateID, data.step, data.asset, data.task, data.comment, data.done])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -48,7 +47,6 @@ export const updateMaintenanceVisitTodoById = async (data, result) => {
|
||||
const id = data.primaryID;
|
||||
let sql = `UPDATE maintenancevisittodos SET step = ?, asset = ?, task = ?, comment = ?, done = ? WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [data.step, data.asset, data.task, data.comment, id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
|
||||
@ -18,9 +18,8 @@ export const getMasterMaintenanceVisitTodoById = async (id, result) => {
|
||||
export const updateMasterMaintenanceVisitTodoById = async (data, result) => {
|
||||
try {
|
||||
const id = data.primaryID;
|
||||
let sql = `UPDATE mastermaintenancetodos SET templateID = ?, asset = ? , task = ?, commets = ? WHERE primaryID = ?`;
|
||||
let sql = `UPDATE mastermaintenancetodos SET templateID = ?, asset = ? , task = ?, comments = ? WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comments, id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -36,7 +35,6 @@ export const deleteMasterMaintenanceVisitTodoById = async (id, result) => {
|
||||
try {
|
||||
let sql = `DELETE FROM mastermaintenancetodos WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -51,7 +49,6 @@ export const deleteMasterMaintenanceVisitTodoByTemplateId = async (id, result) =
|
||||
try {
|
||||
let sql = `DELETE FROM mastermaintenancetodos WHERE templateID = ?`;
|
||||
const results = await ownConn.query(sql, [id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -82,8 +79,7 @@ export const updateMasterMaintenanceVisitTodos = async (data, result) => {
|
||||
//insert master maintenance visit todo to databased
|
||||
export const insertMasterMaintenanceVisitTodo = async (data, result) => {
|
||||
try {
|
||||
const results = await ownConn.query(`INSERT INTO mastermaintenancetodos(templateID, rowID, asset, task, commets) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
|
||||
results.insertId = results.insertId.toString();
|
||||
const results = await ownConn.query(`INSERT INTO mastermaintenancetodos(templateID, rowID, asset, task, comments) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, asset.comments])
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
|
||||
@ -17,7 +17,7 @@ export const getMasterMaintenanceVisits = async (result) => {
|
||||
//get all selected master maintenance visits by customer
|
||||
export const getSelectedMasterMaintenanceVisitsByCustomer = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM mastermaintenancevisits WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
|
||||
let sql = `SELECT * FROM mastermaintenancevisits WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -31,7 +31,7 @@ export const getSelectedMasterMaintenanceVisitsByCustomer = async (selected, res
|
||||
//get all selected master maintenance visits by checklistname
|
||||
export const getSelectedMasterMaintenanceVisitsByChecklistname = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM mastermaintenancevisits WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
|
||||
let sql = `SELECT * FROM mastermaintenancevisits WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -62,7 +62,6 @@ export const updateMasterMaintenanceVisitById = async (data, result) => {
|
||||
const id = data.checklistID;
|
||||
let sql = `UPDATE mastermaintenancevisits SET name = ?, customerID = ? , customer = ?, type = ?, lastView = ?, user = ?, notes = ? WHERE checklistID = ?`;
|
||||
const results = await ownConn.query(sql, [data.name, data.customerID, data.customer, data.type, data.lastView, data.user, data.notes, id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -76,7 +75,6 @@ export const updateMasterMaintenanceVisitById = async (data, result) => {
|
||||
export const insertMasterMaintenanceVisit = async (data, result) => {
|
||||
try {
|
||||
const results = await ownConn.query(`INSERT INTO mastermaintenancevisits(name, customerID, customer, type, lastView, user, notes) VALUES(?, ?, ?, ?, ?, ?, ?)`, [data.name, data.customerID, data.customer, data.type, data.lastView, data.user, data.notes])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -91,7 +89,6 @@ export const deleteMasterMaintenanceVisitById = async (id, result) => {
|
||||
try {
|
||||
let sql = `DELETE FROM mastermaintenancevisits WHERE checklistID = ?`;
|
||||
const results = await ownConn.query(sql, [id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
|
||||
@ -18,9 +18,8 @@ export const getMasterProductionOrderTodoById = async (id, result) => {
|
||||
export const updateMasterProductionOrderTodoById = async (data, result) => {
|
||||
try {
|
||||
const id = data.primaryID;
|
||||
let sql = `UPDATE masterordertodos SET templateID = ?, asset = ? , task = ?, comments = ? WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comments, id])
|
||||
results.insertId = results.insertId.toString();
|
||||
let sql = `UPDATE masterordertodos SET templateID = ?, asset = ? , task = ?, comment = ? WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [data.templateID, data.asset, data.task, data.comment, id])
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -36,7 +35,6 @@ export const deleteMasterProductionOrderTodoById = async (id, result) => {
|
||||
try {
|
||||
let sql = `DELETE FROM masterordertodos WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -51,7 +49,6 @@ export const deleteMasterProductionOrderTodoByTemplateId = async (id, result) =>
|
||||
try {
|
||||
let sql = `DELETE FROM masterordertodos WHERE templateID = ?`;
|
||||
const results = await ownConn.query(sql, [id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -82,8 +79,7 @@ export const updateMasterProductionOrderTodos = async (data, result) => {
|
||||
//insert master production order todo to databased
|
||||
export const insertMasterProductionOrderTodo = async (data, result) => {
|
||||
try {
|
||||
const results = await ownConn.query(`INSERT INTO masterordertodos(templateID, rowID, asset, task, comments) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
|
||||
results.insertId = results.insertId.toString();
|
||||
const results = await ownConn.query(`INSERT INTO masterordertodos(templateID, rowID, asset, task, comment) VALUES(?, ?, ?, ?, ?)`, [data.templateID, data.rowID, data.asset, data.task, data.comment])
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
|
||||
@ -17,7 +17,7 @@ export const getMasterProductionOrders = async (result) => {
|
||||
//get all selected master production orders by customer
|
||||
export const getSelectedMasterProductionOrdersByCustomer = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM masterproductionorders WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
|
||||
let sql = `SELECT * FROM masterproductionorders WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -31,7 +31,7 @@ export const getSelectedMasterProductionOrdersByCustomer = async (selected, resu
|
||||
//get all selected master production orders by checklistname
|
||||
export const getSelectedMasterProductionOrdersByChecklistname = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM masterproductionorders WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
|
||||
let sql = `SELECT * FROM masterproductionorders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -62,7 +62,6 @@ export const updateMasterProductionOrderById = async (data, result) => {
|
||||
const id = data.templateID;
|
||||
let sql = `UPDATE masterproductionorders SET name = ?, customerID = ? , customer = ?, lastView = ?, user = ?, description = ?, notes = ? WHERE templateID = ?`;
|
||||
const results = await ownConn.query(sql, [data.name, data.customerID, data.customer, data.lastView, data.user, data.description, data.notes, id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -76,7 +75,6 @@ export const updateMasterProductionOrderById = async (data, result) => {
|
||||
export const insertMasterProductionOrder = async (data, result) => {
|
||||
try {
|
||||
const results = await ownConn.query(`INSERT INTO masterproductionorders(name, customerID, customer, lastView, user, description, notes) VALUES(?, ?, ?, ?, ?, ?, ?)`, [data.name, data.customerID, data.customer, data.lastView, data.user, data.description, data.notes])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -91,7 +89,6 @@ export const deleteMasterProductionOrderById = async (id, result) => {
|
||||
try {
|
||||
let sql = `DELETE FROM masterproductionorders WHERE templateID = ?`;
|
||||
const results = await ownConn.query(sql, [id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
|
||||
@ -31,7 +31,7 @@ export const getSelectedProductionOrdersByTicketnumber = async (selected, result
|
||||
//get all selected production orders by customer
|
||||
export const getSelectedProductionOrdersByCustomer = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM productionorders WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
|
||||
let sql = `SELECT * FROM productionorders WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -45,7 +45,7 @@ export const getSelectedProductionOrdersByCustomer = async (selected, result) =>
|
||||
//get all selected production orders by state
|
||||
export const getSelectedProductionOrdersByState = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM productionorders WHERE LOWER(state) LIKE '%${selected.toLowerCase()}%' ORDER BY state ASC`;
|
||||
let sql = `SELECT * FROM productionorders WHERE state LIKE '%${selected}%' ORDER BY state ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -59,7 +59,7 @@ export const getSelectedProductionOrdersByState = async (selected, result) => {
|
||||
//get all selected production orders by checklistname
|
||||
export const getSelectedProductionOrdersByChecklistname = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM productionorders WHERE LOWER(name) LIKE '%${selected.toLowerCase()}%' ORDER BY name ASC`;
|
||||
let sql = `SELECT * FROM productionorders WHERE name LIKE '%${selected}%' ORDER BY name ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -102,7 +102,6 @@ export const deleteProductionOrderById = async (id, result) => {
|
||||
export const insertProductionOrder = async (data, result) => {
|
||||
try {
|
||||
const results = await ownConn.query(`INSERT INTO productionorders(name, templateID, customer, customerID, asset, state, creationDate, completionDate, user, templateDescription, templateNotes, timeSpent, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.name, data.templateID, data.customer, data.customerID, data.asset, data.state, data.creationDate, data.completionDate, data.user, data.templateDescription, data.templateNotes, data.timeSpent, data.notes])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -115,7 +114,7 @@ export const insertProductionOrder = async (data, result) => {
|
||||
//get single production order by name
|
||||
export const getProductionOrderByName = async (id, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM productionorders WHERE name = ?`;
|
||||
let sql = `SELECT * FROM productionorders WHERE name = ?`;
|
||||
const results = await ownConn.execute(sql, [id])
|
||||
result(null, results[0]);
|
||||
}
|
||||
@ -129,7 +128,7 @@ export const getProductionOrderByName = async (id, result) => {
|
||||
//get single production order by id
|
||||
export const getProductionOrderById = async (id, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM productionorders WHERE ticketNumber = ?`;
|
||||
let sql = `SELECT * FROM productionorders WHERE ticketNumber = ?`;
|
||||
const results = await ownConn.execute(sql, [id])
|
||||
result(null, results[0]);
|
||||
}
|
||||
@ -146,7 +145,6 @@ export const updateProductionOrderStateById = async (data, result) => {
|
||||
try {
|
||||
let sql = `UPDATE productionorders SET state = ? WHERE ticketNumber = ?`;
|
||||
const results = await ownConn.query(sql, [data.state, id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
|
||||
@ -46,7 +46,6 @@ export const getSolutionByName = async (id, result) => {
|
||||
export const insertSolution = async (data, result) => {
|
||||
try {
|
||||
const results = await ownConn.query(`INSERT INTO solutions(solutionName, assetName, customer, customerID, type, lastView, user, description, notes) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?)`, [data.solutionName, data.assetName, data.customer, data.customerID, data.type, data.lastView, data.user, data.description, data.notes])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -62,7 +61,6 @@ export const updateSolutionById = async (data, result) => {
|
||||
const id = data.primaryID;
|
||||
let sql = `UPDATE solutions SET solutionName = ?, assetName = ?, customer = ?, customerID = ?, type = ?, lastView = ?, user = ?, description = ?, notes = ? WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [data.solutionName, data.assetName, data.customer, data.customerID, data.type, data.lastView, data.user, data.description, data.notes, id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
@ -75,7 +73,7 @@ export const updateSolutionById = async (data, result) => {
|
||||
//get all selected solutions by customer
|
||||
export const getSelectedSolutionsByCustomer = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM solutions WHERE LOWER(customer) LIKE '%${selected.toLowerCase()}%' ORDER BY customer ASC`;
|
||||
let sql = `SELECT * FROM solutions WHERE customer LIKE '%${selected}%' ORDER BY customer ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -88,7 +86,7 @@ export const getSelectedSolutionsByCustomer = async (selected, result) => {
|
||||
|
||||
//get all selected solutions by solution name
|
||||
export const getSelectedSolutionsBySolutionName = async (selected, result) => {
|
||||
let sql = `SELECT * FROM solutions WHERE LOWER(solutionName) LIKE '%${selected.toLowerCase()}%' ORDER BY solutionName ASC`;
|
||||
let sql = `SELECT * FROM solutions WHERE solutionName LIKE '%${selected}%' ORDER BY solutionName ASC`;
|
||||
try {
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
@ -103,7 +101,7 @@ export const getSelectedSolutionsBySolutionName = async (selected, result) => {
|
||||
//get all selected solutions by asset name
|
||||
export const getSelectedSolutionsByAssetName = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM solutions WHERE LOWER(assetName) LIKE '%${selected.toLowerCase()}%' ORDER BY assetName ASC`;
|
||||
let sql = `SELECT * FROM solutions WHERE assetName LIKE '%${selected}%' ORDER BY assetName ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -117,7 +115,7 @@ export const getSelectedSolutionsByAssetName = async (selected, result) => {
|
||||
//get all selected solutions by type
|
||||
export const getSelectedSolutionsByType = async (selected, result) => {
|
||||
try {
|
||||
let sql = `SELECT * FROM solutions WHERE LOWER(type) LIKE '%${selected.toLowerCase()}%' ORDER BY solutionName ASC`;
|
||||
let sql = `SELECT * FROM solutions WHERE type LIKE '%${selected}%' ORDER BY solutionName ASC`;
|
||||
const results = await ownConn.execute(sql)
|
||||
result(null, results);
|
||||
}
|
||||
@ -133,7 +131,6 @@ export const deleteSolutionById = async (id, result) => {
|
||||
try {
|
||||
let sql = `DELETE FROM solutions WHERE primaryID = ?`;
|
||||
const results = await ownConn.query(sql, [id])
|
||||
results.insertId = results.insertId.toString();
|
||||
result(null, results);
|
||||
}
|
||||
catch (err) {
|
||||
|
||||
@ -219,8 +219,8 @@ router.put("/masterMaintenanceVisitTodos", updateMasterMaintenanceVisitTodo);
|
||||
// Delete master maintenance visit todo
|
||||
router.delete("/masterMaintenanceVisitTodos/:id", deleteMasterMaintenanceVisitTodo);
|
||||
|
||||
// Delete master maintenance visit todo by template id
|
||||
router.delete("/masterMaintenanceVisitTodosByTemplateid/:id", deleteMasterMaintenanceVisitTodoByTemplateIds);
|
||||
// Delete master maintenance visit todo by customer id
|
||||
router.delete("/masterMaintenanceVisitTodosByCustomerid/:id", deleteMasterMaintenanceVisitTodoByTemplateIds);
|
||||
|
||||
// Update all master maintenance visit todos
|
||||
router.put("/allMasterMaintenanceVisitTodos", updateAllMasterMaintenanceVisitTodos)
|
||||
@ -264,8 +264,8 @@ router.put("/masterProductionOrderTodos", updateMasterProductionOrderTodo);
|
||||
// Delete master production order todo
|
||||
router.delete("/masterProductionOrderTodos/:id", deleteMasterProductionOrderTodo);
|
||||
|
||||
// Delete master production order todo by template id
|
||||
router.delete("/masterProductionOrderTodosByTemplateid/:id", deleteMasterProductionOrderTodoByTemplateIds);
|
||||
// Delete master production order todo by customer id
|
||||
router.delete("/masterProductionOrderTodosByCustomerid/:id", deleteMasterProductionOrderTodoByTemplateIds);
|
||||
|
||||
// Update all master production order todos
|
||||
router.put("/allMasterProductionOrderTodos", updateAllProductionOrderTodos)
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<section :class="['client-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customer</div>
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Client</div>
|
||||
<pre v-if="!filtered" :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ clientFilter }}</pre>
|
||||
<input v-if="filtered" v-model="clientFilter" @change="filterConfigItemList()"
|
||||
:class="['data', 'input-customer', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -13,9 +13,9 @@ import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const filtered = computed(() => store.state.filtered);
|
||||
const filteredTerm = computed(() => store.state.filteredByClient);
|
||||
const clientFilter = ref(store.state.filteredByClient);
|
||||
const filtered = computed(() => store.state.assetFiltered);
|
||||
const filteredTerm = computed(() => store.state.filteredAssetbyClient);
|
||||
const clientFilter = ref(store.state.filteredAssetbyClient);
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -26,7 +26,7 @@ const updateFilterTerm = () => {
|
||||
|
||||
// update the filtered term in the store
|
||||
const filterConfigItemList = () => {
|
||||
store.commit('updateFilterbyClient', clientFilter.value);
|
||||
store.commit('updateAssetFilterbyClient', clientFilter.value);
|
||||
}
|
||||
|
||||
watch(filteredTerm, updateFilterTerm)
|
||||
@ -98,9 +98,8 @@ export default {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.input-customer {
|
||||
.input {
|
||||
border: none;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
<span class="title-icon" id="logo-icon">
|
||||
<img loading="lazy" srcSet="../favicon-gelb-rot-32x32.png" />
|
||||
</span>
|
||||
<pre :class="['title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Login</pre>
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Login</pre>
|
||||
</div>
|
||||
<div class="login-field">
|
||||
<div class="form-field" id="username-field">
|
||||
<label for="username-input" id="username-label">
|
||||
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="username-icon">
|
||||
<img loading="lazy" src="../icons/Mail-Icon.svg" />
|
||||
<img loading="lazy" src="/icons/Mail-Icon.svg" />
|
||||
</span>
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Username:</div>
|
||||
</label>
|
||||
@ -21,14 +21,13 @@
|
||||
<div class="form-field" id="password-field">
|
||||
<label for="password-input" id="password-label">
|
||||
<span :class="['icon', darkMode ? 'icon-darkmode' : 'icon-lightmode']" id="password-icon">
|
||||
<img loading="lazy" src="../icons/Lock-Icon.svg" />
|
||||
<img loading="lazy" src="/icons/Lock-Icon.svg" />
|
||||
</span>
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Password:</div>
|
||||
</label>
|
||||
<div :class="['input-field', darkMode ? 'input-darkmode' : 'input-lightmode']">
|
||||
<input type="text" id="password-input" placeholder="*******">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle"
|
||||
value="Show">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="show-password-toggle" value="Show">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,10 +36,10 @@
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']"> {{ errorMsg }} </div>
|
||||
</label>
|
||||
</div>
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login"
|
||||
@click="handleLogin">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Signup"
|
||||
@click="testFunctionSignup">
|
||||
<div class="buttons">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="login-button" value="Login" @click="handleLogin">
|
||||
<input type="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="signup-button" value="Signup" @click="testFunctionSignup">
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@ -51,6 +50,7 @@ import { ref } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../clientsideConfig.js';
|
||||
|
||||
const { signIn } = useAuth()
|
||||
const router = useRouter();
|
||||
const darkMode = ref(true);
|
||||
const isError = ref(false);
|
||||
@ -63,19 +63,29 @@ const handleLogin = async () => {
|
||||
const username = document.getElementById('username-input').value;
|
||||
const password = document.getElementById('password-input').value;
|
||||
|
||||
const requestBody = {
|
||||
//const requestBody = {
|
||||
const credentials = {
|
||||
username: username,
|
||||
password: password,
|
||||
}
|
||||
|
||||
try {
|
||||
let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
|
||||
/*let res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`, requestBody);
|
||||
|
||||
const sessionToken = useCookie('token', {maxAge: 604800, sameSite: true});
|
||||
sessionToken.value = res.data.token;
|
||||
Axios.defaults.headers.common['Authorization'] = `${username}`;
|
||||
const userToken = useCookie('user', {maxAge: 604800, sameSite: true});
|
||||
userToken.value = username;
|
||||
// something to do with the res?
|
||||
console.log(res.data)
|
||||
console.log(sessionToken)
|
||||
console.log(res.data.message)
|
||||
|
||||
// sucessfully logged in
|
||||
router.push('/')
|
||||
router.push('/home')*/
|
||||
let res = await signIn( credentials, { callbackUrl: '/home' })
|
||||
console.log("res", res)
|
||||
|
||||
} catch (err) {
|
||||
// handle the error
|
||||
console.log(err.response.statusText)
|
||||
@ -162,22 +172,22 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 31.25rem;
|
||||
height: 33rem;
|
||||
min-height: 33rem;
|
||||
height: fit-content;
|
||||
border-radius: 0.625rem;
|
||||
padding: 2.5rem 1.875rem;
|
||||
gap: 1.875rem;
|
||||
}
|
||||
|
||||
.form-darkmode {
|
||||
border: 0.0625rem solid #000;
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.form-lightmode {
|
||||
border: 0.0625rem solid #8e8e8e;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.title-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -192,7 +202,6 @@ export default {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
.title-icon>img {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
@ -203,20 +212,14 @@ export default {
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.05rem;
|
||||
white-space: nowrap;
|
||||
font: 400 1.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.title-darkmode { color: #ffffff; }
|
||||
.title-lightmode { color: #000000; }
|
||||
|
||||
.pre-darkmode,
|
||||
.title-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pre-lightmode,
|
||||
.title-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.login-field {
|
||||
display: flex;
|
||||
@ -227,6 +230,7 @@ export default {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -238,16 +242,6 @@ export default {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.form-field-error-msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 25rem;
|
||||
height: 3rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -265,43 +259,28 @@ label {
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
}
|
||||
|
||||
.icon>img {
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon-darkmode>img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.icon-lightmode>img {
|
||||
filter: invert(0%);
|
||||
}
|
||||
|
||||
#username-icon>img {
|
||||
width: auto;
|
||||
height: 0.9375rem;
|
||||
}
|
||||
|
||||
#password-icon>img {
|
||||
width: 0.9375rem;
|
||||
height: auto;
|
||||
}
|
||||
.icon-darkmode>img { filter: invert(100%); }
|
||||
.icon-lightmode>img { filter: invert(0%); }
|
||||
|
||||
.label {
|
||||
letter-spacing: 2%;
|
||||
letter-spacing: 0.02rem;
|
||||
font: 400 0.9375rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
.label-darkmode { color: #ffffff; }
|
||||
.label-lightmode { color: #000000; }
|
||||
|
||||
.input-field {
|
||||
display: flex;
|
||||
@ -315,14 +294,8 @@ label {
|
||||
padding: 0.1875rem 0.625rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
}
|
||||
|
||||
.input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
.input-darkmode { background-color: #212121; }
|
||||
.input-lightmode { background-color: #EBEBEB; }
|
||||
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
@ -330,40 +303,63 @@ input[type=text] {
|
||||
background-color: #00000000;
|
||||
border: none;
|
||||
color: #8e8e8e;
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.01rem;
|
||||
white-space: nowrap;
|
||||
font: 100 0.75rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
input[type=button] {
|
||||
#show-password-toggle {
|
||||
width: fit-content;
|
||||
height: auto;
|
||||
align-self: flex-end;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background-color: #00000000;
|
||||
background: none;
|
||||
border: none;
|
||||
letter-spacing: 5%;
|
||||
letter-spacing: 0.01rem;
|
||||
white-space: nowrap;
|
||||
font: 300 0.75rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.button-darkmode {
|
||||
color: #fff;
|
||||
|
||||
|
||||
.form-field-error-msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 25rem;
|
||||
height: 3rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.button-lightmode {
|
||||
color: #000;
|
||||
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.625rem 0.625rem 0;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
#login-button {
|
||||
width: 13.75rem;
|
||||
height: 4.375rem;
|
||||
|
||||
input[type=button] {
|
||||
width: 9.375rem;
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
align-self: center;
|
||||
border: none;
|
||||
color: #000;
|
||||
background: linear-gradient(93deg, #ff0f00 3.67%, #ffe608 100%);
|
||||
letter-spacing: 2%;
|
||||
letter-spacing: 0.02rem;
|
||||
white-space: nowrap;
|
||||
font: 600 1.25rem/1.875rem Overpass, sans-serif;
|
||||
font: 600 1.125rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
.button-darkmode { color: #ffffff; }
|
||||
.button-lightmode { color: #000000; }
|
||||
</style>
|
||||
@ -34,7 +34,7 @@
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Customer offer</td>
|
||||
Client offer</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
@ -43,7 +43,7 @@
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Action', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Action-darkmode' : 'Action-lightmode']">
|
||||
Customer order</td>
|
||||
Client order</td>
|
||||
<td
|
||||
:class="['Date', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Date-darkmode' : 'Date-lightmode']">
|
||||
...</td>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="!addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
|
||||
item.assetName }}</h2>
|
||||
<input v-if="editable" v-model="item.assetName" @change="updateConfigItem()"
|
||||
@ -7,7 +7,7 @@
|
||||
<div class="asset-data">
|
||||
<div class="client-location">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ item.customer }}</pre>
|
||||
<select v-if="editable" id="customersDropDownChosenCI" v-model="item.customer"
|
||||
@ -77,13 +77,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="addAssetBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<input v-model="newAssetName" @change="updateAsset()"
|
||||
:class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="asset-data">
|
||||
<div class="client-location">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||
<select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
@ -153,10 +153,10 @@ import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.editable);
|
||||
const editable = computed(() => store.state.assetEditable);
|
||||
const chosenAssetId = computed(() => store.state.chosenAssetId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
const deleteAssetBool = computed(() => store.state.deleteAsset);
|
||||
const addAssetBool = computed(() => store.state.newAsset);
|
||||
|
||||
const darkMode = ref(true);
|
||||
const item = ref({});
|
||||
@ -176,7 +176,7 @@ const newState = ref('');
|
||||
|
||||
// get config item from id
|
||||
const getItemById = async () => {
|
||||
if (!addBool.value) {
|
||||
if (!addAssetBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
|
||||
@ -275,17 +275,17 @@ const getCustomers = async () => {
|
||||
}
|
||||
|
||||
const confirmDeleteAsset = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (deleteAssetBool.value === true) {
|
||||
if (confirm("Do you really want to delete this config item? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteConfigItem/${chosenAssetId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('undoDeleteAsset');
|
||||
store.commit('changeToAssetlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
store.commit('undoDeleteAsset');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -330,13 +330,14 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
watch(deleteBool, confirmDeleteAsset);
|
||||
watch(deleteAssetBool, confirmDeleteAsset);
|
||||
|
||||
onMounted(() => {
|
||||
getItemById();
|
||||
getConfigItems();
|
||||
triggerBackendCallsWithDelay(getCustomers);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section v-if="searchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="assetSearchable" :class="['asset-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Config item</div>
|
||||
<input v-model="assetSearchFilter" @change="searchConfigItem()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
@ -11,7 +11,7 @@
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
|
||||
Customer</th>
|
||||
Client</th>
|
||||
<th
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
Name</th>
|
||||
@ -31,6 +31,9 @@
|
||||
</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
<!-- <router-link to="/assets" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']" > {{
|
||||
item.assetName }} </router-link> -->
|
||||
<nuxt-link to="/assets" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
@click="goToChosenAsset(item.primaryID)">
|
||||
@ -63,8 +66,8 @@ const goToChosenAsset = (id) => {
|
||||
store.commit('setChosenAsset', id);
|
||||
store.commit('changeToAsset');
|
||||
};
|
||||
const clientFilter = computed(() => store.state.filteredByClient);
|
||||
const searchable = computed(() => store.state.searchable);
|
||||
const clientFilter = computed(() => store.state.filteredAssetbyClient);
|
||||
const assetSearchable = computed(() => store.state.assetSearchable);
|
||||
|
||||
const assetSearchFilter = ref('');
|
||||
const darkMode = ref(true)
|
||||
@ -115,7 +118,7 @@ const searchConfigItem = async () => {
|
||||
}
|
||||
|
||||
watch(clientFilter, getConfigItems);
|
||||
watch(searchable, updateSearchTerm);
|
||||
watch(assetSearchable, updateSearchTerm);
|
||||
|
||||
onMounted(async () => {
|
||||
await getConfigItems();
|
||||
@ -136,6 +139,7 @@ export default {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
/* width: 100%; */
|
||||
padding: 1.25rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Customer name</pre>
|
||||
<pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Client name</pre>
|
||||
<div class="data-field" id="client-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="client-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="head">
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
<div class="data-group" id="employment-data">
|
||||
<div class="data-field" id="client-id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="department">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section v-if="hardwareBoolean && !addBool"
|
||||
<section v-if="hardwareBoolean && !addAssetBool"
|
||||
:class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
|
||||
<div class="asset-data">
|
||||
@ -54,7 +54,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="addAssetBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
|
||||
<div class="asset-data">
|
||||
<div class="model-CPU">
|
||||
@ -111,9 +111,9 @@ import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.editable);
|
||||
const editable = computed(() => store.state.assetEditable);
|
||||
const chosenAssetId = computed(() => store.state.chosenAssetId);
|
||||
const addBool = computed(() => store.state.new);
|
||||
const addAssetBool = computed(() => store.state.newAsset);
|
||||
|
||||
const newHardwareBool = ref(true);
|
||||
const newModel = ref('');
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="issueSlip-data">
|
||||
<div class="client">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
|
||||
Customer</th>
|
||||
Client</th>
|
||||
<th
|
||||
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||
ID
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="templateId-client-type" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="templateId-client-type" id="type">
|
||||
|
||||
@ -1,67 +1,11 @@
|
||||
<template>
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 v-if="!editable" :class="['maintenance-visits-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
|
||||
mvt.name }}</h2>
|
||||
<input v-if="editable" v-model="mvt.name" @change="updateMVT()"
|
||||
:class="['data', 'mvt-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['maintenance-visits-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
|
||||
<div class="maintenance-visits-template-data">
|
||||
<div class="client-ID-type-user">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvt.customer }}</pre>
|
||||
<select v-if="editable" id="customersDropDownChosenCI" v-model="mvt.customer"
|
||||
@change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
{{ cust.customername }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="data-field" id="info">
|
||||
<div class="id-type-user" id="ID">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvt.checklistID }}</pre>
|
||||
</div>
|
||||
<div class="id-type-user" id="type">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvt.type }}</pre>
|
||||
<input v-if="editable" v-model="mvt.type" @change="updateMVT()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="id-type-user" id="user">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ mvt.user }}</pre>
|
||||
<input v-if="editable" v-model="mvt.user" @change="updateMVT()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="maintenance-visits-template-data">
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<input v-model="mvt.notes" :readonly="!editable" @change="updateMVT()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<input v-model="newName" @change="updateMaintenanceVisit()"
|
||||
:class="['data', 'maintenance-visits-template-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="maintenance-visits-template-data">
|
||||
<div class="client-ID-type-user">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
{{ cust.customername }}
|
||||
</option>
|
||||
</select>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="info">
|
||||
<div class="id-type-user" id="ID">
|
||||
@ -70,13 +14,11 @@
|
||||
</div>
|
||||
<div class="id-type-user" id="type">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<input v-model="newType" @change="updateMaintenanceVisit()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="id-type-user" id="user">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||
<input v-model="newUser" @change="updateMaintenanceVisit()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -85,8 +27,7 @@
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<input v-model="newNotes" @change="updateMaintenanceVisit()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,182 +36,9 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.editable);
|
||||
const chosenMVTId = computed(() => store.state.chosenMVTId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
const mvt = ref({});
|
||||
const customers = ref([]);
|
||||
const customer = ref({});
|
||||
const maintenanceVisitTemplates = ref([]);
|
||||
|
||||
const newName = ref('');
|
||||
const newCustomerID = ref('');
|
||||
const newCustomer = ref('');
|
||||
const newUser = ref('');
|
||||
const newType = ref('');
|
||||
const newNotes = ref('');
|
||||
|
||||
//get all customers
|
||||
const getCustomers = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
|
||||
);
|
||||
customers.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// function to delete a maintenance visit template
|
||||
const confirmDeleteMVT = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this maintenance visit template? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteMaintenanceVisitTemplate/${chosenMVTId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('changeToTemplatelist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosMVT/${chosenMVTId.value}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all maintenance visit templates
|
||||
const getMaintenanceVisitTemplates = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
|
||||
maintenanceVisitTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateMVT = async () => {
|
||||
if (mvt.value.name.trim() === "") {
|
||||
alert("Please add a maintenance visit template name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if maintenance visit template name already exists
|
||||
maintenanceVisitTemplates.value.forEach(m => {
|
||||
if (m.name === mvt.value.name) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 2) {
|
||||
alert("This maintenance visit template name already exists. Please choose an unique production order template name or modify respectively delete the old one!");
|
||||
mvt.value.name = '';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateMaintenanceVisitTemplate`,
|
||||
{
|
||||
checklistID: mvt.value.checklistID,
|
||||
name: mvt.value.name,
|
||||
customerID: mvt.value.customerID,
|
||||
customer: mvt.value.customer,
|
||||
lastView: mvt.value.lastView,
|
||||
user: mvt.value.user,
|
||||
type: mvt.value.type,
|
||||
notes: mvt.value.notes,
|
||||
}
|
||||
)
|
||||
await getMVTById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update customerid if customer was changed
|
||||
const updateCustomerID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${mvt.value.customer}`);
|
||||
customer.value = response.data;
|
||||
mvt.value.customerID = customer.value.customerID;
|
||||
store.commit('toggleClientChanged');
|
||||
store.commit('toggleClientId', mvt.value.customerID);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
await updateMVT();
|
||||
}
|
||||
|
||||
// get maintenance visit template from id
|
||||
const getMVTById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
|
||||
);
|
||||
mvt.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update customerid if customer was changed
|
||||
const updateNewCustomerID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
|
||||
newCustomerID.value = response.data.customerID;
|
||||
store.commit('toggleClientChanged');
|
||||
store.commit('toggleClientId', newCustomerID.value)
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
updateMaintenanceVisit();
|
||||
}
|
||||
|
||||
// update maintenance visit template fields in the store
|
||||
const updateMaintenanceVisit = () => {
|
||||
const maintenanceVisitTemplate = {
|
||||
name: newName.value,
|
||||
customerId: newCustomerID.value,
|
||||
customer: newCustomer.value,
|
||||
user: newUser.value,
|
||||
type: newType.value,
|
||||
notes: newNotes.value
|
||||
};
|
||||
store.commit('updateMaintenanceVisitTemplateComponent', maintenanceVisitTemplate);
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
watch(deleteBool, confirmDeleteMVT);
|
||||
|
||||
onMounted(() => {
|
||||
getMVTById();
|
||||
triggerBackendCallsWithDelay(getMaintenanceVisitTemplates);
|
||||
triggerBackendCallsWithDelay(getCustomers);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -293,17 +61,6 @@ export default {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
@ -312,21 +69,7 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.select-darkmode {
|
||||
border: none;
|
||||
color: white;
|
||||
background: #212121;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.select-lightmode {
|
||||
border: none;
|
||||
color: black;
|
||||
background: #EBEBEB;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.maintenance-visits-template-name {
|
||||
align-self: stretch;
|
||||
@ -337,16 +80,6 @@ export default {
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.maintenance-visits-template-name-input {
|
||||
padding: 0 0.625rem;
|
||||
margin: 1rem;
|
||||
font-size: initial;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
@ -361,23 +94,11 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 95%;
|
||||
padding: 0.8rem 1.875rem;
|
||||
padding: 0 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.h2-input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.h2-input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.id-type-user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -402,6 +123,17 @@ export default {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
@ -412,16 +144,6 @@ export default {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.mvt-name-input {
|
||||
padding: 0 0.625rem;
|
||||
margin: 1rem;
|
||||
font-size: initial;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.maintenance-visits-template-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@ -1,9 +1,4 @@
|
||||
<template>
|
||||
<section v-if="searchable" :class="['mvt-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
|
||||
<input v-model="mvtSearchFilter" @change="searchMVT()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
|
||||
<table class="data-table" name="maintenance-visits-template-table">
|
||||
@ -11,7 +6,7 @@
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
|
||||
Customer</th>
|
||||
Client</th>
|
||||
<th
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
Name</th>
|
||||
@ -31,11 +26,7 @@
|
||||
{{ template.customer }}</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
<nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
@click="goToChosenMVT(template.checklistID)">
|
||||
{{ template.name }}
|
||||
</nuxt-link></td>
|
||||
{{ template.name }}</td>
|
||||
<td
|
||||
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||
{{ template.checklistID }}</td>
|
||||
@ -51,75 +42,25 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const goToChosenMVT = (id) => {
|
||||
store.commit('setChosenMVT', id);
|
||||
store.commit('changeToTemplate');
|
||||
};
|
||||
|
||||
const clientFilter = computed(() => store.state.filteredByClient);
|
||||
const searchable = computed(() => store.state.searchable);
|
||||
const mvtSearchFilter = ref('');
|
||||
|
||||
const darkMode = ref(true)
|
||||
const maintenanceVisitTemplates = ref([]);
|
||||
|
||||
//get all maintenance visit templates
|
||||
const getMaintenanceVisitTemplates = async () => {
|
||||
if (!(clientFilter.value === '')) {
|
||||
await getFilteredMVTByClient();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
|
||||
maintenanceVisitTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all maintenance visit templates based on the searched mvt name
|
||||
const searchMVT = async () => {
|
||||
if (mvtSearchFilter.value === '') {
|
||||
await getMaintenanceVisitTemplates();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVTsByMVT/${mvtSearchFilter.value}`);
|
||||
maintenanceVisitTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update search term
|
||||
const updateSearchTerm = async () => {
|
||||
mvtSearchFilter.value = '';
|
||||
await getMaintenanceVisitTemplates();
|
||||
}
|
||||
|
||||
//get all maintenance visit templates based on the searched client
|
||||
const getFilteredMVTByClient = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedMVTsByClient/${clientFilter.value}`);
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
|
||||
maintenanceVisitTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
watch(searchable, updateSearchTerm);
|
||||
watch(clientFilter, getMaintenanceVisitTemplates);
|
||||
|
||||
onMounted(async () => {
|
||||
await getMaintenanceVisitTemplates();
|
||||
onMounted(() => {
|
||||
getMaintenanceVisitTemplates();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -138,30 +79,13 @@ export default {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
padding: 1.25rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
@ -170,37 +94,6 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dataInput {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.clientLabel {
|
||||
width: 5.5625em;
|
||||
height: 1.875em;
|
||||
font-family: "Overpass";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.875;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -208,18 +101,6 @@ export default {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.mvt-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.625em 1.875em;
|
||||
gap: 1.25em;
|
||||
width: 30.125em;
|
||||
height: 3.125em;
|
||||
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0.625em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -339,5 +220,4 @@ th {
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section v-if="networkBoolean && !addBool"
|
||||
<section v-if="networkBoolean && !addAssetBool"
|
||||
:class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
|
||||
<div class="asset-data">
|
||||
@ -37,7 +37,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="addAssetBool" :class="['network-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="network">Network specifications:</div>
|
||||
<div class="asset-data">
|
||||
<div class="IPv4-MAC">
|
||||
@ -66,7 +66,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewItem">
|
||||
<section v-if="addAssetBool" id="saveNewItem">
|
||||
<button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Safe</button>
|
||||
</section>
|
||||
</template>
|
||||
@ -80,9 +80,9 @@ import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.editable);
|
||||
const editable = computed(() => store.state.assetEditable);
|
||||
const chosenAssetId = computed(() => store.state.chosenAssetId);
|
||||
const addBool = computed(() => store.state.new);
|
||||
const addAssetBool = computed(() => store.state.newAsset);
|
||||
const newAssetName = computed(() => store.state.newAssetName);
|
||||
const newCustomerID = computed(() => store.state.newCustomerID);
|
||||
const newCustomer = computed(() => store.state.newCustomer);
|
||||
@ -120,7 +120,7 @@ const configItems = ref([]);
|
||||
|
||||
// get config item from id
|
||||
const getItemById = async () => {
|
||||
if (!addBool.value) {
|
||||
if (!addAssetBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getConfigItem/${chosenAssetId.value}`
|
||||
@ -332,7 +332,7 @@ const addItem = async () => {
|
||||
MAC: newMAC.value,
|
||||
subnetmask: newSubnetmask.value,
|
||||
});
|
||||
store.commit('resetStore');
|
||||
store.commit('resetAssetStore');
|
||||
store.commit('changeToAssetlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="templateId-client" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,70 +1,11 @@
|
||||
<template>
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 v-if="!editable" :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
|
||||
pot.name }}</h2>
|
||||
<input v-if="editable" v-model="pot.name" @change="updatePOT()"
|
||||
:class="['data', 'pot-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['production-orders-template-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Template name</h2>
|
||||
<div class="production-orders-template-data">
|
||||
<div class="client-ID">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Customer:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ pot.customer }}</pre>
|
||||
<select v-if="editable" id="customersDropDownChosenCI" v-model="pot.customer"
|
||||
@change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
{{ cust.customername }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="data-field" id="ID">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ pot.templateID }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user">
|
||||
<div class="data-field" id="empty">
|
||||
|
||||
</div>
|
||||
<div class="data-field" id="user">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ pot.user }}</pre>
|
||||
<input v-if="editable" v-model="pot.user" @change="updatePOT()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="production-orders-template-data">
|
||||
<div class="additional">
|
||||
<div class="description">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
|
||||
<input v-model="pot.description" :readonly="!editable" @change="updatePOT()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
|
||||
</div>
|
||||
</div>
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<input v-model="pot.notes" :readonly="!editable" @change="updatePOT()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<input v-model="newName" @change="updateProductionOrder()"
|
||||
:class="['data', 'production-orders-template-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="production-orders-template-data">
|
||||
<div class="client-ID">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
{{ cust.customername }}
|
||||
</option>
|
||||
</select>
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">Client:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="ID">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">ID:</pre>
|
||||
@ -77,8 +18,7 @@
|
||||
</div>
|
||||
<div class="data-field" id="user">
|
||||
<pre :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']">User:</pre>
|
||||
<input v-model="newUser" @change="updateProductionOrder()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -86,196 +26,24 @@
|
||||
<div class="additional">
|
||||
<div class="description">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description:</h3>
|
||||
<input v-model="newDescription" @change="updateProductionOrder()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<input v-model="newNotes" @change="updateProductionOrder()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.editable);
|
||||
const chosenPOTId = computed(() => store.state.chosenPOTId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
|
||||
const darkMode = ref(true);
|
||||
const pot = ref({});
|
||||
const customers = ref([]);
|
||||
const customer = ref({});
|
||||
const productionOrderTemplates = ref([]);
|
||||
|
||||
const newName = ref('');
|
||||
const newCustomerID = ref('');
|
||||
const newCustomer = ref('');
|
||||
const newUser = ref('');
|
||||
const newDescription = ref('');
|
||||
const newNotes = ref('');
|
||||
|
||||
//get all customers
|
||||
const getCustomers = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
|
||||
);
|
||||
customers.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDeletePOT = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this production order template? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteProductionOrderTemplate/${chosenPOTId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('changeToTemplatelist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosPOT/${chosenPOTId.value}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all productionOrder templates
|
||||
const getProductionOrderTemplates = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
|
||||
productionOrderTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
//update data
|
||||
const updatePOT = async () => {
|
||||
if (pot.value.name.trim() === "") {
|
||||
alert("Please add a production order template name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if production order template name already exists
|
||||
productionOrderTemplates.value.forEach(p => {
|
||||
if (p.name === pot.value.name) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 2) {
|
||||
alert("This production order template name already exists. Please choose an unique production order template name or modify respectively delete the old one!");
|
||||
pot.value.name = '';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateProductionOrderTemplate`,
|
||||
{
|
||||
templateID: pot.value.templateID,
|
||||
name: pot.value.name,
|
||||
customerID: pot.value.customerID,
|
||||
customer: pot.value.customer,
|
||||
lastView: pot.value.lastView,
|
||||
user: pot.value.user,
|
||||
description: pot.value.description,
|
||||
notes: pot.value.notes,
|
||||
}
|
||||
)
|
||||
await getPOTById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update customerid if customer was changed
|
||||
const updateCustomerID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${pot.value.customer}`);
|
||||
customer.value = response.data;
|
||||
pot.value.customerID = customer.value.customerID;
|
||||
store.commit('toggleClientChanged');
|
||||
store.commit('toggleClientId', pot.value.customerID);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
await updatePOT();
|
||||
}
|
||||
|
||||
// get production order template from id
|
||||
const getPOTById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
|
||||
);
|
||||
pot.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update customerid if customer was changed
|
||||
const updateNewCustomerID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
|
||||
newCustomerID.value = response.data.customerID;
|
||||
store.commit('toggleClientChanged');
|
||||
store.commit('toggleClientId', newCustomerID.value)
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
updateProductionOrder();
|
||||
}
|
||||
|
||||
// update production order template fields in the store
|
||||
const updateProductionOrder = () => {
|
||||
const productionOrderTemplate = {
|
||||
name: newName.value,
|
||||
customerId: newCustomerID.value,
|
||||
customer: newCustomer.value,
|
||||
user: newUser.value,
|
||||
description: newDescription.value,
|
||||
notes: newNotes.value
|
||||
};
|
||||
store.commit('updateProductionOrderTemplateComponent', productionOrderTemplate);
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
watch(deleteBool, confirmDeletePOT);
|
||||
|
||||
onMounted(() => {
|
||||
getPOTById();
|
||||
getProductionOrderTemplates();
|
||||
triggerBackendCallsWithDelay(getCustomers);
|
||||
});
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -305,15 +73,7 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.pot-name-input {
|
||||
padding: 1rem 0;
|
||||
margin: 1rem;
|
||||
font-size: initial;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.production-orders-template-name {
|
||||
align-self: stretch;
|
||||
@ -324,16 +84,6 @@ export default {
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.production-orders-template-name-input {
|
||||
padding: 1rem 0;
|
||||
margin: 1rem;
|
||||
font-size: initial;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
.h2-darkmode {
|
||||
color: #fff;
|
||||
}
|
||||
@ -348,7 +98,7 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 95%;
|
||||
padding: 0.8rem 1.875rem;
|
||||
padding: 0 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
@ -387,18 +137,6 @@ export default {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.h2-input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.h2-input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.production-orders-template-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -407,22 +145,6 @@ export default {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.select-darkmode {
|
||||
border: none;
|
||||
color: white;
|
||||
background: #212121;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.select-lightmode {
|
||||
border: none;
|
||||
color: black;
|
||||
background: #EBEBEB;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.client-ID,
|
||||
.user {
|
||||
display: flex;
|
||||
|
||||
@ -1,9 +1,4 @@
|
||||
<template>
|
||||
<section v-if="searchable" :class="['pot-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Template:</div>
|
||||
<input v-model="potSearchFilter" @change="searchPOT()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
|
||||
<table class="data-table" name="production-orders-template-table">
|
||||
@ -11,7 +6,7 @@
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
|
||||
Customer</th>
|
||||
Client</th>
|
||||
<th
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
Name</th>
|
||||
@ -28,12 +23,7 @@
|
||||
{{ template.customer }}</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
<nuxt-link to="/productionOrders" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
@click="goToChosenPOT(template.templateID)">
|
||||
{{ template.name }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
{{ template.name }}</td>
|
||||
<td
|
||||
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
|
||||
{{ template.templateID }}</td>
|
||||
@ -46,75 +36,25 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const goToChosenPOT = (id) => {
|
||||
store.commit('setChosenPOT', id);
|
||||
store.commit('changeToTemplate');
|
||||
};
|
||||
|
||||
const clientFilter = computed(() => store.state.filteredByClient);
|
||||
const searchable = computed(() => store.state.searchable);
|
||||
|
||||
const potSearchFilter = ref('');
|
||||
const darkMode = ref(true);
|
||||
const darkMode = ref(true)
|
||||
const productionOrderTemplates = ref([]);
|
||||
|
||||
//get all productionOrder templates
|
||||
const getProductionOrderTemplates = async () => {
|
||||
if (!(clientFilter.value === '')) {
|
||||
await getFilteredPOTByClient();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
|
||||
productionOrderTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all productionOrder templates based on the searched pot name
|
||||
const searchPOT = async () => {
|
||||
if (potSearchFilter.value === '') {
|
||||
await getProductionOrderTemplates();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOTsByPOT/${potSearchFilter.value}`);
|
||||
productionOrderTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update search term
|
||||
const updateSearchTerm = async () => {
|
||||
potSearchFilter.value = '';
|
||||
await getProductionOrderTemplates();
|
||||
}
|
||||
|
||||
//get all productionOrder templates based on the searched client
|
||||
const getFilteredPOTByClient = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedPOTsByClient/${clientFilter.value}`);
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
|
||||
productionOrderTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
watch(clientFilter, getProductionOrderTemplates);
|
||||
watch(searchable, updateSearchTerm);
|
||||
|
||||
onMounted(async () => {
|
||||
await getProductionOrderTemplates();
|
||||
onMounted(() => {
|
||||
getProductionOrderTemplates();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -126,18 +66,6 @@ export default {
|
||||
|
||||
|
||||
<style scoped>
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -151,17 +79,6 @@ export default {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.dataInput {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
@ -177,11 +94,6 @@ export default {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -196,16 +108,6 @@ export default {
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
@ -228,19 +130,6 @@ td {
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.pot-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.625em 1.875em;
|
||||
gap: 1.25em;
|
||||
width: 30.125em;
|
||||
height: 3.125em;
|
||||
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0.625em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
@ -312,16 +201,4 @@ th {
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.clientLabel {
|
||||
width: 5.5625em;
|
||||
height: 1.875em;
|
||||
font-family: "Overpass";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.875;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section v-if="softwareBoolean && !addBool"
|
||||
<section v-if="softwareBoolean && !addAssetBool"
|
||||
:class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
|
||||
<div class="asset-data">
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<section v-if="addAssetBool" :class="['software-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']" id="software">Software specifications:
|
||||
<div class="asset-data">
|
||||
<table class="data-table" id="asset-table-no-client">
|
||||
@ -89,9 +89,9 @@ import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.editable);
|
||||
const editable = computed(() => store.state.assetEditable);
|
||||
const chosenAssetId = computed(() => store.state.chosenAssetId);
|
||||
const addBool = computed(() => store.state.new);
|
||||
const addAssetBool = computed(() => store.state.newAsset);
|
||||
|
||||
const newSoftwareBool = ref(true);
|
||||
const newSoftware = ref('');
|
||||
|
||||
@ -1,96 +1,15 @@
|
||||
<template>
|
||||
<section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 v-if="!editable" :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{ sol.solutionName
|
||||
}}</h2>
|
||||
<input v-if="editable" v-model="sol.solutionName" @change="updateSolution()"
|
||||
:class="['data', 'solution-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<section :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<h2 :class="['solution-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">Solution name</h2>
|
||||
<div class="solution-data">
|
||||
<div class="client-asset">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ sol.customer }}</pre>
|
||||
<select v-if="editable" id="customersDropDownChosenCI" v-model="sol.customer"
|
||||
@change="updateCustomerID()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
{{ cust.customername }}
|
||||
</option>
|
||||
</select>
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Client:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="asset">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ sol.assetName }}</pre>
|
||||
<select v-if="editable" id="customersDropDownChosenCI" v-model="sol.assetName"
|
||||
@change="updateSolution()" :class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItems" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="data-field" id="user">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ sol.user }}</pre>
|
||||
</div>
|
||||
<div class="type-id">
|
||||
<div class="data-field" id="type">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<pre v-if="!editable"
|
||||
:class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ sol.type }}</pre>
|
||||
<input v-if="editable" v-model="sol.type" @change="updateSolution()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</div>
|
||||
<div class="data-field" id="id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ sol.primaryID }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-data">
|
||||
<div class="additional">
|
||||
<div class="description">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
|
||||
problem/intended use:</h3>
|
||||
<input v-model="sol.description" :readonly="!editable" @change="updateSolution()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="solution-data">
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<input v-model="sol.notes" :readonly="!editable" @change="updateSolution()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<input v-model="newSolutionName" @change="updateSol()"
|
||||
:class="['data', 'solution-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
|
||||
<div class="solution-data">
|
||||
<div class="client-asset">
|
||||
<div class="data-field" id="client">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer:</pre>
|
||||
<select id="customersDropDownChosenCI" v-model="newCustomer" @change="updateNewCustomerID()"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="cust in customers" :key="cust.primaryID">
|
||||
{{ cust.customername }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="data-field" id="asset">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Asset:</pre>
|
||||
<select id="customersDropDownChosenCI" v-model="newAssetName" @change="updateSol()"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItems" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
@ -98,14 +17,13 @@
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">User:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="type-id">
|
||||
<div class="type-state">
|
||||
<div class="data-field" id="type">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Type:</pre>
|
||||
<input v-model="newType" @change="updateSol()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
<div class="data-field" id="id">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
|
||||
<div class="data-field" id="state">
|
||||
<pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">State:</pre>
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -116,8 +34,7 @@
|
||||
<div class="description">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Description of the
|
||||
problem/intended use:</h3>
|
||||
<input v-model="newDescription" @change="updateSol()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="description">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -125,8 +42,7 @@
|
||||
<div class="additional">
|
||||
<div class="notes">
|
||||
<h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</h3>
|
||||
<input v-model="newNotes" @change="updateSol()"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">
|
||||
<pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -135,216 +51,9 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const editable = computed(() => store.state.editable);
|
||||
const chosenSolutionId = computed(() => store.state.chosenSolutionId);
|
||||
const deleteBool = computed(() => store.state.deleteBool);
|
||||
const addBool = computed(() => store.state.new);
|
||||
|
||||
const darkMode = ref(true);
|
||||
const sol = ref({});
|
||||
const customer = ref({});
|
||||
const solutions = ref([]);
|
||||
const customers = ref([]);
|
||||
const configItems = ref([]);
|
||||
|
||||
const newAssetName = ref('');
|
||||
const newCustomerID = ref('');
|
||||
const newCustomer = ref('');
|
||||
const newSolutionName = ref('');
|
||||
const newType = ref('');
|
||||
const newDescription = ref('');
|
||||
const newNotes = ref('');
|
||||
const newLastView = ref('');
|
||||
const newUser = ref('');
|
||||
const changedClientId = computed(() => store.state.changedClientId);
|
||||
const clientChanged = computed(() => store.state.clientChanged);
|
||||
|
||||
// get solution from id
|
||||
const getSolutionById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSolution/${chosenSolutionId.value}`
|
||||
);
|
||||
sol.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
await getConfigItemsFromClient();
|
||||
}
|
||||
|
||||
//get all config items from the selected client
|
||||
const getConfigItemsFromClient = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${sol.value.customerID}`);
|
||||
configItems.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${changedClientId.value}`);
|
||||
configItems.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
if (clientChanged.value) {
|
||||
store.commit('toggleClientChanged');
|
||||
}
|
||||
}
|
||||
|
||||
// update solution fields in the store
|
||||
const updateSol = () => {
|
||||
const solution = {
|
||||
solutionName: newSolutionName.value,
|
||||
customerId: newCustomerID.value,
|
||||
customer: newCustomer.value,
|
||||
assetName: newAssetName.value,
|
||||
lastView: newLastView.value,
|
||||
type: newType.value,
|
||||
description: newDescription.value,
|
||||
notes: newNotes.value,
|
||||
user: newUser.value
|
||||
};
|
||||
store.commit('updateSolutionComponent', solution);
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateSolution = async () => {
|
||||
if (sol.value.solutionName.trim() === "") {
|
||||
alert("Please add a solution name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
// check if solution name already exists
|
||||
solutions.value.forEach(s => {
|
||||
if (s.solutionName === sol.value.solutionName) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 1) {
|
||||
alert("This solution name already exists. Please choose an unique solution name or modify respectively delete the old one!");
|
||||
sol.value.solutionName = '';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateSolution`,
|
||||
{
|
||||
primaryID: sol.value.primaryID,
|
||||
solutionName: sol.value.solutionName,
|
||||
customerID: sol.value.customerID,
|
||||
customer: sol.value.customer,
|
||||
assetName: sol.value.assetName,
|
||||
type: sol.value.type,
|
||||
description: sol.value.description,
|
||||
notes: sol.value.notes,
|
||||
lastView: sol.value.lastView,
|
||||
user: sol.value.user,
|
||||
}
|
||||
)
|
||||
await getSolutionById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all customers
|
||||
const getCustomers = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllCustomers`
|
||||
);
|
||||
customers.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDeleteSolution = async () => {
|
||||
if (deleteBool.value === true) {
|
||||
if (confirm("Do you really want to delete this solution? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteSolution/${chosenSolutionId.value}`);
|
||||
store.commit('undoDelete');
|
||||
store.commit('changeToSolutionlist');
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteTodosSolution/${chosenSolutionId.value}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
store.commit('undoDelete');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all solutions
|
||||
const getSolutions = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
|
||||
solutions.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// update customerid if customer was changed
|
||||
const updateCustomerID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${sol.value.customer}`);
|
||||
customer.value = response.data;
|
||||
sol.value.customerID = customer.value.customerID;
|
||||
store.commit('toggleClientChanged');
|
||||
store.commit('toggleClientId', sol.value.customerID);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
await updateSolution();
|
||||
}
|
||||
|
||||
// update customerid if customer was changed
|
||||
const updateNewCustomerID = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCustomerByName/${newCustomer.value}`);
|
||||
newCustomerID.value = response.data.customerID;
|
||||
store.commit('toggleClientChanged');
|
||||
store.commit('toggleClientId', newCustomerID.value);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
updateSol();
|
||||
await getConfigItemsFromClient();
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
watch(deleteBool, confirmDeleteSolution);
|
||||
watch(clientChanged, getSolutionById);
|
||||
|
||||
onMounted(() => {
|
||||
getSolutionById();
|
||||
getSolutions();
|
||||
triggerBackendCallsWithDelay(getCustomers);
|
||||
});
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -374,15 +83,7 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.solution-name-input {
|
||||
padding: 1rem 0;
|
||||
margin: 1rem;
|
||||
font-size: initial;
|
||||
letter-spacing: 5%;
|
||||
text-decoration-line: underline;
|
||||
font: italic 400 1rem/187.5% Overpass, -apple-system, Roboto, Helvetica,
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
|
||||
.solution-name {
|
||||
align-self: stretch;
|
||||
@ -401,41 +102,17 @@ export default {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.h2-input-darkmode {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.h2-input-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
}
|
||||
|
||||
.data-field {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 0.8rem 1.875rem;
|
||||
padding: 0 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.select-darkmode {
|
||||
border: none;
|
||||
color: white;
|
||||
background: #212121;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.select-lightmode {
|
||||
border: none;
|
||||
color: black;
|
||||
background: #EBEBEB;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.data-field#street-name {
|
||||
width: 70%;
|
||||
}
|
||||
@ -498,10 +175,6 @@ export default {
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.additional {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -526,7 +199,7 @@ export default {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.type-id {
|
||||
.type-state {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<section v-if="!addBool"
|
||||
:class="['solution-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
|
||||
<table class="data-table" id="solution-checkklist">
|
||||
<tbody>
|
||||
@ -16,416 +15,28 @@
|
||||
Task</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr v-for="todo in solTodos" :key="todo.primaryID"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
{{ todo.step }}</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
{{ todo.asset }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
<select id="customersDropDownChosenCI" v-model="todo.asset" @change="updateSolTodo(todo)"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItemList" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
{{ todo.task }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
<input type="text" v-model="todo.task" @change="updateSolTodo(todo)"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">{{
|
||||
todo.comments }}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">
|
||||
<input type="text" v-model="todo.comments" @change="updateSolTodo(todo)"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
<button :class="[darkMode ? 'deleteSolTodos-darkmode' : 'deleteSolTodos-lightmode']"
|
||||
@click="deleteSolTodo(todo.primaryID)">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
{{ newStepTodo }}
|
||||
</td>
|
||||
<td
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
<select id="customersDropDownChosenCI" v-model="newAssetTodo"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItemList" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
<input type="text" v-model="newTaskTodo"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
|
||||
v-model="newCommentsTodo"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
|
||||
:class="[darkMode ? 'saveSolTodos-darkmode' : 'saveSolTodos-lightmode']"
|
||||
@click="addSolTodo()">Save</button> <button
|
||||
:class="[darkMode ? 'deleteLastSolTodos-darkmode' : 'deleteLastSolTodos-lightmode']"
|
||||
@click="deleteNewRow()">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<section v-if="editable && !addBool" id="editSolTodos">
|
||||
<button :class="[darkMode ? 'editSolTodos-darkmode' : 'editSolTodos-lightmode']"
|
||||
@click="addChecklistRow()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool"
|
||||
:class="['solution-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
|
||||
<table class="data-table" id="template-checklist">
|
||||
<tbody>
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
Step</th>
|
||||
<th
|
||||
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
Asset</th>
|
||||
<th
|
||||
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
Task</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr v-for="(newT, index) in newTodos" :key="index"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
{{ newT.step }}
|
||||
</td>
|
||||
...</td>
|
||||
<td
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
<select id="customersDropDownChosenCI" v-model="newT.asset"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItemList" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
...</td>
|
||||
<td
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
<input type="text" v-model="newT.task"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
|
||||
v-model="newT.comments"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
|
||||
:class="[darkMode ? 'deleteSolTodos-darkmode' : 'deleteLastSolTodos-lightmode']"
|
||||
@click="deleteSolTodoFromNewTodos(index)">-</button>
|
||||
</td>
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section v-if="addBool" id="editSolTodos">
|
||||
<button :class="[darkMode ? 'editSolTodos-darkmode' : 'editSolTodos-lightmode']"
|
||||
@click="addRowForNewSol()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewSol">
|
||||
<button :class="[darkMode ? 'saveNewSol-darkmode' : 'saveNewSol-lightmode']" @click="addSol()">Safe</button>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const addBool = computed(() => store.state.new);
|
||||
const editable = computed(() => store.state.editable);
|
||||
|
||||
const newSolutionNameSol = computed(() => store.state.newSolutionNameSol);
|
||||
const newCustomerIDSol = computed(() => store.state.newCustomerIDSol);
|
||||
const newCustomerSol = computed(() => store.state.newCustomerSol);
|
||||
const newAssetNameSol = computed(() => store.state.newAssetNameSol);
|
||||
const newLastViewSol = computed(() => store.state.newLastViewSol);
|
||||
const newUserSol = computed(() => store.state.newUserSol);
|
||||
const newTypeSol = computed(() => store.state.newTypeSol);
|
||||
const newNotesSol = computed(() => store.state.newNotesSol);
|
||||
const newDescriptionSol = computed(() => store.state.newDescriptionSol);
|
||||
|
||||
const newStepTodo = computed(() => solTodos.value.length);
|
||||
const chosenSolId = computed(() => store.state.chosenSolutionId);
|
||||
const clientChanged = computed(() => store.state.clientChanged);
|
||||
const changedClientId = computed(() => store.state.changedClientId);
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
const addRow = ref(false);
|
||||
const configItemList = ref([]);
|
||||
const solutions = ref([]);
|
||||
const solTodos = ref([])
|
||||
const sol = ref({})
|
||||
const newAssetTodo = ref('');
|
||||
const newTaskTodo = ref('');
|
||||
const newCommentsTodo = ref('');
|
||||
const newTodos = reactive([]);
|
||||
const newRowId = computed(() => newTodos.length)
|
||||
|
||||
// delete new todo row
|
||||
const deleteNewRow = () => {
|
||||
newAssetTodo.value = '';
|
||||
newTaskTodo.value = '';
|
||||
newCommentsTodo.value = '';
|
||||
addRow.value = false;
|
||||
}
|
||||
|
||||
const deleteSolTodoFromNewTodos = (index) => {
|
||||
newTodos.splice(index, 1);
|
||||
newTodos.forEach((todo, i) => {
|
||||
todo.step = i
|
||||
})
|
||||
}
|
||||
|
||||
// add new solution
|
||||
const addSol = async () => {
|
||||
// check if all input data is valid
|
||||
if (newSolutionNameSol.value.trim() === "") {
|
||||
alert("Please add a solution name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
if (!(solutions.value.length == null)) {
|
||||
// check if solution name already exists
|
||||
solutions.value.forEach(s => {
|
||||
if (s.solutionName === newSolutionNameSol.value) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 1) {
|
||||
alert("This solution name already exists. Please choose an unique solution name or modify respectively delete the old one!");
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (newCustomerSol.value.length === 0) {
|
||||
alert("Please choose a client!");
|
||||
return;
|
||||
}
|
||||
let allFine = true;
|
||||
newTodos.forEach(todo => {
|
||||
if (todo.asset.length === 0) {
|
||||
alert(`Please choose a config item for all todos.`);
|
||||
allFine = false
|
||||
}
|
||||
})
|
||||
if (!allFine) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addSol`,
|
||||
{
|
||||
solutionName: newSolutionNameSol.value,
|
||||
assetName: newAssetNameSol.value,
|
||||
customerID: newCustomerIDSol.value,
|
||||
customer: newCustomerSol.value,
|
||||
type: newTypeSol.value,
|
||||
lastView: newLastViewSol.value,
|
||||
user: newUserSol.value,
|
||||
description: newDescriptionSol.value,
|
||||
notes: newNotesSol.value,
|
||||
});
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToSolutionlist');
|
||||
newTodos.forEach(async todo => {
|
||||
try {
|
||||
const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoSol`,
|
||||
{
|
||||
solutionID: response.data,
|
||||
step: todo.step,
|
||||
asset: todo.asset,
|
||||
task: todo.task,
|
||||
comments: todo.comments,
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new row of todo for the new solution
|
||||
const addRowForNewSol = async () => {
|
||||
if (newCustomerSol.value.length === 0) {
|
||||
alert("Please choose a client first!");
|
||||
return;
|
||||
}
|
||||
await getConfigItemsFromClient();
|
||||
newTodos.push({
|
||||
solutionID: chosenSolId.value,
|
||||
step: newRowId.value,
|
||||
asset: '',
|
||||
task: '',
|
||||
comments: ''
|
||||
});
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateSolTodo = async (todo) => {
|
||||
if (todo.asset.length === 0) {
|
||||
alert(`Please add the missing config item in row ${todo.step}!`);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateSolTodo`,
|
||||
{
|
||||
primaryID: todo.primaryID,
|
||||
solutionID: todo.solutionIDID,
|
||||
step: todo.step,
|
||||
asset: todo.asset,
|
||||
task: todo.task,
|
||||
comments: todo.comments,
|
||||
}
|
||||
);
|
||||
await getSolutionById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new solution todo
|
||||
const addSolTodo = async () => {
|
||||
// check if all input data is valid
|
||||
if (newAssetTodo.value.length === 0) {
|
||||
alert("Please choose an asset for the new todo!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoSol`,
|
||||
{
|
||||
solutionID: chosenSolId.value,
|
||||
step: newStepTodo.value,
|
||||
asset: newAssetTodo.value,
|
||||
task: newTaskTodo.value,
|
||||
comments: newCommentsTodo.value,
|
||||
});
|
||||
addRow.value = false;
|
||||
await getSolutionTodosById();
|
||||
newAssetTodo.value = '';
|
||||
newTaskTodo.value = '';
|
||||
newCommentsTodo.value = '';
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new row for the template
|
||||
const addChecklistRow = async () => {
|
||||
await getConfigItemsFromClient();
|
||||
if (addRow.value) {
|
||||
alert('Please confirm the last added row first.')
|
||||
return
|
||||
}
|
||||
addRow.value = true
|
||||
}
|
||||
|
||||
//get all solutions
|
||||
const getAllSolutions = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
|
||||
solutions.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// get solution todos from id
|
||||
const getSolutionTodosById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosSolution/${chosenSolId.value}`
|
||||
);
|
||||
solTodos.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all config items from the selected client
|
||||
const getConfigItemsFromClient = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${sol.value.customerID}`);
|
||||
configItemList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${changedClientId.value}`);
|
||||
configItemList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
if (clientChanged.value) {
|
||||
store.commit('toggleClientChanged');
|
||||
}
|
||||
}
|
||||
|
||||
// get solution from id
|
||||
const getSolutionById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSolution/${chosenSolId.value}`
|
||||
);
|
||||
sol.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
await getConfigItemsFromClient();
|
||||
}
|
||||
|
||||
const deleteSolTodo = async (id) => {
|
||||
if (confirm("Do you really want to delete this solution todo? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteSolTodo/${id}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
await getSolutionTodosById();
|
||||
}
|
||||
|
||||
watch(clientChanged, getSolutionById);
|
||||
|
||||
onMounted(() => {
|
||||
getSolutionTodosById();
|
||||
getSolutionById();
|
||||
triggerBackendCallsWithDelay(getAllSolutions);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -438,108 +49,17 @@ export default {
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.saveSolTodos-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 10rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.saveSolTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 10rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.saveNewSol-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
width: 100%;
|
||||
padding: 1.25rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.saveNewSol-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.deleteSolTodos-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 15.8rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deleteLastSolTodos-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 2rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deleteSolTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 15.8rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deleteLastSolTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 2rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
@ -548,16 +68,6 @@ export default {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -565,24 +75,6 @@ export default {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.solution-checklist-information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -592,22 +84,6 @@ export default {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.select-darkmode {
|
||||
border: none;
|
||||
color: white;
|
||||
background: #212121;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.select-lightmode {
|
||||
border: none;
|
||||
color: black;
|
||||
background: #EBEBEB;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
@ -687,7 +163,6 @@ th {
|
||||
|
||||
.Comments {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -708,54 +183,4 @@ th {
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.editSolTodos-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 0.825rem 0.7rem;
|
||||
width: 4%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.editSolTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
margin-left: 15rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.deleteSolTodos-darkmode:hover,
|
||||
.deleteLastSolTodos-darkmode:hover,
|
||||
|
||||
.saveSolTodos-darkmode:hover,
|
||||
.editSolTodos-darkmode:hover,
|
||||
.saveNewSol-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.deleteSolTodos-lightmode:hover,
|
||||
.deleteLastSolTodos-lightmode:hover,
|
||||
|
||||
.saveSolTodos-lightmode:hover,
|
||||
.editSolTodos-lightmode:hover,
|
||||
.saveNewSol-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#saveNewSol {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#editSolTodos {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,4 @@
|
||||
<template>
|
||||
<section v-if="searchable" :class="['solution-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['clientLabel', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</div>
|
||||
<input v-model="solutionSearchFilter" @change="searchSolution()"
|
||||
:class="['dataInput', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</section>
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Last viewed:</div>
|
||||
<table class="data-table" id="solution-table">
|
||||
@ -11,7 +6,7 @@
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Client', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Client-darkmode' : 'Client-lightmode']">
|
||||
Customer</th>
|
||||
Client</th>
|
||||
<th
|
||||
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
Name</th>
|
||||
@ -30,12 +25,7 @@
|
||||
{{ sol.customer }}</td>
|
||||
<td
|
||||
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
|
||||
<nuxt-link to="/solutions" id="nuxt-link" class="button"
|
||||
:class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
|
||||
@click="goToChosenSolution(sol.primaryID)">
|
||||
{{ sol.solutionName }}
|
||||
</nuxt-link>
|
||||
</td>
|
||||
{{ sol.solutionName }}</td>
|
||||
<td
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
{{ sol.assetName }}</td>
|
||||
@ -54,73 +44,22 @@
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const goToChosenSolution = (id) => {
|
||||
store.commit('setChosenSolution', id);
|
||||
store.commit('changeToSolution');
|
||||
};
|
||||
|
||||
const clientFilter = computed(() => store.state.filteredByClient);
|
||||
const searchable = computed(() => store.state.searchable);
|
||||
|
||||
const solutionSearchFilter = ref('');
|
||||
const darkMode = ref(true)
|
||||
const solutions = ref([]);
|
||||
|
||||
// update search term
|
||||
const updateSearchTerm = async () => {
|
||||
solutionSearchFilter.value = '';
|
||||
await getSolutions();
|
||||
}
|
||||
|
||||
//get all solutions
|
||||
const getSolutions = async () => {
|
||||
if (!(clientFilter.value === '')) {
|
||||
await getFilteredSolutionsByClient();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
|
||||
solutions.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all solutions based on the searched client
|
||||
const getFilteredSolutionsByClient = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByClient/${clientFilter.value}`);
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllSolutions`);
|
||||
solutions.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
//get all solutions based on the searched solution name
|
||||
const searchSolution = async () => {
|
||||
if (solutionSearchFilter.value === '') {
|
||||
await getSolutions();
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsBySolution/${solutionSearchFilter.value}`);
|
||||
solutions.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
watch(clientFilter, getSolutions);
|
||||
watch(searchable, updateSearchTerm);
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
await getSolutions();
|
||||
onMounted(() => {
|
||||
getSolutions();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -138,6 +77,7 @@ export default {
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
padding: 1.25rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
@ -178,32 +118,6 @@ export default {
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.solution-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.625em 1.875em;
|
||||
gap: 1.25em;
|
||||
width: 30.125em;
|
||||
height: 3.125em;
|
||||
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0.625em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
@ -212,17 +126,6 @@ export default {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.dataInput {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
@ -232,14 +135,6 @@ td {
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
@ -254,22 +149,6 @@ th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
#nuxt-link {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.clientLabel {
|
||||
width: 5.5625em;
|
||||
height: 1.875em;
|
||||
font-family: "Overpass";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875em;
|
||||
line-height: 1.875;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.Client {
|
||||
width: 33.3%;
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<section v-if="!addBool"
|
||||
:class="['template-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
|
||||
<table class="data-table" id="template-checkklist">
|
||||
<tbody>
|
||||
@ -16,412 +15,28 @@
|
||||
Task</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr v-for="todo in potTodos" :key="todo.primaryID"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
{{ todo.rowID }}
|
||||
</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
{{ todo.asset }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
<select id="customersDropDownChosenCI" v-model="todo.asset" @change="updatePOTTodo(todo)"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItemList" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
{{ todo.task }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
<input type="text" v-model="todo.task" @change="updatePOTTodo(todo)"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ todo.comments
|
||||
}}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
|
||||
v-model="todo.comments" @change="updatePOTTodo(todo)"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
|
||||
:class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
|
||||
@click="deletePOTTodo(todo.primaryID)">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
{{ newStepTodo }}
|
||||
</td>
|
||||
...</td>
|
||||
<td
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
<select id="customersDropDownChosenCI" v-model="newAssetTodo"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItemList" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
...</td>
|
||||
<td
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
<input type="text" v-model="newTaskTodo"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
|
||||
v-model="newCommentsTodo"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
|
||||
:class="[darkMode ? 'savePOTTodos-darkmode' : 'savePOTTodos-lightmode']"
|
||||
@click="addPOTTodo()">Save</button> <button
|
||||
:class="[darkMode ? 'deleteLastPOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
|
||||
@click="deleteNewRow()">-</button>
|
||||
</td>
|
||||
...</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section v-if="editable && !addBool" id="editPOTTodos">
|
||||
<button :class="[darkMode ? 'editPOTTodos-darkmode' : 'editPOTTodos-lightmode']"
|
||||
@click="addChecklistRow()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool"
|
||||
:class="['template-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
|
||||
<table class="data-table" id="template-checkklist">
|
||||
<tbody>
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
Step</th>
|
||||
<th
|
||||
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
Asset</th>
|
||||
<th
|
||||
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
Task</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr v-for="(newT, index) in newTodos" :key="index"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
{{ newT.rowID }}
|
||||
</td>
|
||||
<td
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
<select id="customersDropDownChosenCI" v-model="newT.asset"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItemList" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
<input type="text" v-model="newT.task"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
|
||||
v-model="newT.comments"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
|
||||
:class="[darkMode ? 'deletePOTTodos-darkmode' : 'deleteLastPOTTodos-lightmode']"
|
||||
@click="deletePOTTodoFromNewTodos(index)">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section v-if="addBool" id="editPOTTodos">
|
||||
<button :class="[darkMode ? 'editPOTTodos-darkmode' : 'editPOTTodos-lightmode']"
|
||||
@click="addRowForNewPOT()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewPOT">
|
||||
<button :class="[darkMode ? 'saveNewPOT-darkmode' : 'saveNewPOT-lightmode']" @click="addPOT()">Safe</button>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const addBool = computed(() => store.state.new);
|
||||
const editable = computed(() => store.state.editable);
|
||||
|
||||
const newNamePOT = computed(() => store.state.newNamePOT);
|
||||
const newCustomerIDPOT = computed(() => store.state.newCustomerIDPOT);
|
||||
const newCustomerPOT = computed(() => store.state.newCustomerPOT);
|
||||
const newLastViewPOT = computed(() => store.state.newLastViewPOT);
|
||||
const newUserPOT = computed(() => store.state.newUserPOT);
|
||||
const newDescriptionPOT = computed(() => store.state.newDescriptionPOT);
|
||||
const newNotesPOT = computed(() => store.state.newNotesPOT);
|
||||
const newStepTodo = computed(() => potTodos.value.length);
|
||||
const chosenPOTId = computed(() => store.state.chosenPOTId);
|
||||
const clientChanged = computed(() => store.state.clientChanged);
|
||||
const changedClientId = computed(() => store.state.changedClientId);
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
const addRow = ref(false);
|
||||
const configItemList = ref([]);
|
||||
const productionOrderTemplates = ref([]);
|
||||
const potTodos = ref([])
|
||||
const pot = ref({})
|
||||
const newAssetTodo = ref('');
|
||||
const newTaskTodo = ref('');
|
||||
const newCommentsTodo = ref('');
|
||||
const newTodos = reactive([]);
|
||||
const newRowId = computed(() => newTodos.length)
|
||||
|
||||
// delete new todo row
|
||||
const deleteNewRow = () => {
|
||||
newAssetTodo.value = '';
|
||||
newTaskTodo.value = '';
|
||||
newCommentsTodo.value = '';
|
||||
addRow.value = false;
|
||||
}
|
||||
|
||||
const deletePOTTodoFromNewTodos = (index) => {
|
||||
newTodos.splice(index, 1);
|
||||
newTodos.forEach((todo, i) => {
|
||||
todo.rowID = i
|
||||
})
|
||||
}
|
||||
|
||||
// add new production order template
|
||||
const addPOT = async () => {
|
||||
// check if all input data is valid
|
||||
if (newNamePOT.value.trim() === "") {
|
||||
alert("Please add a production order template name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
if (!(productionOrderTemplates.value.length == null)) {
|
||||
// check if production order template name already exists
|
||||
productionOrderTemplates.value.forEach(pot => {
|
||||
if (pot.name === newNamePOT.value) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 1) {
|
||||
alert("This production order template name already exists. Please choose an unique production order template name or modify respectively delete the old one!");
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (newCustomerPOT.value.length === 0) {
|
||||
alert("Please choose a client!");
|
||||
return;
|
||||
}
|
||||
let allFine = true;
|
||||
newTodos.forEach(todo => {
|
||||
if (todo.asset.length === 0) {
|
||||
alert(`Please choose a config item for all todos.`);
|
||||
allFine = false
|
||||
}
|
||||
})
|
||||
if (!allFine) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addPOT`,
|
||||
{
|
||||
name: newNamePOT.value,
|
||||
customerID: newCustomerIDPOT.value,
|
||||
customer: newCustomerPOT.value,
|
||||
lastView: newLastViewPOT.value,
|
||||
user: newUserPOT.value,
|
||||
description: newDescriptionPOT.value,
|
||||
notes: newNotesPOT.value,
|
||||
});
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToTemplatelist');
|
||||
newTodos.forEach(async todo => {
|
||||
try {
|
||||
const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoPOT`,
|
||||
{
|
||||
templateID: response.data,
|
||||
rowID: todo.rowID,
|
||||
asset: todo.asset,
|
||||
task: todo.task,
|
||||
comment: todo.comments,
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new row of todo for the new pot
|
||||
const addRowForNewPOT = async () => {
|
||||
if (newCustomerPOT.value.length === 0) {
|
||||
alert("Please choose a client first!");
|
||||
return;
|
||||
}
|
||||
await getConfigItemsFromClient();
|
||||
newTodos.push({
|
||||
templateID: chosenPOTId.value,
|
||||
rowID: newRowId.value,
|
||||
asset: '',
|
||||
task: '',
|
||||
comments: ''
|
||||
});
|
||||
}
|
||||
|
||||
//update data
|
||||
const updatePOTTodo = async (todo) => {
|
||||
if (todo.asset.length === 0) {
|
||||
alert(`Please add the missing config item in row ${todo.rowID}!`);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updatePOTTodo`,
|
||||
{
|
||||
primaryID: todo.primaryID,
|
||||
templateID: todo.templateID,
|
||||
rowID: todo.rowID,
|
||||
asset: todo.asset,
|
||||
task: todo.task,
|
||||
comments: todo.comments,
|
||||
}
|
||||
);
|
||||
await getPOTById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new production order template todo
|
||||
const addPOTTodo = async () => {
|
||||
// check if all input data is valid
|
||||
if (newAssetTodo.value.length === 0) {
|
||||
alert("Please choose an asset for the new todo!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoPOT`,
|
||||
{
|
||||
templateID: chosenPOTId.value,
|
||||
rowID: newStepTodo.value,
|
||||
asset: newAssetTodo.value,
|
||||
task: newTaskTodo.value,
|
||||
comment: newCommentsTodo.value,
|
||||
});
|
||||
addRow.value = false;
|
||||
await getPOTTodosById();
|
||||
newAssetTodo.value = '';
|
||||
newTaskTodo.value = '';
|
||||
newCommentsTodo.value = '';
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new row for the template checklist
|
||||
const addChecklistRow = async () => {
|
||||
await getConfigItemsFromClient();
|
||||
if (addRow.value) {
|
||||
alert('Please confirm the last added row first.')
|
||||
return
|
||||
}
|
||||
addRow.value = true
|
||||
}
|
||||
|
||||
//get all production order templates
|
||||
const getProductionOrderTemplates = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllProductionOrderTemplates`);
|
||||
productionOrderTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// get production order template todos from id
|
||||
const getPOTTodosById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosProductionOrderTemplate/${chosenPOTId.value}`
|
||||
);
|
||||
potTodos.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all config items from the selected client
|
||||
const getConfigItemsFromClient = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${pot.value.customerID}`);
|
||||
configItemList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${changedClientId.value}`);
|
||||
configItemList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
if (clientChanged.value) {
|
||||
store.commit('toggleClientChanged');
|
||||
}
|
||||
}
|
||||
|
||||
// get production order template from id
|
||||
const getPOTById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getProductionOrderTemplate/${chosenPOTId.value}`
|
||||
);
|
||||
pot.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
await getConfigItemsFromClient();
|
||||
}
|
||||
|
||||
const deletePOTTodo = async (id) => {
|
||||
if (confirm("Do you really want to delete this production order template todo? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deletePOTTodo/${id}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
await getPOTTodosById();
|
||||
}
|
||||
|
||||
watch(clientChanged, getPOTById);
|
||||
|
||||
onMounted(() => {
|
||||
getPOTTodosById();
|
||||
getPOTById();
|
||||
triggerBackendCallsWithDelay(getProductionOrderTemplates);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -434,53 +49,25 @@ export default {
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
justify-content: center;
|
||||
align-self: stretch;
|
||||
width: 100%;
|
||||
padding: 1.25rem 1.875rem;
|
||||
gap: 1.25rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
.div-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
.div-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.select-darkmode {
|
||||
border: none;
|
||||
color: white;
|
||||
background: #212121;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.select-lightmode {
|
||||
border: none;
|
||||
color: black;
|
||||
background: #EBEBEB;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
@ -538,16 +125,6 @@ th {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.template-checklist-information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.Step {
|
||||
width: 8%;
|
||||
}
|
||||
@ -586,7 +163,6 @@ th {
|
||||
|
||||
.Comments {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -607,144 +183,4 @@ th {
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.editPOTTodos-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 0.825rem 0.7rem;
|
||||
width: 4%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
|
||||
.savePOTTodos-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 10rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.saveNewPOT-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.deletePOTTodos-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 15.8rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deleteLastPOTTodos-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 2rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
.editPOTTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
margin-left: 15rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.savePOTTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 10rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deletePOTTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 15.8rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deleteLastPOTTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 2rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.saveNewPOT-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.deletePOTTodos-darkmode:hover,
|
||||
.deleteLastPOTTodos-darkmode:hover,
|
||||
|
||||
.savePOTTodos-darkmode:hover,
|
||||
.editPOTTodos-darkmode:hover,
|
||||
.saveNewPOT-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.deletePOTTodos-lightmode:hover,
|
||||
.deleteLastPOTTodos-lightmode:hover,
|
||||
|
||||
.savePOTTodos-lightmode:hover,
|
||||
.editPOTTodos-lightmode:hover,
|
||||
.saveNewPOT-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#saveNewPOT {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#editPOTTodos {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
@ -1,750 +0,0 @@
|
||||
<template>
|
||||
<section v-if="!addBool"
|
||||
:class="['template-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
|
||||
<table class="data-table" id="template-checklist">
|
||||
<tbody>
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
Step</th>
|
||||
<th
|
||||
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
Asset</th>
|
||||
<th
|
||||
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
Task</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr v-for="todo in mvtTodos" :key="todo.primaryID"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
{{ todo.rowID }}
|
||||
</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
{{ todo.asset }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
<select id="customersDropDownChosenCI" v-model="todo.asset" @change="updateMVTTodo(todo)"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItemList" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td v-if="!editable"
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
{{ todo.task }}</td>
|
||||
<td v-if="editable"
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
<input type="text" v-model="todo.task" @change="updateMVTTodo(todo)"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ todo.commets
|
||||
}}</td>
|
||||
<td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
|
||||
v-model="todo.commets" @change="updateMVTTodo(todo)"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
|
||||
:class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteMvtTodos-lightmode']"
|
||||
@click="deleteMVTTodo(todo.primaryID)">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
{{ newStepTodo }}
|
||||
</td>
|
||||
<td
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
<select id="customersDropDownChosenCI" v-model="newAssetTodo"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItemList" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
<input type="text" v-model="newTaskTodo"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"><input type="text"
|
||||
v-model="newCommentsTodo"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
|
||||
:class="[darkMode ? 'saveMvtTodos-darkmode' : 'saveMvtTodos-lightmode']"
|
||||
@click="addMVTTodo()">Save</button> <button
|
||||
:class="[darkMode ? 'deleteLastMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
|
||||
@click="deleteNewRow()">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section v-if="editable && !addBool" id="editMvtTodos">
|
||||
<button :class="[darkMode ? 'editMvtTodos-darkmode' : 'editMvtTodos-lightmode']"
|
||||
@click="addChecklistRow()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool"
|
||||
:class="['template-checklist-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
|
||||
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklist:</div>
|
||||
<table class="data-table" id="template-checklist">
|
||||
<tbody>
|
||||
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
|
||||
<th
|
||||
:class="['Step', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
Step</th>
|
||||
<th
|
||||
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
Asset</th>
|
||||
<th
|
||||
:class="['Task', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
Task</th>
|
||||
<th :class="['Comments', darkMode ? 'th-darkmode' : 'th-lightmode']">Comments</th>
|
||||
</tr>
|
||||
<tr v-for="(newT, index) in newTodos" :key="index"
|
||||
:class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
|
||||
<td
|
||||
:class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
|
||||
{{ newT.rowID }}
|
||||
</td>
|
||||
<td
|
||||
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
|
||||
<select id="customersDropDownChosenCI" v-model="newT.asset"
|
||||
:class="[darkMode ? 'select-darkmode' : 'select-lightmode']">
|
||||
<option v-for="ci in configItemList" :key="ci.primaryID">
|
||||
{{ ci.assetName }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td
|
||||
:class="['Task', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Task-darkmode' : 'Task-lightmode']">
|
||||
<input type="text" v-model="newT.task"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
|
||||
</td>
|
||||
<td :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
|
||||
v-model="newT.comments"
|
||||
:class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
|
||||
:class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteLastMvtTodos-lightmode']"
|
||||
@click="deleteMVTTodoFromNewTodos(index)">-</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section v-if="addBool" id="editMvtTodos">
|
||||
<button :class="[darkMode ? 'editMvtTodos-darkmode' : 'editMvtTodos-lightmode']"
|
||||
@click="addRowForNewMVT()">+</button>
|
||||
</section>
|
||||
<section v-if="addBool" id="saveNewMVT">
|
||||
<button :class="[darkMode ? 'saveNewMVT-darkmode' : 'saveNewMVT-lightmode']" @click="addMVT()">Safe</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import Axios from '../axios.config.js';
|
||||
import clientsideConfig from '../../clientsideConfig.js';
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const addBool = computed(() => store.state.new);
|
||||
const editable = computed(() => store.state.editable);
|
||||
|
||||
const newNameMVT = computed(() => store.state.newNameMVT);
|
||||
const newCustomerIDMVT = computed(() => store.state.newCustomerIDMVT);
|
||||
const newCustomerMVT = computed(() => store.state.newCustomerMVT);
|
||||
const newLastViewMVT = computed(() => store.state.newLastViewMVT);
|
||||
const newUserMVT = computed(() => store.state.newUserMVT);
|
||||
const newTypeMVT = computed(() => store.state.newTypeMVT);
|
||||
const newNotesMVT = computed(() => store.state.newNotesMVT);
|
||||
const newStepTodo = computed(() => mvtTodos.value.length);
|
||||
const chosenMVTId = computed(() => store.state.chosenMVTId);
|
||||
const clientChanged = computed(() => store.state.clientChanged);
|
||||
const changedClientId = computed(() => store.state.changedClientId);
|
||||
|
||||
const darkMode = ref(true)
|
||||
const addRow = ref(false);
|
||||
const configItemList = ref([]);
|
||||
const maintenanceVisitTemplates = ref([]);
|
||||
const mvtTodos = ref([])
|
||||
const MVT = ref({})
|
||||
const newAssetTodo = ref('');
|
||||
const newTaskTodo = ref('');
|
||||
const newCommentsTodo = ref('');
|
||||
const newTodos = reactive([]);
|
||||
const newRowId = computed(() => newTodos.length)
|
||||
|
||||
// delete new todo row
|
||||
const deleteNewRow = () => {
|
||||
newAssetTodo.value = '';
|
||||
newTaskTodo.value = '';
|
||||
newCommentsTodo.value = '';
|
||||
addRow.value = false;
|
||||
}
|
||||
|
||||
const deleteMVTTodoFromNewTodos = (index) => {
|
||||
newTodos.splice(index, 1);
|
||||
newTodos.forEach((todo, i) => {
|
||||
todo.rowID = i
|
||||
})
|
||||
}
|
||||
|
||||
// add new maintenance visit template
|
||||
const addMVT = async () => {
|
||||
// check if all input data is valid
|
||||
if (newNameMVT.value.trim() === "") {
|
||||
alert("Please add a maintenance visit template name!");
|
||||
return;
|
||||
} else {
|
||||
var counter = 0;
|
||||
if (!(maintenanceVisitTemplates.value.length == null)) {
|
||||
// check if maintenance visit template name already exists
|
||||
maintenanceVisitTemplates.value.forEach(MVT => {
|
||||
if (MVT.name === newNameMVT.value) {
|
||||
counter += 1;
|
||||
}
|
||||
});
|
||||
if (counter == 1) {
|
||||
alert("This maintenance visit template name already exists. Please choose an unique maintenance visit template name or modify respectively delete the old one!");
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (newCustomerMVT.value.length === 0) {
|
||||
alert("Please choose a client!");
|
||||
return;
|
||||
}
|
||||
let allFine = true;
|
||||
newTodos.forEach(todo => {
|
||||
if (todo.asset.length === 0) {
|
||||
alert(`Please choose a config item for all todos.`);
|
||||
allFine = false
|
||||
}
|
||||
})
|
||||
if (!allFine) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addMVT`,
|
||||
{
|
||||
name: newNameMVT.value,
|
||||
customerID: newCustomerIDMVT.value,
|
||||
customer: newCustomerMVT.value,
|
||||
lastView: newLastViewMVT.value,
|
||||
user: newUserMVT.value,
|
||||
type: newTypeMVT.value,
|
||||
notes: newNotesMVT.value,
|
||||
});
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToTemplatelist');
|
||||
newTodos.forEach(async todo => {
|
||||
try {
|
||||
const res = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoMVT`,
|
||||
{
|
||||
templateID: response.data,
|
||||
rowID: todo.rowID,
|
||||
asset: todo.asset,
|
||||
task: todo.task,
|
||||
comment: todo.comments,
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
})
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new row of todo for the new MVT
|
||||
const addRowForNewMVT = async () => {
|
||||
if (newCustomerMVT.value.length === 0) {
|
||||
alert("Please choose a client first!");
|
||||
return;
|
||||
}
|
||||
await getConfigItemsFromClient();
|
||||
newTodos.push({
|
||||
templateID: chosenMVTId.value,
|
||||
rowID: newRowId.value,
|
||||
asset: '',
|
||||
task: '',
|
||||
comments: ''
|
||||
});
|
||||
}
|
||||
|
||||
//update data
|
||||
const updateMVTTodo = async (todo) => {
|
||||
if (todo.asset.length === 0) {
|
||||
alert(`Please add the missing config item in row ${todo.rowID}!`);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await Axios.put(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateMVTTodo`,
|
||||
{
|
||||
primaryID: todo.primaryID,
|
||||
templateID: todo.templateID,
|
||||
rowID: todo.rowID,
|
||||
asset: todo.asset,
|
||||
task: todo.task,
|
||||
comments: todo.commets,
|
||||
}
|
||||
);
|
||||
await getMVTById();
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new maintenance visit template todo
|
||||
const addMVTTodo = async () => {
|
||||
// check if all input data is valid
|
||||
if (newAssetTodo.value.length === 0) {
|
||||
alert("Please choose an asset for the new todo!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await Axios.post(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/addTodoMVT`,
|
||||
{
|
||||
templateID: chosenMVTId.value,
|
||||
rowID: newStepTodo.value,
|
||||
asset: newAssetTodo.value,
|
||||
task: newTaskTodo.value,
|
||||
comment: newCommentsTodo.value,
|
||||
});
|
||||
addRow.value = false;
|
||||
await getMvtTodosById();
|
||||
newAssetTodo.value = '';
|
||||
newTaskTodo.value = '';
|
||||
newCommentsTodo.value = '';
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// add new row for the template checklist
|
||||
const addChecklistRow = async () => {
|
||||
await getConfigItemsFromClient();
|
||||
if (addRow.value) {
|
||||
alert('Please confirm the last added row first.')
|
||||
return
|
||||
}
|
||||
addRow.value = true
|
||||
}
|
||||
|
||||
//get all maintenance visit templates
|
||||
const getMaintenanceVisitTemplates = async () => {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllMaintenanceVisitTemplates`);
|
||||
maintenanceVisitTemplates.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
|
||||
// include delay to avoid 503 error
|
||||
const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
|
||||
setTimeout(() => {
|
||||
fetchDataFunc();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// get maintenance visit template todos from id
|
||||
const getMvtTodosById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getTodosMaintenanceVisitTemplate/${chosenMVTId.value}`
|
||||
);
|
||||
mvtTodos.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//get all config items from the selected client
|
||||
const getConfigItemsFromClient = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${MVT.value.customerID}`);
|
||||
configItemList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getCIFromClient/${changedClientId.value}`);
|
||||
configItemList.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
if (clientChanged.value) {
|
||||
store.commit('toggleClientChanged');
|
||||
}
|
||||
}
|
||||
|
||||
// get maintenance visit template from id
|
||||
const getMVTById = async () => {
|
||||
if (!addBool.value) {
|
||||
try {
|
||||
const response = await Axios.get(
|
||||
`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getMaintenanceVisitTemplate/${chosenMVTId.value}`
|
||||
);
|
||||
MVT.value = response.data;
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
await getConfigItemsFromClient();
|
||||
}
|
||||
|
||||
const deleteMVTTodo = async (id) => {
|
||||
if (confirm("Do you really want to delete this maintenance visit template todo? It cannot be undone!")) {
|
||||
try {
|
||||
await Axios.delete(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/deleteMVTTodo/${id}`);
|
||||
} catch (err) {
|
||||
console.log(err.response.statusText);
|
||||
}
|
||||
}
|
||||
await getMvtTodosById();
|
||||
}
|
||||
|
||||
watch(clientChanged, getMVTById);
|
||||
|
||||
onMounted(() => {
|
||||
getMvtTodosById();
|
||||
getMVTById();
|
||||
triggerBackendCallsWithDelay(getMaintenanceVisitTemplates);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TemplateChecklist",
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0 0.625rem;
|
||||
border-radius: 0.3125rem;
|
||||
box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.75rem/250% Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.section-darkmode {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.section-lightmode {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.data-darkmode {
|
||||
background-color: #212121;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.data-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.select-darkmode {
|
||||
border: none;
|
||||
color: white;
|
||||
background: #212121;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.select-lightmode {
|
||||
border: none;
|
||||
color: black;
|
||||
background: #EBEBEB;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
|
||||
.input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
padding: 0 0.625rem;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 3.125rem;
|
||||
padding: 0.625rem;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.tr-head-darkmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-head-lightmode {
|
||||
border-top: none;
|
||||
border-bottom: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.tr-darkmode {
|
||||
border-top: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.tr-lightmode {
|
||||
border-top: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
height: 1.875rem;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
letter-spacing: 5%;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
th {
|
||||
font: 700 0.875rem/1.875rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.th-darkmode,
|
||||
.td-darkmode {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.th-lightmode,
|
||||
.td-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.template-checklist-information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
padding: 1.25rem 1.875rem;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.Step {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
.Step-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Step-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Asset {
|
||||
width: 22%;
|
||||
}
|
||||
|
||||
.Asset-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Asset-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Task {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.Task-darkmode {
|
||||
border-right: 0.0625rem solid #000000;
|
||||
}
|
||||
|
||||
.Task-lightmode {
|
||||
border-right: 0.0625rem solid #8e8e8e;
|
||||
}
|
||||
|
||||
.Comments {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 6.0625em;
|
||||
height: 1.875em;
|
||||
font-family: 'Overpass';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
line-height: 1.875em;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.editMvtTodos-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 0.825rem 0.7rem;
|
||||
width: 4%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
|
||||
.saveMvtTodos-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 10rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.saveNewMVT-darkmode {
|
||||
background: #2c2c2c;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.deleteMvtTodos-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 15.8rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deleteLastMvtTodos-darkmode {
|
||||
background: #212121;
|
||||
color: #fff;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 2rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
.editMvtTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
margin-left: 15rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.saveMvtTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 10rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deleteMvtTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 15.8rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.deleteLastMvtTodos-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
border-radius: 0.625rem;
|
||||
margin-left: 2rem;
|
||||
padding-left: 0.9rem;
|
||||
padding-right: 0.9rem;
|
||||
}
|
||||
|
||||
.saveNewMVT-lightmode {
|
||||
background: #EBEBEB;
|
||||
color: #212121;
|
||||
font: 400 0.875rem/1.875rem Overpass, sans-serif;
|
||||
border: none;
|
||||
padding: 1rem 1.875rem;
|
||||
width: 8%;
|
||||
border-radius: 0.625rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.deleteMvtTodos-darkmode:hover,
|
||||
.deleteLastMvtTodos-darkmode:hover,
|
||||
|
||||
.saveMvtTodos-darkmode:hover,
|
||||
.editMvtTodos-darkmode:hover,
|
||||
.saveNewMVT-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.deleteMvtTodos-lightmode:hover,
|
||||
.deleteLastMvtTodos-lightmode:hover,
|
||||
|
||||
.saveMvtTodos-lightmode:hover,
|
||||
.editMvtTodos-lightmode:hover,
|
||||
.saveNewMVT-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#saveNewMVT {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#editMvtTodos {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
39
composables/UserObject.ts
Normal file
39
composables/UserObject.ts
Normal file
@ -0,0 +1,39 @@
|
||||
export var UserObjectDefinition: {
|
||||
id: string;
|
||||
username: string;
|
||||
password: string;
|
||||
registered: string;
|
||||
lastLogin: string;
|
||||
fullName: string;
|
||||
email: string;
|
||||
phonenumber: string;
|
||||
address: string;
|
||||
city: string;
|
||||
postcode: string;
|
||||
adminBool: boolean;
|
||||
technician1Bool: boolean;
|
||||
technician2Bool: boolean;
|
||||
technicianMonitoringBool: boolean;
|
||||
merchantBool: boolean;
|
||||
internBool: boolean;
|
||||
}
|
||||
|
||||
export interface UserObject {
|
||||
id: string;
|
||||
username: string;
|
||||
password: string;
|
||||
registered: string;
|
||||
lastLogin: string;
|
||||
fullName: string;
|
||||
email: string;
|
||||
phonenumber: string;
|
||||
address: string;
|
||||
city: string;
|
||||
postcode: string;
|
||||
adminBool: boolean;
|
||||
technician1Bool: boolean;
|
||||
technician2Bool: boolean;
|
||||
technicianMonitoringBool: boolean;
|
||||
merchantBool: boolean;
|
||||
internBool: boolean;
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
<mxfile host="Electron" modified="2024-02-14T10:28:35.536Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="_zOGEdVgp7g5JHBy-mYE" version="22.0.3" type="device" pages="2">
|
||||
<mxfile host="Electron" modified="2024-02-01T15:29:10.628Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="R4sGFqNy6FSLZX5LoMO_" version="22.0.3" type="device" pages="2">
|
||||
<diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
|
||||
<mxGraphModel dx="393" dy="2849" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
|
||||
<mxGraphModel dx="246" dy="2876" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
@ -62,7 +62,7 @@
|
||||
<mxGeometry y="240" width="140" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-29" value="changeDB" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
|
||||
<mxGeometry x="75" y="-560" width="140" height="870" as="geometry" />
|
||||
<mxGeometry x="75" y="-560" width="140" height="840" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-67" value="primaryID*" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxGeometry y="30" width="140" height="30" as="geometry" />
|
||||
@ -130,23 +130,20 @@
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-63" value="version" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxGeometry y="660" width="140" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="-qW6OXXOOqjT1X6LnSAE-1" value="license" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxCell id="qbUp6gtjYndA0fy5zK6_-1" value="networkBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxGeometry y="690" width="140" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="qbUp6gtjYndA0fy5zK6_-1" value="networkBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-53" value="IPv4" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxGeometry y="720" width="140" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-53" value="IPv4" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-56" value="IPv6" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxGeometry y="750" width="140" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-56" value="IPv6" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-54" value="MAC" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxGeometry y="780" width="140" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-54" value="MAC" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxGeometry y="810" width="140" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-55" value="subnetmask" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="DauqCNUrC7Z9yIe88X-r-29" vertex="1">
|
||||
<mxGeometry y="840" width="140" height="30" as="geometry" />
|
||||
<mxGeometry y="810" width="140" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="DauqCNUrC7Z9yIe88X-r-33" value="productionOrders" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#009900;" parent="1" vertex="1">
|
||||
<mxGeometry x="920" y="-85" width="140" height="450" as="geometry" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<mxfile host="Electron" modified="2024-02-27T19:18:30.556Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="pTIMz7977P7LLgTl7RJZ" version="22.0.3" type="device" pages="2">
|
||||
<mxfile host="Electron" modified="2024-02-14T10:28:35.536Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="_zOGEdVgp7g5JHBy-mYE" version="22.0.3" type="device" pages="2">
|
||||
<diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
|
||||
<mxGraphModel dx="395" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
|
||||
<mxGraphModel dx="393" dy="2849" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
@ -580,7 +580,7 @@
|
||||
<mxCell id="WukdXvazNq34soQIU5Al-108" value="task" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-103" vertex="1">
|
||||
<mxGeometry y="150" width="140" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="WukdXvazNq34soQIU5Al-109" value="comments" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-103" vertex="1">
|
||||
<mxCell id="WukdXvazNq34soQIU5Al-109" value="comment" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="WukdXvazNq34soQIU5Al-103" vertex="1">
|
||||
<mxGeometry y="180" width="140" height="30" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="WukdXvazNq34soQIU5Al-128" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="WukdXvazNq34soQIU5Al-126" target="DauqCNUrC7Z9yIe88X-r-22" edge="1">
|
||||
|
||||
@ -1,16 +1,12 @@
|
||||
<template>
|
||||
<aside
|
||||
:class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
|
||||
@click="toggleActionbar">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Indicator-Icon-Opened.svg" />
|
||||
<aside :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="toggleActionbar">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
|
||||
</div>
|
||||
<nav class="actions">
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search" @click="toggleSearched">
|
||||
<div class="icon" id="search-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Search-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Search-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
|
||||
@ -18,8 +14,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter" @click="toggleFiltered">
|
||||
<div class="icon" id="filter-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Filter-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Filter-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
|
||||
@ -27,8 +22,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
|
||||
<div class="icon" id="instances-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Instances-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Instances-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
|
||||
@ -36,8 +30,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
|
||||
<div class="icon" id="attachments-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Attachments-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Attachments-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
|
||||
@ -45,8 +38,7 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
|
||||
<div class="icon" id="sell-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Sell-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Sell-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
|
||||
@ -54,17 +46,15 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
|
||||
<div class="icon" id="archive-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Archive-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Archive-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="addAsset">
|
||||
<div class="icon" id="new-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Add-New-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Add-New-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
|
||||
@ -72,17 +62,15 @@
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit" @click="toggleEditable">
|
||||
<div class="icon" id="edit-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Edit-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Edit-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
|
||||
</Transition>
|
||||
</button>
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteFunc">
|
||||
<button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete" @click="deleteAsset">
|
||||
<div class="icon" id="delete-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
|
||||
src="../icons/actionbar-icons/Delete-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/actionbar-icons/Delete-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
|
||||
@ -102,23 +90,23 @@ const isExpanded = ref(true)
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const toggleEditable = () => {
|
||||
store.commit('toggleEditable');
|
||||
store.commit('toggleEditableAsset');
|
||||
};
|
||||
const deleteFunc = () => {
|
||||
store.commit('doDelete');
|
||||
const deleteAsset = () => {
|
||||
store.commit('doDeleteAsset');
|
||||
};
|
||||
|
||||
const toggleActionbar = () => {
|
||||
isExpanded.value = !isExpanded.value;
|
||||
};
|
||||
const toggleFiltered = () => {
|
||||
store.commit('toggleFiltered');
|
||||
store.commit('toggleFilteredAsset');
|
||||
};
|
||||
const toggleSearched = () => {
|
||||
store.commit('toggleSearchable');
|
||||
store.commit('toggleAssetSearchable');
|
||||
};
|
||||
const add = () => {
|
||||
store.commit('add');
|
||||
const addAsset = () => {
|
||||
store.commit('addNewAsset');
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -141,7 +129,7 @@ aside.actionbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
top: 3.75rem;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
inline-size: fit-content;
|
||||
@ -153,21 +141,17 @@ aside.actionbar {
|
||||
gap: 1.25rem;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.actionbar-darkmode {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
|
||||
.actionbar-lightmode {
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
aside.is-expanded {
|
||||
animation: expand 0.5s linear both;
|
||||
}
|
||||
|
||||
aside.is-not-expanded {
|
||||
animation: contract 0.5s linear both;
|
||||
}
|
||||
@ -197,30 +181,16 @@ button {
|
||||
transition: 0.2s ease-in-out;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.button-darkmode {
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
|
||||
.button-lightmode {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.button-darkmode { background-color: #2C2C2C; }
|
||||
.button-lightmode { background-color: #FFFFFF; }
|
||||
|
||||
.button-darkmode:hover,
|
||||
.indicator-darkmode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
.indicator-darkmode:hover { background-color: #444444; }
|
||||
|
||||
.button-lightmode:hover,
|
||||
.indicator-lightmode:hover {
|
||||
background-color: #ACACAC;
|
||||
cursor: pointer;
|
||||
}
|
||||
.indicator-lightmode:hover { background-color: #ACACAC; }
|
||||
|
||||
.is-not-expanded>button {
|
||||
align-self: center;
|
||||
}
|
||||
.is-not-expanded>button { align-self: center; }
|
||||
|
||||
|
||||
.icon {
|
||||
@ -232,7 +202,6 @@ button {
|
||||
justify-content: center;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.is-not-expanded .icon {
|
||||
align-self: center;
|
||||
}
|
||||
@ -243,10 +212,7 @@ button {
|
||||
border-radius: 0.3125rem;
|
||||
transition: 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.is-not-expanded #indicator-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.is-not-expanded #indicator-icon { transform: rotate(180deg); }
|
||||
|
||||
|
||||
img {
|
||||
@ -256,14 +222,8 @@ img {
|
||||
object-position: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.img-darkmode {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
#indicator-icon>img {
|
||||
height: 1.25rem;
|
||||
}
|
||||
.img-darkmode { filter: invert(100%); }
|
||||
#indicator-icon>img { height: 1.25rem; }
|
||||
|
||||
|
||||
.label {
|
||||
@ -275,19 +235,12 @@ img {
|
||||
white-space: nowrap;
|
||||
font: 400 0.875rem/1.25rem Overpass, sans-serif;
|
||||
}
|
||||
|
||||
.label-darkmode {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.label-lightmode {
|
||||
color: #000000;
|
||||
}
|
||||
.label-darkmode { color: #FFFFFF; }
|
||||
.label-lightmode { color: #000000; }
|
||||
|
||||
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -357,4 +310,5 @@ img {
|
||||
max-width: 0;
|
||||
max-inline-size: 0;
|
||||
}
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
@ -2,17 +2,17 @@
|
||||
<aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
|
||||
<div class="toggleNavbar">
|
||||
<div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/Back-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/Back-Icon.svg" />
|
||||
</div>
|
||||
<div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="ToggleSidebar">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="menus">
|
||||
<nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
|
||||
<router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
|
||||
<div class="icon" id="home-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Home-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Home-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
|
||||
@ -20,9 +20,9 @@
|
||||
</router-link>
|
||||
</nav>
|
||||
<nav id="site-menu">
|
||||
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultMasterChecklistPage()" id="checklists-button">
|
||||
<router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="checklists-button">
|
||||
<div class="icon" id="checklists-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Checklists-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Checklists-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
|
||||
@ -30,15 +30,15 @@
|
||||
</router-link>
|
||||
<nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()" id="assets-button">
|
||||
<div class="icon" id="assets-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Assets-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Assets-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
|
||||
</Transition>
|
||||
</nuxt-link>
|
||||
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()" id="solutions-button">
|
||||
<router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
|
||||
<div class="icon" id="solutions-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Solutions-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Solutions-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
|
||||
@ -46,7 +46,7 @@
|
||||
</router-link>
|
||||
<router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="accounting-button">
|
||||
<div class="icon" id="accounting-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Accounting-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Accounting-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
|
||||
@ -54,10 +54,10 @@
|
||||
</router-link>
|
||||
<router-link to="/clients" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="clients-button">
|
||||
<div class="icon" id="clients-icon">
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="../icons/navbar-icons/Clients-Icon.svg" />
|
||||
<img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Clients-Icon.svg" />
|
||||
</div>
|
||||
<Transition name="fade">
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customers</pre>
|
||||
<pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Clients</pre>
|
||||
</Transition>
|
||||
</router-link>
|
||||
</nav>
|
||||
@ -77,20 +77,10 @@ const isExpanded = ref(true)
|
||||
// get accesss to the store
|
||||
const store = useStore()
|
||||
const defaultAssetPage = () => {
|
||||
store.commit('resetStore');
|
||||
store.commit('resetAssetStore');
|
||||
store.commit('changeToAssetlist');
|
||||
};
|
||||
|
||||
const defaultMasterChecklistPage = () => {
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToTemplatelist')
|
||||
}
|
||||
|
||||
const defaultSolutionPage = () => {
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToSolutionlist')
|
||||
}
|
||||
|
||||
const ToggleSidebar = () => {
|
||||
isExpanded.value = !isExpanded.value;
|
||||
};
|
||||
@ -113,7 +103,7 @@ aside.navbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
top: 3.75rem;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
inline-size: fit-content;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
|
||||
<img id="header-logo" loading="lazy" src="../tüit-logo.svg.png" />
|
||||
<img id="header-logo" loading="lazy" src="/tüit-logo.svg.png" />
|
||||
<div class="profile">
|
||||
<div :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']">username</div>
|
||||
<pre :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']" id='uname'></pre>
|
||||
<div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
|
||||
<img id="picture" loading="lazy" src="" />
|
||||
</div>
|
||||
@ -12,19 +12,59 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import { useAuthStore } from '~/store/auth';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
//const auth = ref();
|
||||
const username = ref('username');
|
||||
|
||||
onMounted(() => {
|
||||
//auth.value = useAuthStore();
|
||||
//username.value = auth.value.username;
|
||||
try {
|
||||
username.value = useAuthStore().username;
|
||||
} finally {
|
||||
document.getElementById('uname').innerHTML = username;
|
||||
}
|
||||
});
|
||||
|
||||
onUpdated(() => {
|
||||
try {
|
||||
username.value = useAuthStore().username;
|
||||
} finally {
|
||||
document.getElementById('uname').innerHTML = username;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
import { useAuthStore } from '~/store/auth';
|
||||
|
||||
export default {
|
||||
name: "PageHeader",
|
||||
/*mounted() {
|
||||
try {
|
||||
const auth = useAuthStore();
|
||||
const username = auth.username;
|
||||
document.getElementById('uname').innerHTML = username;
|
||||
} catch {
|
||||
document.getElementById('uname').innerHTML = 'username'
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
const auth = useAuthStore();
|
||||
const username = auth.username;
|
||||
document.getElementById('uname').innerHTML = username;
|
||||
},*/
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@ -36,28 +76,28 @@ header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 4.375rem;
|
||||
height: 3.125rem;
|
||||
align-self: stretch;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.625rem 1.25rem;
|
||||
padding: 0.375rem 1.875rem;
|
||||
}
|
||||
|
||||
.header-darkmode {
|
||||
background-color: #212121;
|
||||
border-bottom: 0.125em solid #000;
|
||||
border-bottom: 0.125em solid #000000;
|
||||
}
|
||||
|
||||
.header-lightmode {
|
||||
background-color: #EBEBEB;
|
||||
border-bottom: 0.125em solid #8e8e8e61;
|
||||
background-color: #ebebeb;
|
||||
border-bottom: 0.125em solid #8e8e8e;
|
||||
}
|
||||
|
||||
#header-logo {
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
width: 5rem;
|
||||
height: 2.5rem;
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
@ -68,37 +108,36 @@ header {
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 0.625rem;
|
||||
padding: 0 0.625rem;
|
||||
padding: 0 0.375rem;
|
||||
}
|
||||
|
||||
.username {
|
||||
align-self: center;
|
||||
margin: auto 0;
|
||||
text-align: right;
|
||||
font: 200 0.875rem Overpass, sans-serif;
|
||||
letter-spacing: 5%;
|
||||
font: 200 0.75rem/1.25rem Overpass, sans-serif;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
.username-darkmode {
|
||||
color: #fff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.username-lightmode {
|
||||
color: #000;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.picture {
|
||||
display: flex;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.picture-darkmode {
|
||||
background-color: #fff;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.picture-lightmode {
|
||||
background-color: #000;
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
24
nuxt-app/.gitignore
vendored
Normal file
24
nuxt-app/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
75
nuxt-app/README.md
Normal file
75
nuxt-app/README.md
Normal file
@ -0,0 +1,75 @@
|
||||
# Nuxt 3 Minimal Starter
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
|
||||
## Setup
|
||||
|
||||
Make sure to install the dependencies:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm install
|
||||
|
||||
# pnpm
|
||||
pnpm install
|
||||
|
||||
# yarn
|
||||
yarn install
|
||||
|
||||
# bun
|
||||
bun install
|
||||
```
|
||||
|
||||
## Development Server
|
||||
|
||||
Start the development server on `http://localhost:3000`:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run dev
|
||||
|
||||
# pnpm
|
||||
pnpm run dev
|
||||
|
||||
# yarn
|
||||
yarn dev
|
||||
|
||||
# bun
|
||||
bun run dev
|
||||
```
|
||||
|
||||
## Production
|
||||
|
||||
Build the application for production:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run build
|
||||
|
||||
# pnpm
|
||||
pnpm run build
|
||||
|
||||
# yarn
|
||||
yarn build
|
||||
|
||||
# bun
|
||||
bun run build
|
||||
```
|
||||
|
||||
Locally preview production build:
|
||||
|
||||
```bash
|
||||
# npm
|
||||
npm run preview
|
||||
|
||||
# pnpm
|
||||
pnpm run preview
|
||||
|
||||
# yarn
|
||||
yarn preview
|
||||
|
||||
# bun
|
||||
bun run preview
|
||||
```
|
||||
|
||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
||||
5
nuxt-app/app.vue
Normal file
5
nuxt-app/app.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtWelcome />
|
||||
</div>
|
||||
</template>
|
||||
4
nuxt-app/nuxt.config.ts
Normal file
4
nuxt-app/nuxt.config.ts
Normal file
@ -0,0 +1,4 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
devtools: { enabled: true }
|
||||
})
|
||||
9593
nuxt-app/package-lock.json
generated
Normal file
9593
nuxt-app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
17
nuxt-app/package.json
Normal file
17
nuxt-app/package.json
Normal file
@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "nuxt-app",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"nuxt": "^3.10.3",
|
||||
"vue": "^3.4.19",
|
||||
"vue-router": "^4.3.0"
|
||||
}
|
||||
}
|
||||
BIN
nuxt-app/public/favicon.ico
Normal file
BIN
nuxt-app/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
3
nuxt-app/server/tsconfig.json
Normal file
3
nuxt-app/server/tsconfig.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "../.nuxt/tsconfig.server.json"
|
||||
}
|
||||
4
nuxt-app/tsconfig.json
Normal file
4
nuxt-app/tsconfig.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
@ -1,10 +1,54 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
import type {
|
||||
NuxtPage
|
||||
} from 'nuxt/schema'
|
||||
import type { NuxtPage } from 'nuxt/schema'
|
||||
import clientsideConfig from './clientsideConfig'
|
||||
import { UserObjectDefinition } from './composables/UserObject'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
devtools: { enabled: true },
|
||||
modules: [
|
||||
'@pinia/nuxt',
|
||||
'@sidebase/nuxt-auth',
|
||||
],
|
||||
auth: {
|
||||
//baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/.output/server/chunks/routes/api/auth`,
|
||||
computed: {
|
||||
origin: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||
//pathname: '/server/chunks/routes/api/auth/',
|
||||
//fullBaseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
|
||||
},
|
||||
//baseUrl: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api/auth/`,
|
||||
provider: {
|
||||
type: 'refresh',
|
||||
endpoints: {
|
||||
signIn: { path: '/login', method: 'post' },
|
||||
signout: false,
|
||||
signUp: { path: '/signup', method: 'post' },
|
||||
getSession: { path: '/session', method: 'get' },
|
||||
refresh: { path: '/refresh', method: 'post' }
|
||||
},
|
||||
token: {
|
||||
signInResponseTokenPointer: '/token/authToken',
|
||||
maxAgeInSeconds: 300, // 5 min
|
||||
sameSiteAttribute: 'lax'
|
||||
},
|
||||
refreshToken: {
|
||||
signInResponseRefreshTokenPointer: '/token/refreshToken',
|
||||
maxAgeInSeconds: 604800, // 7 days
|
||||
sameSiteAttribute: 'lax'
|
||||
},
|
||||
// TODO: define UserObject
|
||||
//sessionDataType: UserObjectDefinition,
|
||||
},
|
||||
session: {
|
||||
enableRefreshPeriodically: false,
|
||||
enableRefreshOnWindowFocus: true,
|
||||
},
|
||||
globalAppMiddleware: true,
|
||||
},
|
||||
/*buildModules: [
|
||||
//'@nuxtjs/composition-api/module',
|
||||
['@pinia/nuxt', { disableVuex: false }],
|
||||
],*/
|
||||
devServer: {
|
||||
https: {
|
||||
key: './certs/privkey.pem',
|
||||
@ -19,6 +63,19 @@ export default defineNuxtConfig({
|
||||
},
|
||||
}
|
||||
},
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
apiBase: `https://${clientsideConfig.url}:${clientsideConfig.port}/server/chunks/routes/api`,
|
||||
axios: {
|
||||
browserBaseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||
},
|
||||
},
|
||||
private: {
|
||||
axios: {
|
||||
baseURL: `https://${clientsideConfig.url}:${clientsideConfig.port}/`,
|
||||
}
|
||||
}
|
||||
},
|
||||
// hooks: {
|
||||
// 'pages:extend'(pages) {
|
||||
// function setMiddleware(pages: NuxtPage[]) {
|
||||
|
||||
4664
package-lock.json
generated
4664
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@ -7,25 +7,37 @@
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
"prepare": "nuxt prepare",
|
||||
"cleanup": "nuxt cleanup"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/devtools": "latest",
|
||||
"nuxt": "^3.8.0",
|
||||
"@pinia/nuxt": "^0.5.1",
|
||||
"@sidebase/nuxt-auth": "^0.6.7",
|
||||
"nuxt": "^3.10.3",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.3.7",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxt/module-builder": "^0.5.5",
|
||||
"@types/jsonwebtoken": "^9.0.6",
|
||||
"@types/node": "^20.11.24",
|
||||
"@vueform/toggle": "^2.1.4",
|
||||
"axios": "^1.6.7",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"cors": "^2.8.5",
|
||||
"express": "^4.18.2",
|
||||
"h3": "^1.11.1",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"leading-trim": "^1.0.2",
|
||||
"mariadb": "^3.2.3",
|
||||
"nuxi": "^3.10.1",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"typescript": "^5.3.3",
|
||||
"uuid": "^9.0.1",
|
||||
"vite": "^5.1.0",
|
||||
"vue-tsc": "^2.0.5",
|
||||
"vuex": "^4.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<router-link to="/assets" class="button" id="assets-button" @click="defaultAssetPage()">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
|
||||
</router-link>
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch v-if="onAssetlist || onCustomerAssetlist" />
|
||||
@ -42,14 +40,10 @@ const onAsset = computed(() => store.state.onAsset);
|
||||
const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Assets'
|
||||
})
|
||||
|
||||
const defaultAssetPage = () => {
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToAssetlist')
|
||||
}
|
||||
|
||||
const darkMode = ref(true)
|
||||
</script>
|
||||
|
||||
@ -109,8 +103,4 @@ export default {
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@ -16,6 +16,7 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
@ -29,18 +30,19 @@ import ClientDepartment from '~/components/server/ClientDepartment.vue';
|
||||
import ClientDepartmentEmployeeList from '~/components/server/ClientDepartmentEmployeeList.vue';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Clients'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
// to render the right components
|
||||
const onCustomerlist = ref(true)
|
||||
const onCustomer = ref(true)
|
||||
const onEmployeelist = ref(true)
|
||||
const onEmployee = ref(true)
|
||||
const onDepartmentlist = ref(true)
|
||||
const onDepartment = ref(true)
|
||||
const onCustomer = ref(false)
|
||||
const onEmployeelist = ref(false)
|
||||
const onEmployee = ref(false)
|
||||
const onDepartmentlist = ref(false)
|
||||
const onDepartment = ref(false)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
@ -20,7 +20,8 @@ import Dashboard from "../components/Dashboard.vue";
|
||||
import QuickAccess from "../components/QuickAccess.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'empty'
|
||||
layout: 'empty',
|
||||
title: 'Home'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
import { ref } from 'vue';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Test'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
|
||||
|
||||
|
||||
<router-link to="/issues" class="button" id="issues-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
|
||||
<router-link to="/issueItems" class="button" id="issues-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue Items</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
@ -43,7 +43,8 @@ import IssueVariants from "../components/server/IssueVariants.vue";
|
||||
import IssueVariant from "../components/server/IssueVariant.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Issue Items'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
@ -56,7 +57,7 @@ const onIssueItemVariant = ref(false)
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "IssuePage",
|
||||
name: "IssueItemsPage",
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -20,8 +20,8 @@
|
||||
|
||||
|
||||
|
||||
<router-link to="/issues" class="button" id="issues-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
|
||||
<router-link to="/issueItems" class="button" id="issues-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue Items</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
@ -47,7 +47,8 @@ import OrderingInformation from "../components/server/OrderingInformation.vue";
|
||||
import Accounting from "../components/server/Accounting.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Issue Slips'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -16,7 +16,9 @@ import { ref } from 'vue';
|
||||
import LoginForm from "../components/LoginForm.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'empty'
|
||||
layout: 'empty',
|
||||
title: 'Login',
|
||||
auth: false,
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
|
||||
@click="defaultMasterChecklistPage()">
|
||||
<router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1>
|
||||
</router-link>
|
||||
|
||||
@ -21,21 +20,20 @@
|
||||
|
||||
|
||||
|
||||
<router-link to="/productionOrders" class="button" id="productionOrders-button"
|
||||
@click="defaultMasterChecklistPage()">
|
||||
<router-link to="/productionOrders" class="button" id="productionOrders-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch v-if="onTemplatelist || onCustomerTemplatelist" />
|
||||
<MaintenanceVisitsTemplateTable v-if="onTemplatelist" />
|
||||
<MaintenanceVisitsTemplateTableNoClient v-if="onCustomerTemplatelist" />
|
||||
<MaintenanceVisitsTemplate v-if="onTemplate" />
|
||||
<TemplateChecklistMVT v-if="onTemplate" />
|
||||
<TemplateSearch v-if="onInstancelist" />
|
||||
<MaintenanceVisitsInstanceTable v-if="onInstancelist" />
|
||||
<MaintenanceVisitsInstance v-if="onInstance" />
|
||||
<InstanceChecklist v-if="onInstance" />
|
||||
<ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
|
||||
<MaintenanceVisitsTemplateTable v-if="onTemplatelist"/>
|
||||
<MaintenanceVisitsTemplateTableNoClient v-if="onCustomerTemplatelist"/>
|
||||
<MaintenanceVisitsTemplate v-if="onTemplate"/>
|
||||
<TemplateChecklist v-if="onTemplate"/>
|
||||
<TemplateSearch v-if="onInstancelist"/>
|
||||
<MaintenanceVisitsInstanceTable v-if="onInstancelist"/>
|
||||
<MaintenanceVisitsInstance v-if="onInstance"/>
|
||||
<InstanceChecklist v-if="onInstance"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -48,31 +46,25 @@ import ClientSearch from "../components/ClientSearch.vue";
|
||||
import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
|
||||
import MaintenanceVisitsTemplateTableNoClient from "../components/server/MaintenanceVisitsTemplateTableNoClient.vue";
|
||||
import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
|
||||
import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue";
|
||||
import TemplateChecklist from "../components/server/TemplateChecklist.vue";
|
||||
import TemplateSearch from "../components/TemplateSearch.vue";
|
||||
import MaintenanceVisitsInstanceTable from "../components/server/MaintenanceVisitsInstanceTable.vue";
|
||||
import MaintenanceVisitsInstance from "../components/server/MaintenanceVisitsInstance.vue";
|
||||
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const onTemplatelist = computed(() => store.state.onTemplatelist);
|
||||
const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
|
||||
const onTemplate = computed(() => store.state.onTemplate);
|
||||
const onInstancelist = computed(() => store.state.onInstancelist);
|
||||
const onInstance = computed(() => store.state.onInstance);
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Maintenance Visits'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
const defaultMasterChecklistPage = () => {
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToTemplatelist')
|
||||
}
|
||||
// to render the right components
|
||||
const onTemplatelist = ref(true)
|
||||
const onCustomerTemplatelist = ref(false)
|
||||
const onTemplate = ref(false)
|
||||
const onInstancelist = ref(false)
|
||||
const onInstance = ref(false)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
|
||||
@click="defaultMasterChecklistPage">
|
||||
<router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
|
||||
</router-link>
|
||||
|
||||
@ -22,20 +21,19 @@
|
||||
|
||||
|
||||
<router-link to="/productionOrders" class="button" id="productionOrders-button">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name"
|
||||
@click="defaultMasterChecklistPage()">Production orders</h1>
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Production orders</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch v-if="onTemplatelist || onCustomerTemplatelist" />
|
||||
<ProductionOrdersTemplateTable v-if="onTemplatelist" />
|
||||
<ProductionOrdersTemplateTableNoClient v-if="onCustomerTemplatelist" />
|
||||
<ProductionOrdersTemplate v-if="onTemplate" />
|
||||
<TemplateChecklist v-if="onTemplate" />
|
||||
<TemplateSearch v-if="onInstancelist" />
|
||||
<ProductionOrdersInstanceTable v-if="onInstancelist" />
|
||||
<ProductionOrdersInstance v-if="onInstance" />
|
||||
<InstanceChecklist v-if="onInstance" />
|
||||
<ClientSearch v-if="onTemplatelist || onCustomerTemplatelist"/>
|
||||
<ProductionOrdersTemplateTable v-if="onTemplatelist"/>
|
||||
<ProductionOrdersTemplateTableNoClient v-if="onCustomerTemplatelist"/>
|
||||
<ProductionOrdersTemplate v-if="onTemplate"/>
|
||||
<TemplateChecklist v-if="onTemplate"/>
|
||||
<TemplateSearch v-if="onInstancelist"/>
|
||||
<ProductionOrdersInstanceTable v-if="onInstancelist"/>
|
||||
<ProductionOrdersInstance v-if="onInstance"/>
|
||||
<InstanceChecklist v-if="onInstance"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -53,26 +51,20 @@ import TemplateSearch from "../components/TemplateSearch.vue";
|
||||
import ProductionOrdersInstanceTable from "../components/server/ProductionOrdersInstanceTable.vue";
|
||||
import ProductionOrdersInstance from "../components/server/ProductionOrdersInstance.vue";
|
||||
import InstanceChecklist from "../components/server/InstanceChecklist.vue";
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const onTemplatelist = computed(() => store.state.onTemplatelist);
|
||||
const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
|
||||
const onTemplate = computed(() => store.state.onTemplate);
|
||||
const onInstancelist = computed(() => store.state.onInstancelist);
|
||||
const onInstance = computed(() => store.state.onInstance);
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Production Orders'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
const defaultMasterChecklistPage = () => {
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToTemplatelist')
|
||||
}
|
||||
// to render the right components
|
||||
const onTemplatelist = ref(true)
|
||||
const onCustomerTemplatelist = ref(false)
|
||||
const onTemplate = ref(false)
|
||||
const onInstancelist = ref(false)
|
||||
const onInstance = ref(false)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
@ -39,7 +39,8 @@ import UserAppearance from "../components/server/UserAppearance.vue";
|
||||
import UserRightsList from "../components/server/UserRightsList.vue";
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Settings'
|
||||
})
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
<template>
|
||||
<section id="content">
|
||||
<div id="content-header">
|
||||
<router-link to="/solutions" class="button" id="solutions-button" @click="defaultSolutionPage()">
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
|
||||
</router-link>
|
||||
<h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
|
||||
</div>
|
||||
<div id="content-body">
|
||||
<ClientSearch v-if="onSolutionlist || onCustomerSolutionlist" />
|
||||
<SolutionTable v-if="onSolutionlist" />
|
||||
<SolutionTableNoClient v-if="onCustomerSolutionlist" />
|
||||
<Solution v-if="onSolution" />
|
||||
<SolutionChecklist v-if="onSolution" />
|
||||
<ClientSearch v-if="onSolutionlist || onCustomerSolutionlist"/>
|
||||
<SolutionTable v-if="onSolutionlist"/>
|
||||
<SolutionTableNoClient v-if="onCustomerSolutionlist"/>
|
||||
<Solution v-if="onSolution"/>
|
||||
<SolutionChecklist v-if="onSolution"/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
@ -23,24 +22,18 @@ import SolutionTable from "../components/server/SolutionTable.vue";
|
||||
import SolutionTableNoClient from "../components/server/SolutionTableNoClient.vue";
|
||||
import Solution from "../components/server/Solution.vue";
|
||||
import SolutionChecklist from "../components/server/SolutionChecklist.vue";
|
||||
import { useStore } from 'vuex';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const store = useStore();
|
||||
const onSolutionlist = computed(() => store.state.onSolutionlist);
|
||||
const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist);
|
||||
const onSolution = computed(() => store.state.onSolution);
|
||||
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
layout: 'default',
|
||||
title: 'Solutions'
|
||||
})
|
||||
|
||||
const defaultSolutionPage = () => {
|
||||
store.commit('resetStore');
|
||||
store.commit('changeToSolutionlist')
|
||||
}
|
||||
|
||||
const darkMode = ref(true)
|
||||
|
||||
// to render the right components
|
||||
const onSolutionlist = ref(true)
|
||||
const onCustomerSolutionlist = ref(false)
|
||||
const onSolution = ref(false)
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -101,8 +94,4 @@ export default {
|
||||
margin-bottom: 0.625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
329
plugins/vuex.js
329
plugins/vuex.js
@ -3,20 +3,17 @@ import { createStore } from "vuex";
|
||||
const store = createStore({
|
||||
state() {
|
||||
return {
|
||||
editable: false,
|
||||
filtered: false,
|
||||
searchable: false,
|
||||
deleteBool: false,
|
||||
new: false,
|
||||
clientChanged: false,
|
||||
changedClientId: -1,
|
||||
filteredByClient: '',
|
||||
|
||||
assetEditable: false,
|
||||
assetFiltered: false,
|
||||
assetSearchable: false,
|
||||
deleteAsset: false,
|
||||
onAssetlist: true,
|
||||
onCustomerAssetlist: false,
|
||||
onAsset: false,
|
||||
onSolutionlistAsset: false,
|
||||
chosenAssetId: -1,
|
||||
filteredAssetbyClient: '',
|
||||
newAsset: false,
|
||||
newAssetName: '',
|
||||
newCustomerID: '',
|
||||
newCustomer: '',
|
||||
@ -39,77 +36,20 @@ const store = createStore({
|
||||
newSoftware: '',
|
||||
newVersion: '',
|
||||
newLicense: '',
|
||||
|
||||
onTemplatelist: true,
|
||||
onCustomerTemplatelist: false,
|
||||
onTemplate: false,
|
||||
onInstancelist: false,
|
||||
onInstance: false,
|
||||
|
||||
newNamePOT: '',
|
||||
newCustomerIDPOT: '',
|
||||
newCustomerPOT: '',
|
||||
newLastViewPOT: '',
|
||||
newUserPOT: '',
|
||||
newDescriptionPOT: '',
|
||||
newNotesPOT: '',
|
||||
chosenPOTId: -1,
|
||||
|
||||
newNameMVT: '',
|
||||
newCustomerIDMVT: '',
|
||||
newCustomerMVT: '',
|
||||
newLastViewMVT: '',
|
||||
newUserMVT: '',
|
||||
newTypeMVT: '',
|
||||
newNotesMVT: '',
|
||||
chosenMVTId: -1,
|
||||
|
||||
onSolutionlist: true,
|
||||
onCustomerSolutionlist: false,
|
||||
onSolution: false,
|
||||
chosenSolutionId: -1,
|
||||
newSolutionNameSol: '',
|
||||
newCustomerIDSol: '',
|
||||
newCustomerSol: '',
|
||||
newAssetNameSol: '',
|
||||
newTypeSol: '',
|
||||
newLastViewSol: '',
|
||||
newUserSol: '',
|
||||
newDescriptionSol: '',
|
||||
newNotesSol: '',
|
||||
};
|
||||
},
|
||||
mutations: {
|
||||
// functions to toggle with the actionbar
|
||||
toggleEditable(state) {
|
||||
state.editable = !state.editable
|
||||
toggleEditableAsset(state) {
|
||||
state.assetEditable = !state.assetEditable
|
||||
},
|
||||
toggleFiltered(state) {
|
||||
if (state.filtered == false) {
|
||||
state.filtered = true
|
||||
state.searchable = false
|
||||
toggleFilteredAsset(state) {
|
||||
if (state.assetFiltered == false) {
|
||||
state.assetFiltered = true
|
||||
state.assetSearchable = false
|
||||
} else {
|
||||
state.filtered = false
|
||||
state.assetFiltered = false
|
||||
}
|
||||
},
|
||||
toggleSearchable(state) {
|
||||
if (state.searchable == false) {
|
||||
state.searchable = true
|
||||
state.filtered = false
|
||||
} else {
|
||||
state.searchable = false
|
||||
}
|
||||
state.filteredByClient = ''
|
||||
},
|
||||
toggleClientChanged(state) {
|
||||
state.clientChanged = !state.clientChanged
|
||||
},
|
||||
toggleClientId(state, id) {
|
||||
state.changedClientId = id
|
||||
},
|
||||
|
||||
|
||||
// functions to change the asset pages
|
||||
changeToAssetlist(state) {
|
||||
state.onAssetlist = true
|
||||
state.onCustomerAssetlist = false
|
||||
@ -134,6 +74,40 @@ const store = createStore({
|
||||
state.onAsset = false
|
||||
state.onSolutionlistAsset = true
|
||||
},
|
||||
setChosenAsset(state, id) {
|
||||
state.chosenAssetId = id
|
||||
},
|
||||
resetAssetStore(state) {
|
||||
state.assetEditable = false
|
||||
state.assetFiltered = false
|
||||
state.assetSearchable = false
|
||||
state.deleteAsset = false
|
||||
state.chosenAssetId = -1
|
||||
state.filteredAssetbyClient = ''
|
||||
state.newAsset = false
|
||||
state.newAssetName = ''
|
||||
state.newCustomerID = ''
|
||||
state.newCustomer = ''
|
||||
state.newLocation = ''
|
||||
state.newRemoteLocation = ''
|
||||
state.newType = ''
|
||||
state.newDescription = ''
|
||||
state.newNotes = ''
|
||||
state.newState = ''
|
||||
state.newLastView = ''
|
||||
state.newUser = ''
|
||||
state.hardwareBool = false
|
||||
state.newModel = ''
|
||||
state.newSerialnumber = ''
|
||||
state.newCPU = ''
|
||||
state.newRAM = ''
|
||||
state.newStorageConfiguration = ''
|
||||
state.newMiscellaneous = ''
|
||||
state.softwareBool = false
|
||||
state.newSoftware = ''
|
||||
state.newVersion = ''
|
||||
state.newLicense = ''
|
||||
},
|
||||
|
||||
// functions to change the production order and maintenance visit pages
|
||||
changeToTemplatelist(state) {
|
||||
@ -164,32 +138,34 @@ const store = createStore({
|
||||
state.onInstancelist = true
|
||||
state.onInstance = false
|
||||
},
|
||||
changeToInstance(state) {
|
||||
state.onTemplatelist = false
|
||||
state.onCustomerTemplatelist = false
|
||||
state.onTemplate = false
|
||||
state.onInstancelist = false
|
||||
state.onInstance = true
|
||||
doDeleteAsset(state) {
|
||||
state.deleteAsset = true
|
||||
},
|
||||
|
||||
// functions to change the solution pages
|
||||
changeToSolutionlist(state) {
|
||||
state.onSolutionlist = true
|
||||
state.onCustomerSolutionlist = false
|
||||
state.onSolution = false
|
||||
undoDeleteAsset(state) {
|
||||
state.deleteAsset = false
|
||||
},
|
||||
changeToCustomerSolutionlist(state) {
|
||||
state.onSolutionlist = false
|
||||
state.onCustomerSolutionlist = true
|
||||
state.onSolution = false
|
||||
updateAssetFilterbyClient(state, client) {
|
||||
state.filteredAssetbyClient = client
|
||||
},
|
||||
changeToSolution(state) {
|
||||
state.onSolutionlist = false
|
||||
state.onCustomerSolutionlist = false
|
||||
state.onSolution = true
|
||||
toggleAssetSearchable(state) {
|
||||
if (state.assetSearchable == false) {
|
||||
state.assetSearchable = true
|
||||
state.assetFiltered = false
|
||||
} else {
|
||||
state.assetSearchable = false
|
||||
}
|
||||
state.filteredAssetbyClient = ''
|
||||
},
|
||||
addNewAsset(state) {
|
||||
state.newAsset = true
|
||||
state.assetEditable = false
|
||||
state.assetFiltered = false
|
||||
state.assetSearchable = false
|
||||
state.onAssetlist = false
|
||||
state.onCustomerAssetlist = false
|
||||
state.onAsset = true
|
||||
state.onSolutionlistAsset = false
|
||||
},
|
||||
|
||||
// functions to update the asset
|
||||
updateAssetComponent(state, asset) {
|
||||
state.newAssetName = asset.assetName
|
||||
state.newCustomerID = asset.customerId
|
||||
@ -215,168 +191,7 @@ const store = createStore({
|
||||
state.newSoftware = asset.software
|
||||
state.newVersion = asset.version
|
||||
state.newLicense = asset.license
|
||||
},
|
||||
|
||||
// functions to update the production order template
|
||||
updateProductionOrderTemplateComponent(state, pot) {
|
||||
state.newNamePOT = pot.name
|
||||
state.newCustomerIDPOT = pot.customerId
|
||||
state.newCustomerPOT = pot.customer
|
||||
state.newUserPOT = pot.user
|
||||
state.newDescriptionPOT = pot.description
|
||||
state.newNotesPOT = pot.notes
|
||||
},
|
||||
|
||||
// functions to update the maintenance visit template
|
||||
updateMaintenanceVisitTemplateComponent(state, mvt) {
|
||||
state.newNameMVT = mvt.name
|
||||
state.newCustomerIDMVT = mvt.customerId
|
||||
state.newCustomerMVT = mvt.customer
|
||||
state.newUserMVT = mvt.user
|
||||
state.newTypeMVT = mvt.type
|
||||
state.newNotesMVT = mvt.notes
|
||||
},
|
||||
|
||||
// functions to update the solution
|
||||
updateSolutionComponent(state, sol) {
|
||||
state.newSolutionNameSol = sol.solutionName
|
||||
state.newCustomerIDSol = sol.customerId
|
||||
state.newCustomerSol = sol.customer
|
||||
state.newAssetNameSol = sol.assetName
|
||||
state.newLastViewSol = sol.lastView
|
||||
state.newTypeSol = sol.type
|
||||
state.newDescriptionSol = sol.description
|
||||
state.newNotesSol = sol.notes
|
||||
state.newUserSol = sol.user
|
||||
},
|
||||
|
||||
// function to set the chosen asset
|
||||
setChosenAsset(state, id) {
|
||||
state.chosenAssetId = id
|
||||
},
|
||||
|
||||
// function to set the chosen production order template
|
||||
setChosenPOT(state, id) {
|
||||
state.chosenPOTId = id
|
||||
},
|
||||
|
||||
// function to set the chosen maintenance visit template
|
||||
setChosenMVT(state, id) {
|
||||
state.chosenMVTId = id
|
||||
},
|
||||
|
||||
// function to set the chosen solution
|
||||
setChosenSolution(state, id) {
|
||||
state.chosenSolutionId = id
|
||||
},
|
||||
|
||||
// function to reset the pages
|
||||
resetStore(state) {
|
||||
state.editable = false
|
||||
state.filtered = false
|
||||
state.searchable = false
|
||||
state.deleteBool = false
|
||||
state.chosenAssetId = -1
|
||||
state.filteredByClient = ''
|
||||
state.new = false
|
||||
state.clientChanged = false
|
||||
state.changedClientId = -1
|
||||
|
||||
// reset the asset page variables
|
||||
state.newAssetName = ''
|
||||
state.newCustomerID = ''
|
||||
state.newCustomer = ''
|
||||
state.newLocation = ''
|
||||
state.newRemoteLocation = ''
|
||||
state.newType = ''
|
||||
state.newDescription = ''
|
||||
state.newNotes = ''
|
||||
state.newState = ''
|
||||
state.newLastView = ''
|
||||
state.newUser = ''
|
||||
state.hardwareBool = false
|
||||
state.newModel = ''
|
||||
state.newSerialnumber = ''
|
||||
state.newCPU = ''
|
||||
state.newRAM = ''
|
||||
state.newStorageConfiguration = ''
|
||||
state.newMiscellaneous = ''
|
||||
state.softwareBool = false
|
||||
state.newSoftware = ''
|
||||
state.newVersion = ''
|
||||
state.newLicense = ''
|
||||
|
||||
// reset the production order template page variables
|
||||
state.newNamePOT = ''
|
||||
state.newCustomerIDPOT = ''
|
||||
state.newCustomerPOT = ''
|
||||
state.newUserPOT = ''
|
||||
state.newDescriptionPOT = ''
|
||||
state.newNotesPOT = ''
|
||||
state.newLastViewPOT = ''
|
||||
state.chosenPOTId = -1
|
||||
|
||||
// reset the maintenance visit template page variables
|
||||
state.newNameMVT = ''
|
||||
state.newCustomerIDMVT = ''
|
||||
state.newCustomerMVT = ''
|
||||
state.newUserMVT = ''
|
||||
state.newTypeMVT = ''
|
||||
state.newNotesMVT = ''
|
||||
state.newLastViewMVT = ''
|
||||
state.chosenMVTId = -1
|
||||
|
||||
// reset the solution page variables
|
||||
state.newSolutionNameSol = ''
|
||||
state.newCustomerIDSol = ''
|
||||
state.newCustomerSol = ''
|
||||
state.newAssetNameSol = ''
|
||||
state.newLastViewSol = ''
|
||||
state.newTypeSol = ''
|
||||
state.newDescriptionSol = ''
|
||||
state.newNotesSol = ''
|
||||
state.newUserSol = ''
|
||||
state.chosenSolutionId = -1
|
||||
},
|
||||
|
||||
// functions to (undo) delete an asset
|
||||
doDelete(state) {
|
||||
state.deleteBool = true
|
||||
},
|
||||
undoDelete(state) {
|
||||
state.deleteBool = false
|
||||
},
|
||||
|
||||
// function to update the asset filter
|
||||
updateFilterbyClient(state, client) {
|
||||
state.filteredByClient = client
|
||||
},
|
||||
|
||||
// function to get to the add page
|
||||
add(state) {
|
||||
state.new = true
|
||||
state.editable = false
|
||||
state.filtered = false
|
||||
state.searchable = false
|
||||
|
||||
// set the asset variables
|
||||
state.onAssetlist = false
|
||||
state.onCustomerAssetlist = false
|
||||
state.onAsset = true
|
||||
state.onSolutionlistAsset = false
|
||||
|
||||
// set the production order and maintenance visit variables
|
||||
state.onTemplatelist = false
|
||||
state.onCustomerTemplatelist = false
|
||||
state.onTemplate = true
|
||||
state.onInstancelist = false
|
||||
state.onInstance = false
|
||||
|
||||
// set the solution variables
|
||||
state.onSolutionlist = false
|
||||
state.onCustomerSolutionlist = false
|
||||
state.onSolution = true
|
||||
},
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
3
public/icons/actionbar-icons/Attachment-Icon.svg
Normal file
3
public/icons/actionbar-icons/Attachment-Icon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m11 5.5-4.8 4.6a4 4 0 0 1-1.9.9c-.9 0-1.6-.1-2.3-.6C1.4 9.8 1 9 1 8c.1-.7.6-1.5 1.2-2l4.7-4.5c.4-.4 1-.6 1.5-.6.6 0 1.2.2 1.6.6.4.3.6.8.6 1.4 0 .5-.2 1.2-.6 1.5L5.2 9.1c-.2.1-.7.5-1 .5-.4 0-1 0-1.3-.3-.4-.4-.5-.7-.4-1.2 0-.5.4-.9.6-1L7 3.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 426 B |
3
public/icons/actionbar-icons/Departments-Icon.svg
Normal file
3
public/icons/actionbar-icons/Departments-Icon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" viewBox="0 0 12 11">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5 7v2c0 .6-.4 1-1 1H2a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm3-5v2c0 .6-.4 1-1 1H5a1 1 0 0 1-1-1V2c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm3 5v2c0 .6-.4 1-1 1H8a1 1 0 0 1-1-1V7c0-.6.4-1 1-1h2c.6 0 1 .4 1 1Zm-8 .5V6m3-3.5V1m3 6.5V6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 415 B |
7
public/icons/actionbar-icons/Employees-Icon.svg
Normal file
7
public/icons/actionbar-icons/Employees-Icon.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="11" fill="none" viewBox="0 0 12 11">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M7.5 5.5v-.3a1.7 1.7 0 1 1 3.5 0v.3"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M9.3 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6 2.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm-5 3v-.3a1.7 1.7 0 1 1 3.5 0v.3"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.75" d="M2.8 3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3 9.9v-.5a3 3 0 1 1 6 0v.5"/>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M6 6.4A1.7 1.7 0 1 0 6 3a1.7 1.7 0 0 0 0 3.4Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 831 B |
@ -1,22 +0,0 @@
|
||||
import { insertId, errorMsg } from "../middleware/maintenanceVisitTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return insertId
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { insertId, errorMsg } from "../middleware/productionOrderTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return insertId
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { insertId, errorMsg } from "../middleware/solutions";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return insertId
|
||||
})
|
||||
@ -1,21 +0,0 @@
|
||||
import { errorMsg } from "../middleware/maintenanceVisitTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
})
|
||||
@ -1,21 +0,0 @@
|
||||
import { errorMsg } from "../middleware/productionOrderTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
})
|
||||
@ -1,21 +0,0 @@
|
||||
import { errorMsg } from "../middleware/solutions";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
})
|
||||
95
server/api/auth/login.ts
Normal file
95
server/api/auth/login.ts
Normal file
@ -0,0 +1,95 @@
|
||||
import axios, { AxiosError } from 'axios';
|
||||
import serversideConfig from '../../../serversideConfig';
|
||||
import https from 'https';
|
||||
|
||||
let errorMsg = 'error';
|
||||
//const { data } = useAuthState()
|
||||
|
||||
|
||||
export default eventHandler(async (event) => {
|
||||
|
||||
const agent = new https.Agent({
|
||||
rejectUnauthorized: false,
|
||||
});
|
||||
const axiosInstance = axios.create({
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: "*",
|
||||
},
|
||||
httpsAgent: agent
|
||||
});
|
||||
|
||||
|
||||
const body = await readBody(event)
|
||||
|
||||
// get user object from backend
|
||||
try {
|
||||
let res = await axiosInstance.post(`https://${serversideConfig.url}:${serversideConfig.port}/login`, {
|
||||
username: body.username,
|
||||
password: body.password,
|
||||
});
|
||||
const sessionToken = res.data.token;
|
||||
const user = res.data.user;
|
||||
|
||||
console.log('sessionToken: ', sessionToken);
|
||||
console.log('user: ', user);
|
||||
|
||||
setResponseStatus(event, 200);
|
||||
const resBody = {
|
||||
token: sessionToken,
|
||||
message: 'Login successful'
|
||||
};
|
||||
console.log('resBody: ', resBody);
|
||||
|
||||
return resBody;
|
||||
}
|
||||
catch (err) {
|
||||
if (axios.isAxiosError(err)) {
|
||||
const axiosError = err as AxiosError;
|
||||
|
||||
if (axiosError.response) {
|
||||
// Axios error
|
||||
//console.error(axiosError.response.data.message);
|
||||
//errorMsg = axiosError.response.data.message;
|
||||
} else if (axiosError.request) {
|
||||
// If error was caused by the request
|
||||
console.error(axiosError.request);
|
||||
} else {
|
||||
// Other errors
|
||||
console.error('Error', axiosError.message);
|
||||
}
|
||||
} else {
|
||||
// No AxiosError
|
||||
console.error('Error', err);
|
||||
}
|
||||
}
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
/*import { loginSuccessful, sessionToken, errorMsg } from "../../middleware/login";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
if (!loginSuccessful) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200);
|
||||
//setResponseHeader(event, "Set-Cookie", sessionToken);
|
||||
const resBody = {
|
||||
token: sessionToken,
|
||||
message: 'Login successful'
|
||||
};
|
||||
return resBody;
|
||||
})*/
|
||||
50
server/api/auth/refresh.ts
Normal file
50
server/api/auth/refresh.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import { createError, eventHandler, readBody, sendRedirect } from 'h3';
|
||||
import jwt from 'jsonwebtoken';
|
||||
|
||||
const SECRET = 'SECRETTUEITKEY'
|
||||
|
||||
interface User {
|
||||
username: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
interface JwtPayload extends User {
|
||||
exp: number;
|
||||
}
|
||||
|
||||
export default eventHandler(async (event) => {
|
||||
const body = await readBody<{ refreshToken: string }>(event);
|
||||
|
||||
if (!body.refreshToken) {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: 'Unauthorized, no refreshToken in payload'
|
||||
});
|
||||
};
|
||||
|
||||
const decoded = jwt.verify(body.refreshToken, SECRET) as JwtPayload | undefined;
|
||||
|
||||
if (!decoded) {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: 'Unauthorized, refreshToken can`t be verified'
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// decoded.userId exists on JwtPayload, TS falsely wants decoded.id
|
||||
const user: User = {
|
||||
username: decoded.username,
|
||||
id: decoded.userId,
|
||||
};
|
||||
|
||||
const authToken = jwt.sign( user, SECRET, { expiresIn: 60 * 5 }); // expires in 5 min
|
||||
const refreshToken = jwt.sign( user, SECRET, { expiresIn: 60 * 60 * 24 * 7 }); // expires in 7 days
|
||||
|
||||
return {
|
||||
token: {
|
||||
authToken,
|
||||
refreshToken
|
||||
}
|
||||
};
|
||||
})
|
||||
36
server/api/auth/session.ts
Normal file
36
server/api/auth/session.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { createError, eventHandler, getRequestHeader, H3Event } from 'h3'
|
||||
import jwt from 'jsonwebtoken';
|
||||
|
||||
const TOKEN_TYPE = 'Bearer'
|
||||
|
||||
const extractToken = (authHeaderValue: string) => {
|
||||
const [, token] = authHeaderValue.split(`${TOKEN_TYPE} `)
|
||||
return token
|
||||
}
|
||||
|
||||
const ensureAuth = (event: H3Event) => {
|
||||
const authHeaderValue = getRequestHeader(event, 'authorization')
|
||||
if (typeof authHeaderValue === 'undefined') {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage:
|
||||
'Need to pass valid Bearer-authorization header to access this endpoint'
|
||||
})
|
||||
}
|
||||
|
||||
const extractedToken = extractToken(authHeaderValue)
|
||||
try {
|
||||
return jwt.verify(extractedToken, 'SECRETTUEITKEY')
|
||||
} catch (error) {
|
||||
console.error("Login failed. Here's the raw error:", error)
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: 'You must be logged in to access this page'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default eventHandler((event) => {
|
||||
const user = ensureAuth(event)
|
||||
return user
|
||||
})
|
||||
@ -1,4 +1,4 @@
|
||||
import { errorMsg } from "../middleware/signUp.js";
|
||||
import { errorMsg } from "../../middleware/signUp.js";
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
import { errorMsg } from "../../middleware/maintenanceVisitTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { errorMsg } from "../../middleware/maintenanceVisitTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { errorMsg } from "../../middleware/productionOrderTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { errorMsg } from "../../middleware/productionOrderTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { errorMsg } from "../../middleware/solutions";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { errorMsg } from "../../middleware/solutions";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { errorMsg } from "../../middleware/maintenanceVisitTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { errorMsg } from "../../middleware/productionOrderTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { errorMsg } from "../../middleware/solutions";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { errorMsg } from "../../middleware/solutions";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { configItemsFromClient, errorMsg } from "../../middleware/configItems";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return configItemsFromClient
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { mvt, errorMsg } from "../../middleware/maintenanceVisitTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return mvt
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { pot, errorMsg } from "../../middleware/productionOrderTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return pot
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { selectedMVTsByClient, errorMsg } from "../../middleware/maintenanceVisitTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return selectedMVTsByClient
|
||||
})
|
||||
@ -1,22 +0,0 @@
|
||||
import { selectedMVTsByMVT, errorMsg } from "../../middleware/maintenanceVisitTemplates";
|
||||
import { OutgoingMessage } from 'http';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
|
||||
const headers: Record<string, Parameters<OutgoingMessage['setHeader']>[1]> = {
|
||||
'Access-Control-Allow-Origin': 'https://tueitapp.tueit.de',
|
||||
'Access-Control-Allow-Headers': 'authorization, content-type',
|
||||
'Access-Control-Allow-Methods': 'OPTIONS,GET,HEAD,PUT,PATCH,POST,DELETE',
|
||||
};
|
||||
setResponseHeaders(event, headers)
|
||||
|
||||
if (!(errorMsg === '')) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: errorMsg,
|
||||
})
|
||||
}
|
||||
|
||||
setResponseStatus(event, 200)
|
||||
return selectedMVTsByMVT
|
||||
})
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user