janneketack/generalFunctions
1
0
Fork 0
forked from RnD/generalFunctions
Code Pull Requests Activity

changed ES6 to normal javascript way of requiring and did export in html file to pass the menuUtils globally to avoid the whole serving part

Browse Source
This commit is contained in:
znetsixe
2025-06-10 17:47:26 +02:00
parent 26ed170932
commit 08487ae280
1 changed files with 59 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
helper/menuUtils.js
View File

@@ -1,4 +1,6 @@
export function initBasicToggles(elements) { class MenuUtils {
initBasicToggles(elements) {
// Toggle visibility for log level // Toggle visibility for log level
elements.logCheckbox.addEventListener("change", function () { elements.logCheckbox.addEventListener("change", function () {
elements.rowLogLevel.style.display = this.checked ? "block" : "none"; elements.rowLogLevel.style.display = this.checked ? "block" : "none";
@@ -9,7 +11,7 @@ export function initBasicToggles(elements) {
} }
// Define the initialize toggles function within scope // Define the initialize toggles function within scope
export function initMeasurementToggles(elements) { initMeasurementToggles(elements) {
// Toggle visibility for scaling inputs // Toggle visibility for scaling inputs
elements.scalingCheckbox.addEventListener("change", function () { elements.scalingCheckbox.addEventListener("change", function () {
elements.rowInputMin.style.display = this.checked ? "block" : "none"; elements.rowInputMin.style.display = this.checked ? "block" : "none";
@@ -25,7 +27,7 @@ export function initMeasurementToggles(elements) {
: "none"; : "none";
} }
export function initTensionToggles(elements, node) { initTensionToggles(elements, node) {
const currentMethod = node.interpolationMethod; const currentMethod = node.interpolationMethod;
elements.rowTension.style.display = elements.rowTension.style.display =
currentMethod === "monotone_cubic_spline" ? "block" : "none"; currentMethod === "monotone_cubic_spline" ? "block" : "none";
@@ -46,14 +48,14 @@ export function initTensionToggles(elements, node) {
}); });
} }
// Define the smoothing methods population function within scope // Define the smoothing methods population function within scope
export function populateSmoothingMethods(configUrls, elements, node) { populateSmoothingMethods(configUrls, elements, node) {
fetchData(configUrls.cloud.config, configUrls.local.config) this.fetchData(configUrls.cloud.config, configUrls.local.config)
.then((configData) => { .then((configData) => {
const smoothingMethods = const smoothingMethods =
configData.smoothing?.smoothMethod?.rules?.values?.map( configData.smoothing?.smoothMethod?.rules?.values?.map(
(o) => o.value (o) => o.value
) || []; ) || [];
populateDropdown( this.populateDropdown(
elements.smoothMethod, elements.smoothMethod,
smoothingMethods, smoothingMethods,
node, node,
@@ -65,13 +67,13 @@ export function populateSmoothingMethods(configUrls, elements, node) {
}); });
} }
export function populateInterpolationMethods(configUrls, elements, node) { populateInterpolationMethods(configUrls, elements, node) {
fetchData(configUrls.cloud.config, configUrls.local.config) this.fetchData(configUrls.cloud.config, configUrls.local.config)
.then((configData) => { .then((configData) => {
const interpolationMethods = const interpolationMethods =
configData?.interpolation?.type?.rules?.values.map((m) => m.value) || configData?.interpolation?.type?.rules?.values.map((m) => m.value) ||
[]; [];
populateDropdown( this.populateDropdown(
elements.interpolationMethodInput, elements.interpolationMethodInput,
interpolationMethods, interpolationMethods,
node, node,
@@ -80,14 +82,14 @@ export function populateInterpolationMethods(configUrls, elements, node) {
// Find the selected method and use it to spawn 1 more field to fill in tension // Find the selected method and use it to spawn 1 more field to fill in tension
//const selectedMethod = interpolationMethods.find(m => m === node.interpolationMethod); //const selectedMethod = interpolationMethods.find(m => m === node.interpolationMethod);
initTensionToggles(elements, node); this.initTensionToggles(elements, node);
}) })
.catch((err) => { .catch((err) => {
console.error("Error loading interpolation methods", err); console.error("Error loading interpolation methods", err);
}); });
} }
export function populateLogLevelOptions(logLevelSelect, configData, node) { populateLogLevelOptions(logLevelSelect, configData, node) {
// debug log level // debug log level
//console.log("Displaying configData => ", configData) ; //console.log("Displaying configData => ", configData) ;
@@ -99,32 +101,31 @@ export function populateLogLevelOptions(logLevelSelect, configData, node) {
//console.log("Displaying logLevels => ", logLevels); //console.log("Displaying logLevels => ", logLevels);
// Reuse your existing generic populateDropdown helper // Reuse your existing generic populateDropdown helper
populateDropdown(logLevelSelect, logLevels, node.logLevel); this.populateDropdown(logLevelSelect, logLevels, node.logLevel);
} }
//cascade dropdowns for asset type, supplier, subType, model, unit //cascade dropdowns for asset type, supplier, subType, model, unit
export function fetchAndPopulateDropdowns(configUrls, elements, node) { fetchAndPopulateDropdowns(configUrls, elements, node) {
this.fetchData(configUrls.cloud.config, configUrls.local.config)
fetchData(configUrls.cloud.config, configUrls.local.config)
.then((configData) => { .then((configData) => {
const assetType = configData.asset?.type?.default; const assetType = configData.asset?.type?.default;
const localSuppliersUrl = constructUrl(configUrls.local.taggcodeAPI,`${assetType}s`,"suppliers.json"); const localSuppliersUrl = this.constructUrl(configUrls.local.taggcodeAPI,`${assetType}s`,"suppliers.json");
const cloudSuppliersUrl = constructCloudURL(configUrls.cloud.taggcodeAPI, "/vendor/get_vendors.php"); const cloudSuppliersUrl = this.constructCloudURL(configUrls.cloud.taggcodeAPI, "/vendor/get_vendors.php");
return fetchData(cloudSuppliersUrl, localSuppliersUrl) return this.fetchData(cloudSuppliersUrl, localSuppliersUrl)
.then((supplierData) => { .then((supplierData) => {
const suppliers = supplierData.map((supplier) => supplier.name); const suppliers = supplierData.map((supplier) => supplier.name);
// Populate suppliers dropdown and set up its change handler // Populate suppliers dropdown and set up its change handler
return populateDropdown( return this.populateDropdown(
elements.supplier, elements.supplier,
suppliers, suppliers,
node, node,
"supplier", "supplier",
function (selectedSupplier) { function (selectedSupplier) {
if (selectedSupplier) { if (selectedSupplier) {
populateSubTypes(configUrls, elements, node, selectedSupplier); this.populateSubTypes(configUrls, elements, node, selectedSupplier);
} }
} }
); );
@@ -132,7 +133,7 @@ export function fetchAndPopulateDropdowns(configUrls, elements, node) {
.then(() => { .then(() => {
// If we have a saved supplier, trigger subTypes population // If we have a saved supplier, trigger subTypes population
if (node.supplier) { if (node.supplier) {
populateSubTypes(configUrls, elements, node, node.supplier); this.populateSubTypes(configUrls, elements, node, node.supplier);
} }
}); });
}) })
@@ -141,17 +142,17 @@ export function fetchAndPopulateDropdowns(configUrls, elements, node) {
}); });
} }
export function getSpecificConfigUrl(nodeName,cloudAPI) { getSpecificConfigUrl(nodeName,cloudAPI) {
const cloudConfigURL = cloudAPI + "/config/" + nodeName + ".json"; const cloudConfigURL = cloudAPI + "/config/" + nodeName + ".json";
const localConfigURL = "http://localhost:1880/"+ nodeName + "/dependencies/"+ nodeName + "/" + nodeName + "Config.json"; const localConfigURL = "http://localhost:1880/"+ nodeName + "/dependencies/"+ nodeName + "/" + nodeName + "Config.json";
return { cloudConfigURL, localConfigURL }; return { cloudConfigURL, localConfigURL };
} }
// Save changes to API // Save changes to API
export async function apiCall(node) { async apiCall(node) {
try{ try{
// OLFIANT when a browser refreshes the tag code is lost!!! fix this later!!!!! // OLFIANT when a browser refreshes the tag code is lost!!! fix this later!!!!!
// FIX UUID ALSO LATER // FIX UUID ALSO LATER
@@ -218,7 +219,7 @@ export async function apiCall(node) {
} }
export async function fetchData(url, fallbackUrl) { async fetchData(url, fallbackUrl) {
try { try {
const response = await fetch(url); const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
@@ -253,7 +254,7 @@ export async function fetchData(url, fallbackUrl) {
} }
} }
export async function fetchProjectData(url) { async fetchProjectData(url) {
try { try {
const response = await fetch(url); const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
@@ -265,14 +266,14 @@ export async function fetchProjectData(url) {
} }
} }
async function populateDropdown( async populateDropdown(
htmlElement, htmlElement,
options, options,
node, node,
property, property,
callback callback
) { ) {
generateHtml(htmlElement, options, node[property]); this.generateHtml(htmlElement, options, node[property]);
htmlElement.addEventListener("change", async (e) => { htmlElement.addEventListener("change", async (e) => {
const newValue = e.target.value; const newValue = e.target.value;
@@ -285,7 +286,7 @@ async function populateDropdown(
} }
// Helper function to construct a URL from a base and path internal // Helper function to construct a URL from a base and path internal
function constructUrl(base, ...paths) { constructUrl(base, ...paths) {
// Remove trailing slash from base and leading slashes from paths // Remove trailing slash from base and leading slashes from paths
const sanitizedBase = (base || "").replace(/\/+$/, ""); const sanitizedBase = (base || "").replace(/\/+$/, "");
@@ -300,7 +301,7 @@ function constructUrl(base, ...paths) {
} }
//Adjust for API Gateway //Adjust for API Gateway
function constructCloudURL(base, ...paths) { constructCloudURL(base, ...paths) {
// Remove trailing slash from base and leading slashes from paths // Remove trailing slash from base and leading slashes from paths
const sanitizedBase = base.replace(/\/+$/, ""); const sanitizedBase = base.replace(/\/+$/, "");
const sanitizedPaths = paths.map((path) => path.replace(/^\/+|\/+$/g, "")); const sanitizedPaths = paths.map((path) => path.replace(/^\/+|\/+$/g, ""));
@@ -309,21 +310,21 @@ function constructCloudURL(base, ...paths) {
return url; return url;
} }
function populateSubTypes(configUrls, elements, node, selectedSupplier) { populateSubTypes(configUrls, elements, node, selectedSupplier) {
fetchData(configUrls.cloud.config, configUrls.local.config) this.fetchData(configUrls.cloud.config, configUrls.local.config)
.then((configData) => { .then((configData) => {
const assetType = configData.asset?.type?.default; const assetType = configData.asset?.type?.default;
const supplierFolder = constructUrl( configUrls.local.taggcodeAPI, `${assetType}s`, selectedSupplier ); const supplierFolder = this.constructUrl( configUrls.local.taggcodeAPI, `${assetType}s`, selectedSupplier );
const localSubTypesUrl = constructUrl(supplierFolder, "subtypes.json"); const localSubTypesUrl = this.constructUrl(supplierFolder, "subtypes.json");
const cloudSubTypesUrl = constructCloudURL(configUrls.cloud.taggcodeAPI, "/product/get_subtypesFromVendor.php?vendor_name=" + selectedSupplier); const cloudSubTypesUrl = this.constructCloudURL(configUrls.cloud.taggcodeAPI, "/product/get_subtypesFromVendor.php?vendor_name=" + selectedSupplier);
return fetchData(cloudSubTypesUrl, localSubTypesUrl) return this.fetchData(cloudSubTypesUrl, localSubTypesUrl)
.then((subTypeData) => { .then((subTypeData) => {
const subTypes = subTypeData.map((subType) => subType.name); const subTypes = subTypeData.map((subType) => subType.name);
return populateDropdown( return this.populateDropdown(
elements.subType, elements.subType,
subTypes, subTypes,
node, node,
@@ -331,14 +332,14 @@ function populateSubTypes(configUrls, elements, node, selectedSupplier) {
function (selectedSubType) { function (selectedSubType) {
if (selectedSubType) { if (selectedSubType) {
// When subType changes, update both models and units // When subType changes, update both models and units
populateModels( this.populateModels(
configUrls, configUrls,
elements, elements,
node, node,
selectedSupplier, selectedSupplier,
selectedSubType selectedSubType
); );
populateUnitsForSubType( this.populateUnitsForSubType(
configUrls, configUrls,
elements, elements,
node, node,
@@ -351,14 +352,14 @@ function populateSubTypes(configUrls, elements, node, selectedSupplier) {
.then(() => { .then(() => {
// If we have a saved subType, trigger both models and units population // If we have a saved subType, trigger both models and units population
if (node.subType) { if (node.subType) {
populateModels( this.populateModels(
configUrls, configUrls,
elements, elements,
node, node,
selectedSupplier, selectedSupplier,
node.subType node.subType
); );
populateUnitsForSubType(configUrls, elements, node, node.subType); this.populateUnitsForSubType(configUrls, elements, node, node.subType);
} }
//console.log("In fetch part of subtypes "); //console.log("In fetch part of subtypes ");
// Store all data from selected model // Store all data from selected model
@@ -373,9 +374,9 @@ function populateSubTypes(configUrls, elements, node, selectedSupplier) {
}); });
} }
function populateUnitsForSubType(configUrls, elements, node, selectedSubType) { populateUnitsForSubType(configUrls, elements, node, selectedSubType) {
// Fetch the units data // Fetch the units data
fetchData(configUrls.cloud.units, configUrls.local.units) this.fetchData(configUrls.cloud.units, configUrls.local.units)
.then((unitsData) => { .then((unitsData) => {
// Find the category that matches the subType name // Find the category that matches the subType name
const categoryData = unitsData.units.find( const categoryData = unitsData.units.find(
@@ -397,7 +398,7 @@ function populateUnitsForSubType(configUrls, elements, node, selectedSubType) {
})); }));
// Populate the units dropdown // Populate the units dropdown
populateDropdown( this.populateDropdown(
elements.unit, elements.unit,
options.map((opt) => opt.value), options.map((opt) => opt.value),
node, node,
@@ -412,7 +413,7 @@ function populateUnitsForSubType(configUrls, elements, node, selectedSubType) {
} else { } else {
// If no matching category is found, provide a default % option // If no matching category is found, provide a default % option
const defaultUnits = [{ value: "%", description: "Percentage" }]; const defaultUnits = [{ value: "%", description: "Percentage" }];
populateDropdown( this.populateDropdown(
elements.unit, elements.unit,
defaultUnits.map((unit) => unit.value), defaultUnits.map((unit) => unit.value),
node, node,
@@ -428,7 +429,7 @@ function populateUnitsForSubType(configUrls, elements, node, selectedSubType) {
}); });
} }
function populateModels( populateModels(
configUrls, configUrls,
elements, elements,
node, node,
@@ -436,18 +437,18 @@ function populateModels(
selectedSubType selectedSubType
) { ) {
fetchData(configUrls.cloud.config, configUrls.local.config) this.fetchData(configUrls.cloud.config, configUrls.local.config)
.then((configData) => { .then((configData) => {
const assetType = configData.asset?.type?.default; const assetType = configData.asset?.type?.default;
// save assetType to fetch later // save assetType to fetch later
node.assetType = assetType; node.assetType = assetType;
const supplierFolder = constructUrl( configUrls.local.taggcodeAPI,`${assetType}s`,selectedSupplier); const supplierFolder = this.constructUrl( configUrls.local.taggcodeAPI,`${assetType}s`,selectedSupplier);
const subTypeFolder = constructUrl(supplierFolder, selectedSubType); const subTypeFolder = this.constructUrl(supplierFolder, selectedSubType);
const localModelsUrl = constructUrl(subTypeFolder, "models.json"); const localModelsUrl = this.constructUrl(subTypeFolder, "models.json");
const cloudModelsUrl = constructCloudURL(configUrls.cloud.taggcodeAPI, "/product/get_product_models.php?vendor_name=" + selectedSupplier + "&product_subtype_name=" + selectedSubType); const cloudModelsUrl = this.constructCloudURL(configUrls.cloud.taggcodeAPI, "/product/get_product_models.php?vendor_name=" + selectedSupplier + "&product_subtype_name=" + selectedSubType);
return fetchData(cloudModelsUrl, localModelsUrl).then((modelData) => { return this.fetchData(cloudModelsUrl, localModelsUrl).then((modelData) => {
const models = modelData.map((model) => model.name); // use this to populate the dropdown const models = modelData.map((model) => model.name); // use this to populate the dropdown
// If a model is already selected, store its metadata immediately // If a model is already selected, store its metadata immediately
@@ -455,7 +456,7 @@ function populateModels(
node["modelMetadata"] = modelData.find((model) => model.name === node.model); node["modelMetadata"] = modelData.find((model) => model.name === node.model);
} }
populateDropdown(elements.model, models, node, "model", (selectedModel) => { this.populateDropdown(elements.model, models, node, "model", (selectedModel) => {
// Store only the metadata for the selected model // Store only the metadata for the selected model
node["modelMetadata"] = modelData.find((model) => model.name === selectedModel); node["modelMetadata"] = modelData.find((model) => model.name === selectedModel);
}); });
@@ -471,7 +472,7 @@ function populateModels(
}); });
} }
function generateHtml(htmlElement, options, savedValue) { generateHtml(htmlElement, options, savedValue) {
htmlElement.innerHTML = options.length htmlElement.innerHTML = options.length
? `<option value="">Select...</option>${options ? `<option value="">Select...</option>${options
.map((opt) => `<option value="${opt}">${opt}</option>`) .map((opt) => `<option value="${opt}">${opt}</option>`)
@@ -482,3 +483,7 @@ function generateHtml(htmlElement, options, savedValue) {
htmlElement.value = savedValue; htmlElement.value = savedValue;
} }
} }
}
module.exports = MenuUtils;