Project-Name-Here/assetflow
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

The BIG frontend update

Browse Source
This commit is contained in:
Leon
2023-05-16 22:58:08 +02:00
parent 04b5bd60f2
commit bd9f629690
22 changed files with 459 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
static/css/dashboard.css
View File

@ -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;
}
@ -132,4 +139,4 @@ body {
.loaderActive {
display: block !important;
}
}

23
static/css/login.css Normal file
View 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;
}

10
static/js/editCategory.js
View File

@ -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.');

276
static/js/editStorages.js
View File

@ -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()

24
static/js/formHandler.js
View File

@ -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);
},
@ -41,17 +38,24 @@ $('.frontendForm').each(function() {
console.log('error');
// 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');
$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
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
static/js/handleSidebarTriangles.js
View File

@ -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
View 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');
}