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
elements.logCheckbox.addEventListener("change", function () {
elements.rowLogLevel.style.display = this.checked ? "block" : "none";
@@ -9,7 +11,7 @@ export function initBasicToggles(elements) {
}
// Define the initialize toggles function within scope
export function initMeasurementToggles(elements) {
initMeasurementToggles(elements) {
// Toggle visibility for scaling inputs
elements.scalingCheckbox.addEventListener("change", function () {
elements.rowInputMin.style.display = this.checked ? "block" : "none";
@@ -25,7 +27,7 @@ export function initMeasurementToggles(elements) {
: "none";
}
export function initTensionToggles(elements, node) {
initTensionToggles(elements, node) {
const currentMethod = node.interpolationMethod;
elements.rowTension.style.display =
currentMethod === "monotone_cubic_spline" ? "block" : "none";
@@ -46,14 +48,14 @@ export function initTensionToggles(elements, node) {
});
}
// Define the smoothing methods population function within scope
export function populateSmoothingMethods(configUrls, elements, node) {
fetchData(configUrls.cloud.config, configUrls.local.config)
populateSmoothingMethods(configUrls, elements, node) {
this.fetchData(configUrls.cloud.config, configUrls.local.config)
.then((configData) => {
const smoothingMethods =
configData.smoothing?.smoothMethod?.rules?.values?.map(
(o) => o.value
) || [];
populateDropdown(
this.populateDropdown(
elements.smoothMethod,
smoothingMethods,
node,
@@ -65,13 +67,13 @@ export function populateSmoothingMethods(configUrls, elements, node) {
});
}
export function populateInterpolationMethods(configUrls, elements, node) {
fetchData(configUrls.cloud.config, configUrls.local.config)
populateInterpolationMethods(configUrls, elements, node) {
this.fetchData(configUrls.cloud.config, configUrls.local.config)
.then((configData) => {
const interpolationMethods =
configData?.interpolation?.type?.rules?.values.map((m) => m.value) ||
[];
populateDropdown(
this.populateDropdown(
elements.interpolationMethodInput,
interpolationMethods,
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
//const selectedMethod = interpolationMethods.find(m => m === node.interpolationMethod);
initTensionToggles(elements, node);
this.initTensionToggles(elements, node);
})
.catch((err) => {
console.error("Error loading interpolation methods", err);
});
}
export function populateLogLevelOptions(logLevelSelect, configData, node) {
populateLogLevelOptions(logLevelSelect, configData, node) {
// debug log level
//console.log("Displaying configData => ", configData) ;
@@ -99,32 +101,31 @@ export function populateLogLevelOptions(logLevelSelect, configData, node) {
//console.log("Displaying logLevels => ", logLevels);
// 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
export function fetchAndPopulateDropdowns(configUrls, elements, node) {
fetchData(configUrls.cloud.config, configUrls.local.config)
fetchAndPopulateDropdowns(configUrls, elements, node) {
this.fetchData(configUrls.cloud.config, configUrls.local.config)
.then((configData) => {
const assetType = configData.asset?.type?.default;
const localSuppliersUrl = constructUrl(configUrls.local.taggcodeAPI,`${assetType}s`,"suppliers.json");
const cloudSuppliersUrl = constructCloudURL(configUrls.cloud.taggcodeAPI, "/vendor/get_vendors.php");
const localSuppliersUrl = this.constructUrl(configUrls.local.taggcodeAPI,`${assetType}s`,"suppliers.json");
const cloudSuppliersUrl = this.constructCloudURL(configUrls.cloud.taggcodeAPI, "/vendor/get_vendors.php");
return fetchData(cloudSuppliersUrl, localSuppliersUrl)
return this.fetchData(cloudSuppliersUrl, localSuppliersUrl)
.then((supplierData) => {
const suppliers = supplierData.map((supplier) => supplier.name);
// Populate suppliers dropdown and set up its change handler
return populateDropdown(
return this.populateDropdown(
elements.supplier,
suppliers,
node,
"supplier",
function (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(() => {
// If we have a saved supplier, trigger subTypes population
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 localConfigURL = "http://localhost:1880/"+ nodeName + "/dependencies/"+ nodeName + "/" + nodeName + "Config.json";
return { cloudConfigURL, localConfigURL };
}
}
// Save changes to API
export async function apiCall(node) {
async apiCall(node) {
try{
// OLFIANT when a browser refreshes the tag code is lost!!! fix this 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 {
const response = await fetch(url);
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 {
const response = await fetch(url);
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,
options,
node,
property,
callback
) {
generateHtml(htmlElement, options, node[property]);
this.generateHtml(htmlElement, options, node[property]);
htmlElement.addEventListener("change", async (e) => {
const newValue = e.target.value;
@@ -285,7 +286,7 @@ async function populateDropdown(
}
// 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
const sanitizedBase = (base || "").replace(/\/+$/, "");
@@ -300,7 +301,7 @@ function constructUrl(base, ...paths) {
}
//Adjust for API Gateway
function constructCloudURL(base, ...paths) {
constructCloudURL(base, ...paths) {
// Remove trailing slash from base and leading slashes from paths
const sanitizedBase = base.replace(/\/+$/, "");
const sanitizedPaths = paths.map((path) => path.replace(/^\/+|\/+$/g, ""));
@@ -309,21 +310,21 @@ function constructCloudURL(base, ...paths) {
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) => {
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 cloudSubTypesUrl = constructCloudURL(configUrls.cloud.taggcodeAPI, "/product/get_subtypesFromVendor.php?vendor_name=" + selectedSupplier);
const localSubTypesUrl = this.constructUrl(supplierFolder, "subtypes.json");
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) => {
const subTypes = subTypeData.map((subType) => subType.name);
return populateDropdown(
return this.populateDropdown(
elements.subType,
subTypes,
node,
@@ -331,14 +332,14 @@ function populateSubTypes(configUrls, elements, node, selectedSupplier) {
function (selectedSubType) {
if (selectedSubType) {
// When subType changes, update both models and units
populateModels(
this.populateModels(
configUrls,
elements,
node,
selectedSupplier,
selectedSubType
);
populateUnitsForSubType(
this.populateUnitsForSubType(
configUrls,
elements,
node,
@@ -351,14 +352,14 @@ function populateSubTypes(configUrls, elements, node, selectedSupplier) {
.then(() => {
// If we have a saved subType, trigger both models and units population
if (node.subType) {
populateModels(
this.populateModels(
configUrls,
elements,
node,
selectedSupplier,
node.subType
);
populateUnitsForSubType(configUrls, elements, node, node.subType);
this.populateUnitsForSubType(configUrls, elements, node, node.subType);
}
//console.log("In fetch part of subtypes ");
// 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
fetchData(configUrls.cloud.units, configUrls.local.units)
this.fetchData(configUrls.cloud.units, configUrls.local.units)
.then((unitsData) => {
// Find the category that matches the subType name
const categoryData = unitsData.units.find(
@@ -397,7 +398,7 @@ function populateUnitsForSubType(configUrls, elements, node, selectedSubType) {
}));
// Populate the units dropdown
populateDropdown(
this.populateDropdown(
elements.unit,
options.map((opt) => opt.value),
node,
@@ -412,7 +413,7 @@ function populateUnitsForSubType(configUrls, elements, node, selectedSubType) {
} else {
// If no matching category is found, provide a default % option
const defaultUnits = [{ value: "%", description: "Percentage" }];
populateDropdown(
this.populateDropdown(
elements.unit,
defaultUnits.map((unit) => unit.value),
node,
@@ -428,7 +429,7 @@ function populateUnitsForSubType(configUrls, elements, node, selectedSubType) {
});
}
function populateModels(
populateModels(
configUrls,
elements,
node,
@@ -436,18 +437,18 @@ function populateModels(
selectedSubType
) {
fetchData(configUrls.cloud.config, configUrls.local.config)
this.fetchData(configUrls.cloud.config, configUrls.local.config)
.then((configData) => {
const assetType = configData.asset?.type?.default;
// save assetType to fetch later
node.assetType = assetType;
const supplierFolder = constructUrl( configUrls.local.taggcodeAPI,`${assetType}s`,selectedSupplier);
const subTypeFolder = constructUrl(supplierFolder, selectedSubType);
const localModelsUrl = constructUrl(subTypeFolder, "models.json");
const cloudModelsUrl = constructCloudURL(configUrls.cloud.taggcodeAPI, "/product/get_product_models.php?vendor_name=" + selectedSupplier + "&product_subtype_name=" + selectedSubType);
const supplierFolder = this.constructUrl( configUrls.local.taggcodeAPI,`${assetType}s`,selectedSupplier);
const subTypeFolder = this.constructUrl(supplierFolder, selectedSubType);
const localModelsUrl = this.constructUrl(subTypeFolder, "models.json");
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
// 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);
}
populateDropdown(elements.model, models, node, "model", (selectedModel) => {
this.populateDropdown(elements.model, models, node, "model", (selectedModel) => {
// Store only the metadata for the selected model
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
? `<option value="">Select...</option>${options
.map((opt) => `<option value="${opt}">${opt}</option>`)
@@ -482,3 +483,7 @@ function generateHtml(htmlElement, options, savedValue) {
htmlElement.value = savedValue;
}
}
}
module.exports = MenuUtils;