Add current state

This commit is contained in:
Leon Meier 2023-05-16 00:05:39 +02:00
parent 3819d007a5
commit 532b7b9fe2
9 changed files with 374 additions and 40 deletions

View File

@ -34,7 +34,7 @@
<th scope="col">SKU</th>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
<!--<th scope="col">Actions</th>-->
</tr>
</thead>
<tbody>
@ -43,7 +43,7 @@
<th scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= user.id %>"><%= user.SKU %></th>
<td><%= user.name %></td>
<td><span class="badge text-bg-success"><%= user.status %></span></td>
<td><a href="#" class="btn btn-primary">Edit</a></td>
<!--<td><a href="#" class="btn btn-primary">Edit</a></td>-->
</tr>
<% }) %>
</tbody>

View File

@ -1,21 +1,6 @@
<%~ E.includeFile("../partials/head.eta.html", {"title": "Settings - Category"}) %> <%~ E.includeFile("../partials/controls.eta.html", {"active": "SETT_CAT"}) %>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Do you really want to delete <strong id="deleteNamePlaceholder">Placeholder</strong>?</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">This will permanently delete the category and all its associated data.<br />Items will be kept but will be unassigned from this category.</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancle</button>
<button type="button" class="btn btn-danger" id="deleteActionBtn"><i class="bi bi-trash"></i> Yes, delete.</button>
</div>
</div>
</div>
</div>
<%~ E.includeFile("../partials/deleteModal.eta.html") %>
<h1>Categories</h1>
<div class="container">

View File

