ctucx.git: ctucx.things

simple inventory management web-app

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
46 
47 
48 
49 
50 
51 
52 
53 
54 
55 
56 
57 
58 
59 
60 
61 
62 
63 
64 
65 
66 
67 
68 
69 
70 
71 
72 
73 
74 
75 
76 
77 
78 
79 
80 
81 
82 
83 
84 
85 
86 
87 
88 
89 
90 
91 
92 
93 
94 
95 
96 
97 
98 
99 
100 
101 
102 
103 
import chart from './chart.js';

window.addEventListener('DOMContentLoaded', (event) => {
	const mgToWeight = (value, unit) => {
		if (unit == 'g') {
			return Math.round(100 * value / 1000.0) / 100;
		} if (unit == 'kg') {
			return Math.round(100 * value / 1000000.0, 2) / 100;
		}
	};

	const addParents = (chartData, parent) => {
		if (parent) chartData.parent = parent;
		for (const i in chartData.points) {
			addParents(chartData.points[i], chartData);
		}
	}

	document.querySelector('.lpList').querySelectorAll('.lpUnitSelect').forEach((element) => {
		element.addEventListener('click', (event) => {
			event.stopPropagation();

			element.classList.toggle('lpOpen');
			const value = element.querySelector('.lpUnit').value;
			element.getElementsByTagName('ul')[0].classList.remove('g');
			element.getElementsByTagName('ul')[0].classList.remove('kg');
			element.getElementsByTagName('ul')[0].classList.add(value);
		});
	});

	document.querySelector('.lpList').querySelectorAll('.lpUnitSelect li').forEach((element) => {
		element.addEventListener('click', (event) => {
			const unitSelect = element.parentNode.parentNode
			const unit       = element.textContent;

			unitSelect.querySelector('.lpDisplay').textContent = unit;
			unitSelect.querySelector('.lpUnit').value          = unit;

			if ( unitSelect.parentNode.className === "lpTotalUnit" ) {
				unitSelect.parentNode.parentNode.querySelector('.lpTotalValue').textContent = mgToWeight(parseFloat(unitSelect.querySelector('.lpMG').value), unit);
				document.querySelectorAll('.lpDisplaySubtotal').forEach((element) => {
					element.nextElementSibling.innerHTML = unit;
					element.innerHTML                    = mgToWeight(element.getAttribute('mg'), unit);
				});
			} else {
				document.querySelectorAll('.lpWeight').forEach((element) => {
					const weightCell = element.parentNode;

					element.textContent = mgToWeight(parseFloat(weightCell.querySelector('.lpMG').value), unit);
					weightCell.querySelector('.lpDisplay').textContent = unit;
				});
			}
		});
	});

	document.querySelector('.lpCategories').querySelectorAll('.lpItemImage').forEach((element) => {
		element.addEventListener('click', (event) => {
			const imageModal = document.getElementById('lpImageDialog');
			const image      = document.createElement('img');
			image.setAttribute('src', element.getAttribute('href'));

			while (imageModal.lastChild) {
				imageModal.removeChild(imageModal.lastChild);
			}

			imageModal.append(image);

			image.addEventListener('load', () => {
				imageModal.style.display = 'block';
				document.getElementById('modalOverlay').style.display = 'block';
			});
		});
	});

	document.getElementById('modalOverlay').addEventListener('click', () => {
		document.getElementById('modalOverlay').style.display = 'none';;
		document.getElementById('lpImageDialog').style.display = 'none';;
	});

	document.addEventListener('click', () => {
		document.querySelectorAll('.lpOpen').forEach((element) => {
			element.classList.remove('lpOpen');
		});
	});

	if (typeof chartData !== "undefined") {
		chartData = JSON.parse(unescape(chartData));
		addParents(chartData, false);
		chart({
			processedData: chartData,
			container:     document.getElementById('chartContainer'),
			hoverCallback: (chartItem) => {
				document.querySelectorAll('.hover').forEach((element) => {
					element.classList.remove('hover');
				});
			
				if (chartItem && chartItem.id) {
					document.getElementById(`total_${chartItem.id}`).classList.add('hover');
				}
			}
		});
	}
});