The BIG frontend update
This commit is contained in:
parent
04b5bd60f2
commit
bd9f629690
12
src/frontend/auth/login.eta.html
Normal file
12
src/frontend/auth/login.eta.html
Normal file
@ -0,0 +1,12 @@
|
||||
<%~ E.includeFile("../partials/head.eta.html", {"title": "Login"}) %>
|
||||
<link href="/css/login.css" rel="stylesheet" />
|
||||
|
||||
<div class="background text-center">
|
||||
<div class="row align-items-start">
|
||||
<div class="col-9"></div>
|
||||
<div class="col-3 sidePanel ps-4 text-black">
|
||||
<h1>Log into AssetFlow</h1>
|
||||
</div>
|
||||
</div>
|
||||
<%~ E.includeFile("../partials/foot.eta.html") %>
|
||||
</div>
|
||||
@ -3,7 +3,7 @@
|
||||
<!-- TODO: Center table content -->
|
||||
<h1>Items</h1>
|
||||
<div class="container">
|
||||
<table class="table">
|
||||
<table class="table align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">SKU</th>
|
||||
@ -12,6 +12,13 @@
|
||||
<th scope="col">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<% if(it.items.length == 0) { %>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="4" class="text-center">No items found</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<% } %>
|
||||
<tbody>
|
||||
<% it.items.forEach(function(user){ %>
|
||||
<tr>
|
||||
@ -23,6 +30,19 @@
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<% if(it.maxPages > 1) { %>
|
||||
<nav aria-label="Page selector">
|
||||
<ul class="pagination justify-content-center">
|
||||
<li class="page-item <%= it.currentPage-1 < 1 ? 'disabled' : ''%>"><a class="page-link" href="?page=<%= it.currentPage - 1 %>">Previous</a></li>
|
||||
<% for (var i = 1; i <= it.maxPages; i++) { %>
|
||||
<li class="page-item <%= it.currentPage == i ? 'active' : ''%> "><a class="page-link" href="?page=<%= i %>"><%= i %></a></li>
|
||||
<% } %>
|
||||
|
||||
<li class="page-item <%= it.currentPage+1 > it.maxPages ? 'disabled' : ''%>"><a class="page-link" href="?page=<%= it.currentPage + 1 %>">Next</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<% } %>
|
||||
</div>
|
||||
|
||||
<%~ E.includeFile("partials/controlsFoot.eta.html") %> <%~ E.includeFile("partials/foot.eta.html") %>
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Table with all categories -->
|
||||
<table class="table">
|
||||
<table class="table align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- <th scope="col">#</th> -->
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<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">
|
||||
<form id="storageLocationModalForm" class="frontendForm" method="post" data-target="/api/v1/storageLocations">
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="storageLocationModalName" class="form-label">Name</label>
|
||||
@ -18,7 +18,8 @@
|
||||
</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>
|
||||
<select class="form-select" id="storageLocationModalUnit" name="storageUnitId" required>
|
||||
<option value="undefined"><i>Do not assign a storage unit</i></option>
|
||||
<% it.storUnits.forEach(function(storageunits){ %>
|
||||
<option value="<%= storageunits.id %>"><%= storageunits.name %></option>
|
||||
<% }) %>
|
||||
@ -26,6 +27,7 @@
|
||||
|
||||
<!--<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>
|
||||
<input type="hidden" id="storageLocationModalIdHidden" name="id" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@ -62,8 +64,8 @@
|
||||
|
||||
<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>
|
||||
<select class="form-select" id="storageUnitModalLocationSelect" name="locationId" onchange="handleSelector()" required>
|
||||
<option value="META_CREATENEW" id="createNewLocationSelection">➕ Create new location</option>
|
||||
<% it.address.forEach(function(address){ %>
|
||||
<option value="<%= address.id %>"><%= address.street %> <%= address.houseNumber %>, <%= address.city %> <%= address.country %></option>
|
||||
<% }) %>
|
||||
@ -71,6 +73,7 @@
|
||||
|
||||
<!--<input type="text" class="form-control" id="storageUnitModalLocationSelect" name="select" required />-->
|
||||
<div id="storageUnitModalLocationSelectText" class="form-text">Select or create a new address.</div>
|
||||
<input type="hidden" id="storageUnitModalLocationSelectHidden" name="id" />
|
||||
</div>
|
||||
|
||||
<div id="storageUnitModalContactInfoCreator" class="d-none">
|
||||
@ -82,13 +85,13 @@
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="storageUnitModalHouseNumber" class="form-label">Housenumber</label>
|
||||
<input type="text" class="form-control requireOnCreate" id="storageUnitModalHouseNumber" name="housenumber" />
|
||||
<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" />
|
||||
<input type="text" class="form-control requireOnCreate" id="storageUnitModalzipcode" name="zipCode" />
|
||||
<div id="storageUnitModalzipcodeText" class="form-text">123456</div>
|
||||
</div>
|
||||
|
||||
@ -147,10 +150,9 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<table class="table">
|
||||
<table class="table align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">LocId</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Storage Unit</th>
|
||||
<th scope="col">Actions</th>
|
||||
@ -160,18 +162,34 @@
|
||||
<% 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 %>')">
|
||||
<% if (locations.storageUnit == null) { %>
|
||||
<i>No storage unit connected</i>
|
||||
<% } else { %>
|
||||
<%= locations.storageUnit.name %>
|
||||
<% } %>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageLocationModal" onclick="primeEdit(); getDataForEditLoc('<%= locations.id %>')">
|
||||
<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>
|
||||
<button class="btn btn-danger" onclick="preFillDeleteModalLoc('<%= locations.id %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Storage Unit -->
|
||||
<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.
|
||||
@ -181,7 +199,7 @@
|
||||
<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">
|
||||
<table class="table align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Name</th>
|
||||
@ -195,10 +213,10 @@
|
||||
<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 %>')">
|
||||
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#storageUnitModal" onclick="primeEdit(); getDataForEdit('<%= units.id %>')">
|
||||
<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>
|
||||
<button class="btn btn-danger" onclick="preFillDeleteModal('<%= units.id %>')" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><i class="bi bi-trash"></i></button>
|
||||
</td>
|
||||
</tr>
|
||||
<% }) %>
|
||||
|
||||
@ -120,8 +120,7 @@
|
||||
data-bs-target="#collapseSettingsStorages"
|
||||
aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
|
||||
aria-controls="collapseSettingsStorages">
|
||||
<i class="bi bi-caret-left-fill magicalTriangle"></i>
|
||||
<!-- TODO: This little triangle does not care if it is collapsed or not. But it should so -->
|
||||
<i class="bi bi-caret-left-fill dropdownIndicator"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@ -144,7 +143,7 @@
|
||||
aria-expanded="<%= it.active.includes('SETT_IMPORT') ? 'true' : 'false'%>"
|
||||
aria-controls="collapseSettingsImport">
|
||||
<i class="bi bi-box-seam"></i> Import
|
||||
<i class="bi bi-caret-left-fill dropdownIndicator magicalTriangle" data-ref-target="#collapseSettingsImport"></i>
|
||||
<i class="bi bi-caret-left-fill dropdownIndicator" data-ref-target="#collapseSettingsImport"></i>
|
||||
<!-- TODO: This little triangle does not care if it is collapsed or not. But it should so -->
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||
|
||||
<script src="/js/normalizeToast.js"></script>
|
||||
<script src="/static/jquery/dist/jquery.min.js"></script>
|
||||
<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
|
||||
@ -20,7 +21,6 @@
|
||||
<script src="/static/tsparticles-confetti/tsparticles.confetti.bundle.min.js"></script>
|
||||
<script>
|
||||
// Listen for changes in the prefers-color-scheme media query and update the "data-bs-theme" attribute on the <html> element.
|
||||
|
||||
(function () {
|
||||
const currentTheme = localStorage.getItem('bs.theme') ?? 'auto';
|
||||
const isDark = currentTheme === 'dark';
|
||||
|
||||
@ -80,7 +80,7 @@ async function patch(req: Request, res: Response) {
|
||||
});
|
||||
|
||||
if (result === null) {
|
||||
res.status(410).json({ error: 'category does not exist.' });
|
||||
res.status(410).json({ error: 'Category does not exist.' });
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
|
||||
@ -4,12 +4,17 @@ import express from 'express';
|
||||
import testRoute from './test.js';
|
||||
import categoryRoute from './categories.js';
|
||||
import storageUnitRoute from './storageUnits.js';
|
||||
import storageLocationRoute from './storageLocations.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);
|
||||
// TODO: Migrate routes to lowercase.
|
||||
Router.route('/storageUnits').get(storageUnitRoute.get).post(storageUnitRoute.post).patch(storageUnitRoute.patch).delete(storageUnitRoute.del);
|
||||
Router.route('/storageLocations').get(storageLocationRoute.get).post(storageLocationRoute.post).patch(storageLocationRoute.patch).delete(storageLocationRoute.del);
|
||||
|
||||
Router.route('/test').get(testRoute.get);
|
||||
|
||||
export default Router;
|
||||
|
||||
@ -1,12 +1,32 @@
|
||||
import { Request, Response } from 'express';
|
||||
import { prisma, __path } from '../../index.js';
|
||||
|
||||
function get(req: Request, res: Response) {
|
||||
async function get(req: Request, res: Response) {
|
||||
// If no page is provided redirect to first
|
||||
if (req.query.page === undefined) {
|
||||
res.redirect('?page=1');
|
||||
return;
|
||||
}
|
||||
|
||||
let page = parseInt(req.query.page.toString());
|
||||
const itemCount = await prisma.item.count({}); // Count all items in the DB
|
||||
|
||||
const takeSize = 25; // Amount of times per page
|
||||
const pageSize = Math.ceil(itemCount / takeSize); // Amount of pages, always round up
|
||||
|
||||
// If page is less then 1 or more then the max page size redirect to first or last page
|
||||
if (page < 1) {
|
||||
res.redirect('?page=1');
|
||||
return;
|
||||
} else if (page > pageSize) {
|
||||
res.redirect('?page=' + pageSize);
|
||||
return;
|
||||
}
|
||||
|
||||
prisma.item
|
||||
.findMany({})
|
||||
.findMany({ skip: (page - 1) * takeSize, take: takeSize }) // Skip the amount of items per page times the page number minus 1; skip has to be (page-1)*takeSize because skip is 0 indexed
|
||||
.then((items) => {
|
||||
// Count amount of total items
|
||||
res.render(__path + '/src/frontend/items.eta.html', { items: items });
|
||||
res.render(__path + '/src/frontend/items.eta.html', { items: items, currentPage: page, maxPages: pageSize });
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
|
||||
8
src/routes/frontend/manage/demo.ts
Normal file
8
src/routes/frontend/manage/demo.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import express, { Request, Response } from 'express';
|
||||
import { prisma, __path } from '../../../index.js';
|
||||
|
||||
function get(req: Request, res: Response) {
|
||||
res.render(__path + '/src/frontend/auth/login.eta.html'); //, { items: items });
|
||||
}
|
||||
|
||||
export default { get };
|
||||
@ -7,6 +7,7 @@ import jsonImportRoute from './import/jsonImport.js';
|
||||
import categoryManager from './categoryManager.js';
|
||||
import storageManager from './storageManager.js';
|
||||
import startpageRoute from './startpage.js';
|
||||
import demoLoginRoute from './demo.js'
|
||||
|
||||
// Router base is '/manage'
|
||||
const Router = express.Router({ strict: false });
|
||||
@ -16,6 +17,7 @@ Router.route('/categories').get(categoryManager.get);
|
||||
Router.route('/storages').get(storageManager.get);
|
||||
Router.route('/import/csv').get(csvImportRoute.get).post(csvImportRoute.post);
|
||||
Router.route('/import/json').get(jsonImportRoute.get).post(jsonImportRoute.post);
|
||||
Router.route('/demo/login').get(demoLoginRoute.get);
|
||||
Router.route('/').get(startpageRoute.get);
|
||||
|
||||
export default Router;
|
||||
|
||||
@ -5,4 +5,5 @@ function get(req: Request, res: Response) {
|
||||
res.render(__path + '/src/frontend/manage/startpage.eta.html'); //, { items: items });
|
||||
}
|
||||
|
||||
|
||||
export default { get };
|
||||
|
||||
@ -2,8 +2,14 @@ import express, { Request, Response } from 'express';
|
||||
import { prisma, __path } from '../../../index.js';
|
||||
|
||||
function get(req: Request, res: Response) {
|
||||
prisma.storageUnit.findMany({include: {contactInfo: true}}).then((storUnits) => {
|
||||
prisma.storageLocation.findMany().then((storLocs) => {
|
||||
prisma.storageUnit.findMany({ include: { contactInfo: true } }).then((storUnits) => {
|
||||
prisma.storageLocation
|
||||
.findMany({
|
||||
include: {
|
||||
storageUnit: true
|
||||
}
|
||||
})
|
||||
.then((storLocs) => {
|
||||
prisma.contactInfo.findMany().then((contactInfos) => {
|
||||
res.render(__path + '/src/frontend/manage/storageManager.eta.html', { storUnits: storUnits, storLocs: storLocs, address: contactInfos });
|
||||
});
|
||||
|
||||
@ -16,9 +16,9 @@ Router.use('/', frontend_routes);
|
||||
Router.all('*', function (req, res) {
|
||||
// TODO: Respond based on content-type (with req.is('application/json'))
|
||||
if (req.is('application/json')) {
|
||||
res.status(404).json({ errorcode: '404' });
|
||||
res.status(418)//.json({ errorcode: '404' });
|
||||
} else {
|
||||
res.status(404).render(__path + '/src/frontend/errors/404.eta.html', { url: req.originalUrl });
|
||||
res.status(418)//.render(__path + '/src/frontend/errors/404.eta.html', { url: req.originalUrl });
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -101,9 +101,16 @@ body {
|
||||
}
|
||||
|
||||
.rotate {
|
||||
transform: rotate(90deg);
|
||||
color: red;
|
||||
transition: 1s;
|
||||
transform: rotate(-90deg) !important;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.rotate::before {
|
||||
transform: rotate(-90deg) !important;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.dropdownIndicator {
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
23
static/css/login.css
Normal file
23
static/css/login.css
Normal file
@ -0,0 +1,23 @@
|
||||
.background {
|
||||
background-image: url("https://images.unsplash.com/photo-1683085809775-d9ac53fcbe21?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE1fDZzTVZqVExTa2VRfHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&q=60");
|
||||
/* fill the page height and width */
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
/* make the background image cover the whole page */
|
||||
background-size: cover;
|
||||
/* position the image in the center of the page */
|
||||
background-position: center;
|
||||
/* make the image fixed so it doesn't scroll with the page */
|
||||
background-attachment: fixed;
|
||||
/* make the image not repeat */
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sidePanel {
|
||||
/* make somewhat transparent and blurry */
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
height: 100vh;
|
||||
|
||||
}
|
||||
@ -20,7 +20,7 @@ function getDataForEdit(name) {
|
||||
$('.loader-overlay').removeClass('active');
|
||||
// Close the modal
|
||||
$('.modal').modal('hide');
|
||||
$('#generalToast').removeClass('text-bg-primary');
|
||||
normalizeToast()
|
||||
$('#generalToast').addClass('text-bg-danger');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.');
|
||||
@ -35,6 +35,7 @@ function primeCreateNew() {
|
||||
const form = document.getElementById('CategoryModalForm');
|
||||
form.setAttribute('method', 'POST');
|
||||
document.getElementById('editCategoryModalLabel').innerText = 'Create a new category';
|
||||
$('.form-control').val('');
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -81,14 +82,13 @@ function deleteEntry(id) {
|
||||
error: function (data) {
|
||||
// hide the staticBackdrop modal
|
||||
$('#staticBackdrop').modal('hide');
|
||||
$('#generalToast').removeClass('text-bg-primary');
|
||||
normalizeToast()
|
||||
|
||||
$('#generalToast').addClass('text-bg-danger');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
|
||||
setTimeout(() => {
|
||||
$('#generalToast').toast('hide');
|
||||
$('#generalToast').removeClass('text-bg-danger');
|
||||
$('#generalToast').addClass('text-bg-primary');
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
@ -118,7 +118,7 @@ function preFillDeleteModal(name) {
|
||||
document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
|
||||
|
||||
$('#staticBackdrop').modal('hide');
|
||||
$('#generalToast').removeClass('text-bg-primary');
|
||||
normalizeToast()
|
||||
$('#generalToast').addClass('text-bg-danger');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.');
|
||||
|
||||
@ -24,8 +24,14 @@ $('.nav-link').on('click', function (e) {
|
||||
});
|
||||
|
||||
function primeCreateNew() {
|
||||
// Clear the form
|
||||
$('.form-control').val('');
|
||||
const form = document.getElementById('storageUnitModalForm');
|
||||
const form2 = document.getElementById('storageLocationModal');
|
||||
const form2 = document.getElementById('storageLocationModalForm');
|
||||
document.getElementById('createNewLocationSelection').disabled = false;
|
||||
document.getElementById('storageUnitModalLocationSelectText').innerText= "Select or create a new location.";
|
||||
document.getElementById('storageUnitModalLabel').innerText = "Create new storage unit";
|
||||
document.getElementById('storageLocationModalTitle').innerText = "Create new storage location";
|
||||
form.setAttribute('method', 'POST');
|
||||
form2.setAttribute('method', 'POST');
|
||||
return true;
|
||||
@ -33,7 +39,14 @@ function primeCreateNew() {
|
||||
|
||||
function primeEdit() {
|
||||
const form = document.getElementById('storageUnitModalForm');
|
||||
const form2 = document.getElementById('storageLocationModal');
|
||||
const form2 = document.getElementById('storageLocationModalForm');
|
||||
// Disable create new location
|
||||
document.getElementById('createNewLocationSelection').disabled = true;
|
||||
document.getElementById('storageUnitModalLocationSelectText').innerText= "While editing you can only select already existing locations. Use the settings to create new ones.";
|
||||
document.getElementById('storageUnitModalLabel').innerText = "Edit a storage unit";
|
||||
document.getElementById('storageLocationModalTitle').innerText = "Edit a storage location"
|
||||
document.getElementById('storageUnitModalLocationSelect').value = 1
|
||||
handleSelector()
|
||||
form.setAttribute('method', 'PATCH');
|
||||
form2.setAttribute('method', 'PATCH');
|
||||
return true;
|
||||
@ -49,7 +62,264 @@ function handleSelector(){
|
||||
$('#storageUnitModalContactInfoCreator').addClass('d-none')
|
||||
$('.requireOnCreate').attr('required', false)
|
||||
}
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
function preFillDeleteModal(id) {
|
||||
$.ajax({
|
||||
type: 'get',
|
||||
url: `/api/v1/storageUnits?id=${id}`,
|
||||
success: function (data) {
|
||||
const result = JSON.parse(data);
|
||||
|
||||
// Get elements inside the editCategoryModal
|
||||
const modal_categoryName = document.getElementById('deleteNamePlaceholder');
|
||||
const modal_deleteButton = document.getElementById('deleteActionBtn');
|
||||
//const modal_categoryDescription = document.getElementById('editCategoryModalDescription');
|
||||
//const modal_categoryid = document.getElementById('editCategoryModalId');
|
||||
|
||||
modal_categoryName.innerText = result.name;
|
||||
modal_deleteButton.setAttribute('onclick', `deleteEntry(${result.id})`);
|
||||
|
||||
//modal_categoryDescription.value = result.description;
|
||||
//modal_categoryid.value = result.id;
|
||||
},
|
||||
error: function (data) {
|
||||
console.log('!!!! ERROR !!!!', data);
|
||||
document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
|
||||
|
||||
$('#staticBackdrop').modal('hide');
|
||||
normalizeToast()
|
||||
|
||||
$('#generalToast').addClass('text-bg-danger');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storageUnit does no longer exist.');
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function preFillDeleteModalLoc(id) {
|
||||
$.ajax({
|
||||
type: 'get',
|
||||
url: `/api/v1/storageLocations?id=${id}`,
|
||||
success: function (data) {
|
||||
const result = JSON.parse(data);
|
||||
|
||||
// Get elements inside the editCategoryModal
|
||||
const modal_categoryName = document.getElementById('deleteNamePlaceholder');
|
||||
const modal_deleteButton = document.getElementById('deleteActionBtn');
|
||||
//const modal_categoryDescription = document.getElementById('editCategoryModalDescription');
|
||||
//const modal_categoryid = document.getElementById('editCategoryModalId');
|
||||
|
||||
modal_categoryName.innerText = result.name;
|
||||
modal_deleteButton.setAttribute('onclick', `deleteEntryLoc(${result.id})`);
|
||||
|
||||
//modal_categoryDescription.value = result.description;
|
||||
//modal_categoryid.value = result.id;
|
||||
},
|
||||
error: function (data) {
|
||||
console.log('!!!! ERROR !!!!', data);
|
||||
document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
|
||||
|
||||
$('#staticBackdrop').modal('hide');
|
||||
normalizeToast()
|
||||
|
||||
$('#generalToast').addClass('text-bg-danger');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage location does no longer exist.');
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function deleteEntry(id) {
|
||||
$.ajax({
|
||||
type: 'delete',
|
||||
url: `/api/v1/storageUnits`,
|
||||
data: { id: id },
|
||||
success: function (data) {
|
||||
$('#staticBackdrop').modal('hide');
|
||||
normalizeToast()
|
||||
|
||||
$('#generalToast').addClass('text-bg-success');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Storage Unit deleted successfully.');
|
||||
confetti({
|
||||
spread: 360,
|
||||
ticks: 100,
|
||||
gravity: 0.1,
|
||||
decay: 0.94,
|
||||
startVelocity: 30,
|
||||
particleCount: 20,
|
||||
scalar: 2,
|
||||
shapes: ['text'],
|
||||
shapeOptions: {
|
||||
text: {
|
||||
value: ['❌', '🗑️', '🚫']
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
$('#generalToast').toast('hide');
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
},
|
||||
error: function (data) {
|
||||
// hide the staticBackdrop modal
|
||||
$('#staticBackdrop').modal('hide');
|
||||
normalizeToast()
|
||||
$('#generalToast').addClass('text-bg-danger');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
|
||||
setTimeout(() => {
|
||||
$('#generalToast').toast('hide');
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function deleteEntryLoc(id) {
|
||||
$.ajax({
|
||||
type: 'delete',
|
||||
url: `/api/v1/storageLocations`,
|
||||
data: { id: id },
|
||||
success: function (data) {
|
||||
$('#staticBackdrop').modal('hide');
|
||||
normalizeToast()
|
||||
|
||||
$('#generalToast').addClass('text-bg-success');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Storage Unit deleted successfully.');
|
||||
confetti({
|
||||
spread: 360,
|
||||
ticks: 100,
|
||||
gravity: 0.1,
|
||||
decay: 0.94,
|
||||
startVelocity: 30,
|
||||
particleCount: 20,
|
||||
scalar: 2,
|
||||
shapes: ['text'],
|
||||
shapeOptions: {
|
||||
text: {
|
||||
value: ['❌', '🗑️', '🚫']
|
||||
}
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
$('#generalToast').toast('hide');
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
},
|
||||
error: function (data) {
|
||||
// hide the staticBackdrop modal
|
||||
$('#staticBackdrop').modal('hide');
|
||||
normalizeToast()
|
||||
$('#generalToast').addClass('text-bg-danger');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
|
||||
setTimeout(() => {
|
||||
$('#generalToast').toast('hide');
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getDataForEdit(id) {
|
||||
$.ajax({
|
||||
type: 'get',
|
||||
url: `/api/v1/storageUnits?id=${id}`,
|
||||
success: function (data) {
|
||||
const result = JSON.parse(data);
|
||||
|
||||
// Get elements inside the editCategoryModal
|
||||
const modal_unitName = document.getElementById('storageUnitModalName');
|
||||
const modal_unitLocation = document.getElementById('storageUnitModalLocationSelect');
|
||||
const modal_unitId = document.getElementById('storageUnitModalLocationSelectHidden');
|
||||
// const modal_categoryid = document.getElementById('editCategoryModalId');
|
||||
|
||||
modal_unitName.value = result.name;
|
||||
modal_unitId.value = result.id;
|
||||
|
||||
// Select the correct location from the select based on the value of the option
|
||||
for(var i, j = 0; i = modal_unitLocation.options[j]; j++) {
|
||||
if(i.value == result.contactInfoId) {
|
||||
console.log("Found it");
|
||||
modal_unitLocation.selectedIndex = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
error: function (data) {
|
||||
console.log('!!!! ERROR !!!!', data);
|
||||
// Hide overlay with spinner
|
||||
$('.loader-overlay').removeClass('active');
|
||||
// Close the modal
|
||||
$('.modal').modal('hide');
|
||||
normalizeToast()
|
||||
$('#generalToast').addClass('text-bg-danger');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.');
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getDataForEditLoc(id) {
|
||||
$.ajax({
|
||||
type: 'get',
|
||||
url: `/api/v1/storageLocations?id=${id}`,
|
||||
success: function (data) {
|
||||
const result = JSON.parse(data);
|
||||
|
||||
// Get elements inside the editCategoryModal
|
||||
const modal_locationName = document.getElementById('storageLocationModalName');
|
||||
const modal_locationUnitSel = document.getElementById('storageLocationModalUnit');
|
||||
const modal_locationId = document.getElementById('storageLocationModalIdHidden');
|
||||
// const modal_categoryid = document.getElementById('editCategoryModalId');
|
||||
|
||||
modal_locationName.value = result.name;
|
||||
modal_locationId.value = result.id;
|
||||
|
||||
// Select the correct location from the select based on the value of the option
|
||||
for(var i, j = 0; i = modal_locationUnitSel.options[j]; j++) {
|
||||
if(i.value == result.storageUnit) {
|
||||
console.log("Found it");
|
||||
modal_locationUnitSel.selectedIndex = j;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
error: function (data) {
|
||||
console.log('!!!! ERROR !!!!', data);
|
||||
// Hide overlay with spinner
|
||||
$('.loader-overlay').removeClass('active');
|
||||
// Close the modal
|
||||
$('.modal').modal('hide');
|
||||
normalizeToast()
|
||||
$('#generalToast').addClass('text-bg-danger');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.');
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleSelector()
|
||||
@ -1,5 +1,5 @@
|
||||
var amountOfForms = $('.frontendForm').length;
|
||||
$('.frontendForm').each(function() {
|
||||
console.log('frontendForm found');
|
||||
$(this).on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
@ -10,7 +10,6 @@ $('.frontendForm').each(function() {
|
||||
|
||||
|
||||
formData = form.serializeArray();
|
||||
console.log(formData, $(this).attr('method'), $(this).attr('data-target'));
|
||||
console.log('submitting form');
|
||||
$.ajax({
|
||||
type: $(this).attr('method'),
|
||||
@ -26,14 +25,12 @@ $('.frontendForm').each(function() {
|
||||
// Clear all fields
|
||||
form.find('input, textarea').val('');
|
||||
|
||||
$('#generalToast').removeClass('text-bg-primary');
|
||||
normalizeToast()
|
||||
$('#generalToast').addClass('text-bg-success');
|
||||
$('#generalToast').toast('show');
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Changes saved successfully.');
|
||||
setTimeout(() => {
|
||||
$('#generalToast').toast('hide');;
|
||||
$('#generalToast').removeClass('text-bg-success');
|
||||
$('#generalToast').addClass('text-bg-primary');
|
||||
window.location.reload();
|
||||
}, 1500);
|
||||
},
|
||||
@ -42,16 +39,23 @@ $('.frontendForm').each(function() {
|
||||
// Hide overlay with spinner
|
||||
$('.loader-overlay').removeClass('loaderActive');
|
||||
|
||||
$('#generalToast').removeClass('text-bg-primary');
|
||||
// Check for response code 409
|
||||
normalizeToast()
|
||||
$('#generalToast').addClass('text-bg-danger');
|
||||
$('#generalToast').toast('show');
|
||||
|
||||
|
||||
if (data.status == 409) {
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> The element you tried to create already exists.');
|
||||
}else {
|
||||
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
|
||||
}
|
||||
setTimeout(() => {
|
||||
$('#generalToast').toast('hide');
|
||||
$('#generalToast').removeClass('text-bg-danger');
|
||||
$('#generalToast').addClass('text-bg-primary');
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
})
|
||||
});
|
||||
|
||||
console.info("Found " + amountOfForms + " forms on this page.")
|
||||
@ -5,12 +5,13 @@ trinagles.each(function () {
|
||||
var target = $(this.dataset.refTarget);
|
||||
target.on('show.bs.collapse', function () {
|
||||
//$(this).parent.addClass('rotate');
|
||||
// $(this).parent().find('.dropdownIndicator').addClass('rotate');
|
||||
$(this).parent().find('.dropdownIndicator').addClass('rotate');
|
||||
console.log($(this).parent().find('.dropdownIndicator'));
|
||||
console.log('show');
|
||||
});
|
||||
target.on('hide.bs.collapse', function () {
|
||||
//$(this).parent.removeClass('rotate');
|
||||
// $(this).parent().find('.dropdownIndicator').removeClass('rotate');
|
||||
$(this).parent().find('.dropdownIndicator').removeClass('rotate');
|
||||
console.log('hide');
|
||||
});
|
||||
// bootstrap.Collapse.getOrCreateInstance(document.querySelector(this.dataset.refTarget))
|
||||
|
||||
7
static/js/normalizeToast.js
Normal file
7
static/js/normalizeToast.js
Normal file
@ -0,0 +1,7 @@
|
||||
function normalizeToast(){
|
||||
$('#generalToast').removeClass('text-bg-primary');
|
||||
$('#generalToast').removeClass('text-bg-success');
|
||||
$('#generalToast').removeClass('text-bg-danger');
|
||||
$('#generalToast').removeClass('text-bg-warning');
|
||||
$('#generalToast').removeClass('text-bg-info');
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user