@ -1,5 +1,130 @@
<%~ E.includeFile("../partials/head.eta.html", {"title": "Settings - Storage Manager"}) %> <%~ E.includeFile("../partials/controls.eta.html", {"active": "SETT_STORE"}) %>
<%~ E.includeFile("../partials/deleteModal.eta.html") %>
<!-- Modal -->
<div class="modal fade" id="storageLocationModal" tabindex="-1" aria-labelledby="storageLocationModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="storageLocationModalTitle">Edit or create a storage location</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="frontendForm" method="post" data-target="/api/v1/storagelocation">
<div class="modal-body">
<div class="mb-3">
<label for="storageLocationModalName" class="form-label">Name</label>
<input type="text" class="form-control" id="storageLocationModalName" name="name" required />
<div id="storageLocationModalNameText" class="form-text">This name should be unqiue.</div>
</div>
<div class="mb-3">
<label for="storageLocationModalUnit" class="form-label">Select a storage unit</label>
<select class="form-select" id="storageLocationModalUnit" name="description" required>
<% it.storUnits.forEach(function(storageunits){ %>
<option value="<%= storageunits.id %>"><%= storageunits.name %></option>
<% }) %>
</select>
<!--<input type="text" class="form-control" id="createNewCategoryModalDescription" name="description" />-->
<div id="storageLocationModalUnitText" class="form-text">You have to create a storage unit beforehand.</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
<!-- loader overlay -->
<div class="loader-overlay">
<div class="loader">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="storageUnitModal" tabindex="-1" aria-labelledby="storageUnitModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="storageUnitModalLabel">Edit or create a storage unit</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form class="frontendForm" method="post" data-target="/api/v1/storageUnits" id="storageUnitModalForm">
<div class="modal-body">
<div class="mb-3">
<label for="storageUnitModalName" class="form-label">Name</label>
<input type="text" class="form-control" id="storageUnitModalName" name="name" required />
<div id="storageUnitModalNameText" class="form-text">This name should be unqiue.</div>
</div>
<div class="mb-3">
<label for="storageUnitModalLocationSelect" class="form-label">Storage Location</label>
<select class="form-select" id="storageUnitModalLocationSelect" name="location" onchange="handleSelector()" required>
<option value="META_CREATENEW"> Create new location</option>
<% it.address.forEach(function(address){ %>
<option value="<%= address.id %>"><%= address.street %> <%= address.houseNumber %>, <%= address.city %> <%= address.country %></option>
<% }) %>
</select>
<!--<input type="text" class="form-control" id="storageUnitModalLocationSelect" name="select" required />-->
<div id="storageUnitModalLocationSelectText" class="form-text">This text explains something idk.</div>
</div>
<div id="storageUnitModalContactInfoCreator" class="d-none">
<hr>
<div class="mb-3">
<label for="storageUnitModalStreet" class="form-label">Street</label>
<input type="text" class="form-control requireOnCreate" id="storageUnitModalStreet" name="street" />
<div id="storageUnitModalStreetText" class="form-text">Example Avenue</div>
</div>
<div class="mb-3">
<label for="storageUnitModalHouseNumber" class="form-label">Housenumber</label>
<input type="text" class="form-control requireOnCreate" id="storageUnitModalHouseNumber" name="housenumber" />
<div id="storageUnitModalHouseNumberText" class="form-text">6a</div>
</div>
<div class="mb-3">
<label for="storageUnitModalzipcode" class="form-label">Zipcode</label>
<input type="text" class="form-control requireOnCreate" id="storageUnitModalzipcode" name="zipcode" />
<div id="storageUnitModalzipcodeText" class="form-text">123456</div>
</div>
<div class="mb-3">
<label for="storageUnitModalCity" class="form-label">City</label>
<input type="text" class="form-control requireOnCreate" id="storageUnitModalCity" name="city" />
<div id="storageUnitModalCityText" class="form-text">Berlin</div>
</div>
<div class="mb-3">
<label for="storageUnitModalCountry" class="form-label">Country</label>
<input type="text" class="form-control requireOnCreate" id="storageUnitModalCountry" name="country" />
<div id="storageUnitModalCountryText" class="form-text">Germany</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
<!-- loader overlay -->
<div class="loader-overlay">
<div class="loader">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<h1>Storages</h1>
<ul class="nav nav-underline" id="storageTabList" role="tablist">
<li class="nav-item" role="presentation">
@ -31,10 +156,12 @@
</ul>
<div class="tab-content" id="storageTabListContent">
<div class="tab-pane fade show active" id="storage-loc-tab-pane" role="tabpanel" aria-labelledby="storage-loc-tab-pane" tabindex="0">
<br>
A storage location is a place where you can store your items. It can be a room, a shelf or a box.
<br>
<div class="row">
<div class="col-12">
<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createNewStorageLocationModal"><i class="bi bi-plus-lg"></i> Create new Location</a>
<a href="/settings/category/new" class="btn btn-primary" onclick="primeCreateNew()" data-bs-toggle="modal" data-bs-target="#storageLocationModal"><i class="bi bi-plus-lg"></i> Create new Location</a>
</div>
</div>
<table class="table">
@ -47,27 +174,48 @@
</tr>
</thead>
<tbody>
<% it.storLocs.forEach(function(locations){ %>
<tr id="listEntry-<%= locations.id %>">
<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= locations.id %>"><%= locations.name %></td>
<td><%= locations.contactInfo %></td>
<td>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageLocationModal" onclick="primeEdit(); getDataForEdit('<%= locations.name %>')"><i class="bi bi-pencil"></i></button>
<button class="btn btn-danger" onclick="preFillDeleteModal('<%= locations.name %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="storage-unit-tab-pane" role="tabpanel" aria-labelledby="storage-unit-tab-pane" tabindex="0">
<br>
A storage unit is a physical place, like a warehouse. This contains an address and a name.
<br>
<div class="row">
<div class="col-12">
<a href="/settings/category/new" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createNewStorageUnitModal"><i class="bi bi-building-add"></i> Create new unit</a>
<a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeCreateNew()"><i class="bi bi-building-add"></i> Create new unit</a>
</div>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<% it.storUnits.forEach(function(units){ %>
<tr id="listEntry-<%= units.id %>">
<td scope="row" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="ID: <%= units.id %>"><%= units.name %></td>
<td><%= units.contactInfo.street %> <%= units.contactInfo.houseNumber %>, <%= units.contactInfo.city %> <%= units.contactInfo.country %></td>
<td>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeEdit(); getDataForEdit('<%= units.name %>')"><i class="bi bi-pencil"></i></button>
<button class="btn btn-danger" onclick="preFillDeleteModal('<%= units.name %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
</td>
</tr>
<% }) %>
</tbody>
</div>
</div>
<script src="/js/editStorages.js"></script>

View File

@ -0,0 +1,16 @@
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Do you really want to delete <strong id="deleteNamePlaceholder">Placeholder</strong>?</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">This will permanently delete the category and all its associated data.<br />Items will be kept but will be unassigned from this category.</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancle</button>
<button type="button" class="btn btn-danger" id="deleteActionBtn"><i class="bi bi-trash"></i> Yes, delete.</button>
</div>
</div>
</div>
</div>

View File

@ -3,11 +3,13 @@ import express from 'express';
// Route imports
import testRoute from './test.js';
import categoryRoute from './categories.js';
import storageUnitRoute from './storageUnits.js';
// Router base is '/api/v1'
const Router = express.Router({ strict: false });
Router.route('/categories').get(categoryRoute.get).post(categoryRoute.post).patch(categoryRoute.patch).delete(categoryRoute.del);
Router.route('/storageUnits').get(storageUnitRoute.get).post(storageUnitRoute.post).patch(storageUnitRoute.patch).delete(storageUnitRoute.del);
Router.route('/test').get(testRoute.get);
export default Router;

View File

@ -0,0 +1,148 @@
import { Request, Response } from 'express';
import { prisma, __path, log } from '../../../index.js';
// Get storageUnit.
function get(req: Request, res: Response) {
if (req.query.getAll === undefined) {
// Check if required fields are present.
if (!req.query.name) {
res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
return;
}
prisma.storageUnit
.findUnique({
where: {
name: req.query.name.toString()
},
// Get category name from relation.
include: {
contactInfo: true
}
})
.then((items) => {
if (items) {
res.status(200).json(JSON.stringify(items));
} else {
res.status(410).json({ error: 'it seems that there is no storageUnit present.' });
}
})
.catch((err) => {
console.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
});
} else {
prisma.storageUnit
.findMany({
// Get category name from relation.
include: {
contactInfo: true
}
})
.then((items) => {
if (items) {
res.status(200).json(JSON.stringify(items));
} else {
res.status(410).json({ error: 'storageUnit does not exist.' });
}
})
.catch((err) => {
console.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
});
}
}
// Create storageUnit.
function post(req: Request, res: Response) {
log.web.debug(JSON.stringify(req.body));
/* // Check if required fields are present.
if (!req.body.name) {
res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
return;
}
// Save data.
prisma.storageUnit
.create({
data: {
name: req.body.name
}
})
.then(() => {
res.status(201).json({ status: 'created' });
})
.catch((err) => {
// TODO Catch if is a duplicate error and show a message to the user
log.db.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
}); */
}
// Update category.
function patch(req: Request, res: Response) {
// Check if required fields are present.
if (!req.body.id || !req.body.name) {
res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
return;
}
prisma.storageUnit
.update({
where: {
id: parseInt(req.body.id)
},
data: {
name: req.body.name
}
})
.then(() => {
res.status(201).json({ status: 'updated' });
})
.catch((err) => {
// TODO Catch if is a duplicate error and show a message to the user
log.db.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
});
}
// Delete category.
async function del(req: Request, res: Response) {
// Check if required fields are present.
if (!req.body.id) {
res.status(400).render(__path + '/src/frontend/errors/400.eta.html');
return;
}
// Does the id exist? If not return 410 Gone.
try {
const result = await prisma.storageUnit.findUnique({
where: {
id: parseInt(req.body.id)
}
});
if (result === null) {
res.status(410).json({ error: 'Storage Unit does not exist.' });
return;
}
} catch (err) {
log.db.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
}
prisma.storageUnit
.delete({
where: {
id: parseInt(req.body.id)
}
})
.then(() => {
res.status(201).json({ status: 'deleted' });
})
.catch((err) => {
log.db.error(err);
res.status(500).render(__path + '/src/frontend/errors/dbError.eta.html', { error: err });
});
}
export default { get, post, patch, del };

View File

@ -2,7 +2,13 @@ import express, { Request, Response } from 'express';
import { prisma, __path } from '../../../index.js';
function get(req: Request, res: Response) {
res.render(__path + '/src/frontend/manage/storageManager.eta.html'); //, { items: items });
prisma.storageUnit.findMany({include: {contactInfo: true}}).then((storUnits) => {
prisma.storageLocation.findMany().then((storLocs) => {
prisma.contactInfo.findMany().then((contactInfos) => {
res.render(__path + '/src/frontend/manage/storageManager.eta.html', { storUnits: storUnits, storLocs: storLocs, address: contactInfos });
});
});
});
}
export default { get };

View File

@ -1,5 +1,5 @@
import express, { Express } from 'express';
import { __path } from '../index.js';
import { __path, prisma } from '../index.js';
// Route imports
import frontend_routes from './frontend/index.js';
@ -12,9 +12,6 @@ Router.use('/static', static_routes);
Router.use('/api', api_routes);
Router.use('/', frontend_routes);
Router.get('/debug-sentry', function mainHandler(req, res) {
throw new Error('My first Sentry error!');
});
// Default route.
Router.all('*', function (req, res) {
// TODO: Respond based on content-type (with req.is('application/json'))

View File

@ -3,21 +3,53 @@
// Taken from https://stackoverflow.com/a/9393768/11317151 (and edited, like a lot)
// Also update on location change
window.addEventListener("hashchange", function() {
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
window.addEventListener(
'hashchange',
function () {
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show();
}
},
false
);
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show()
}
}, false);
var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash
if (hash) {
bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show()
}
bootstrap.Tab.getOrCreateInstance(document.querySelector('#' + hash)).show();
}
// Change hash for page-reload
$('.nav-link').on('click', function (e) {
window.location.hash = e.target.id;
})
});
function primeCreateNew() {
const form = document.getElementById('storageUnitModalForm');
const form2 = document.getElementById('storageLocationModal');
form.setAttribute('method', 'POST');
form2.setAttribute('method', 'POST');
return true;
}
function primeEdit() {
const form = document.getElementById('storageUnitModalForm');
const form2 = document.getElementById('storageLocationModal');
form.setAttribute('method', 'PATCH');
form2.setAttribute('method', 'PATCH');
return true;
}
function handleSelector(){
const selector = document.getElementById('storageUnitModalLocationSelect')
const value = selector.options[selector.selectedIndex].value;
if(value == "META_CREATENEW") {
$('#storageUnitModalContactInfoCreator').removeClass('d-none')
$('.requireOnCreate').attr('required', true)
} else {
$('#storageUnitModalContactInfoCreator').addClass('d-none')
$('.requireOnCreate').attr('required', false)
}
console.log(value);
}
handleSelector()