update
This commit is contained in:
znetsixe
@@ -1,207 +0,0 @@
|
|||||||
/**
|
|
||||||
* taggcodeApp.js
|
|
||||||
* Dynamische AssetMenu implementatie met TagcodeApp API
|
|
||||||
* Vervangt de statische assetData met calls naar REST-endpoints.
|
|
||||||
*/
|
|
||||||
|
|
||||||
class TagcodeApp {
|
|
||||||
constructor(baseURL = 'https://pimmoerman.nl/rdlab/tagcode.app/v2.1/api') {
|
|
||||||
this.baseURL = baseURL;
|
|
||||||
}
|
|
||||||
|
|
||||||
async fetchData(path, params = {}) {
|
|
||||||
const url = new URL(`${this.baseURL}/${path}`);
|
|
||||||
Object.entries(params).forEach(([key, value]) => {
|
|
||||||
url.searchParams.append(key, value);
|
|
||||||
});
|
|
||||||
const response = await fetch(url);
|
|
||||||
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
||||||
const json = await response.json();
|
|
||||||
if (!json.success) throw new Error(json.error || json.message);
|
|
||||||
return json.data;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Asset endpoints
|
|
||||||
getAllAssets() {
|
|
||||||
return this.fetchData('asset/get_all_assets.php');
|
|
||||||
}
|
|
||||||
|
|
||||||
getAssetDetail(tag_code) {
|
|
||||||
return this.fetchData('asset/get_detail_asset.php', { tag_code });
|
|
||||||
}
|
|
||||||
|
|
||||||
getAssetHistory(asset_tag_number) {
|
|
||||||
return this.fetchData('asset/get_history_asset.php', { asset_tag_number });
|
|
||||||
}
|
|
||||||
|
|
||||||
getAssetHierarchy(asset_tag_number) {
|
|
||||||
return this.fetchData('asset/get_asset_hierarchy.php', { asset_tag_number });
|
|
||||||
}
|
|
||||||
|
|
||||||
createOrUpdateAsset(params) {
|
|
||||||
// Bij create/update worden alle velden via query params meegegeven
|
|
||||||
return this.fetchData('asset/create_asset.php', params);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Product & vendor endpoints
|
|
||||||
getVendors() {
|
|
||||||
return this.fetchData('vendor/get_vendors.php');
|
|
||||||
}
|
|
||||||
|
|
||||||
getSubtypes(vendor_name) {
|
|
||||||
return this.fetchData('product/get_subtypesFromVendor.php', { vendor_name });
|
|
||||||
}
|
|
||||||
|
|
||||||
getProductModels(vendor_name, product_subtype_name) {
|
|
||||||
return this.fetchData('product/get_product_models.php', { vendor_name, product_subtype_name });
|
|
||||||
}
|
|
||||||
|
|
||||||
getLocations() {
|
|
||||||
return this.fetchData('location/get_locations.php');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class DynamicAssetMenu {
|
|
||||||
constructor(nodeName, api = new TagcodeApp()) {
|
|
||||||
this.nodeName = nodeName;
|
|
||||||
this.api = api;
|
|
||||||
this.data = {
|
|
||||||
vendors: [],
|
|
||||||
subtypes: {}, // per vendor
|
|
||||||
models: {} // per vendor+subtype
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Initialiseer: haal vendors en locaties eenmalig op
|
|
||||||
*/
|
|
||||||
async init() {
|
|
||||||
this.data.vendors = await this.api.getVendors();
|
|
||||||
this.data.locations = await this.api.getLocations();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Injecteer HTML, data en events
|
|
||||||
*/
|
|
||||||
getClientInitCode() {
|
|
||||||
const node = this.nodeName;
|
|
||||||
return `
|
|
||||||
// --- DynamicAssetMenu voor ${node} ---
|
|
||||||
window.TagcodeApp = window.TagcodeApp || ${TagcodeApp.toString()};
|
|
||||||
window.assetAPI = window.assetAPI || new TagcodeApp();
|
|
||||||
|
|
||||||
// Helper populate
|
|
||||||
function populate(el, opts, sel) {
|
|
||||||
const old = el.value;
|
|
||||||
el.innerHTML = '<option value="">Select…</option>';
|
|
||||||
(opts||[]).forEach(o=>{
|
|
||||||
const opt = document.createElement('option');
|
|
||||||
opt.value = o; opt.textContent = o;
|
|
||||||
el.appendChild(opt);
|
|
||||||
});
|
|
||||||
el.value = sel || '';
|
|
||||||
if (el.value !== old) el.dispatchEvent(new Event('change'));
|
|
||||||
}
|
|
||||||
|
|
||||||
// InitEditor
|
|
||||||
window.EVOLV.nodes.${node}.assetMenu.initEditor = async function(node) {
|
|
||||||
this.injectHtml();
|
|
||||||
// eerst: laad vendor-lijst
|
|
||||||
const vendors = await window.assetAPI.getVendors();
|
|
||||||
const vendorNames = vendors.map(v=>v.name);
|
|
||||||
populate(document.getElementById('node-input-supplier'), vendorNames, node.supplier);
|
|
||||||
|
|
||||||
// wire events
|
|
||||||
const elems = {
|
|
||||||
supplier: document.getElementById('node-input-supplier'),
|
|
||||||
category: document.getElementById('node-input-category'),
|
|
||||||
type: document.getElementById('node-input-assetType'),
|
|
||||||
model: document.getElementById('node-input-model'),
|
|
||||||
unit: document.getElementById('node-input-unit')
|
|
||||||
};
|
|
||||||
|
|
||||||
elems.supplier.addEventListener('change', async ()=>{
|
|
||||||
const v = elems.supplier.value;
|
|
||||||
if (!v) return populate(elems.category, [], '');
|
|
||||||
const subs = await window.assetAPI.getSubtypes(v);
|
|
||||||
const names = subs.map(s=>s.name);
|
|
||||||
populate(elems.category, names, node.category);
|
|
||||||
});
|
|
||||||
|
|
||||||
elems.category.addEventListener('change', async ()=>{
|
|
||||||
const v = elems.supplier.value, c = elems.category.value;
|
|
||||||
if (!v||!c) return populate(elems.type, [], '');
|
|
||||||
const models = await window.assetAPI.getProductModels(v, c);
|
|
||||||
window._currentModels = models; // tijdelijk cachen
|
|
||||||
const types = Array.from(new Set(models.map(m=>m.product_model_type)));
|
|
||||||
populate(elems.type, types, node.assetType);
|
|
||||||
});
|
|
||||||
|
|
||||||
elems.type.addEventListener('change', ()=>{
|
|
||||||
const t = elems.type.value;
|
|
||||||
const models = window._currentModels || [];
|
|
||||||
const filtered = models.filter(m=>m.product_model_type===t);
|
|
||||||
const names = filtered.map(m=>m.name);
|
|
||||||
window._filteredModels = filtered;
|
|
||||||
populate(elems.model, names, node.model);
|
|
||||||
});
|
|
||||||
|
|
||||||
elems.model.addEventListener('change', ()=>{
|
|
||||||
const m = elems.model.value;
|
|
||||||
const models = window._filteredModels || [];
|
|
||||||
const entry = models.find(x=>x.name===m);
|
|
||||||
const units = entry && entry.product_model_meta ? Object.keys(entry.product_model_meta) : [];
|
|
||||||
populate(elems.unit, units, node.unit);
|
|
||||||
});
|
|
||||||
|
|
||||||
// laadt opgeslagen waarden
|
|
||||||
if (node.supplier) elems.supplier.dispatchEvent(new Event('change'));
|
|
||||||
};
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
getHtmlTemplate() {
|
|
||||||
return `
|
|
||||||
<!-- Asset Properties -->
|
|
||||||
<hr />
|
|
||||||
<h3>Asset selection</h3>
|
|
||||||
<div class="form-row">
|
|
||||||
<label for="node-input-supplier"><i class="fa fa-industry"></i> Supplier</label>
|
|
||||||
<select id="node-input-supplier" style="width:70%;"></select>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<label for="node-input-category"><i class="fa fa-sitemap"></i> Category</label>
|
|
||||||
<select id="node-input-category" style="width:70%;"></select>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<label for="node-input-assetType"><i class="fa fa-puzzle-piece"></i> Type</label>
|
|
||||||
<select id="node-input-assetType" style="width:70%;"></select>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<label for="node-input-model"><i class="fa fa-wrench"></i> Model</label>
|
|
||||||
<select id="node-input-model" style="width:70%;"></select>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<label for="node-input-unit"><i class="fa fa-balance-scale"></i> Unit</label>
|
|
||||||
<select id="node-input-unit" style="width:70%;"></select>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
getHtmlInjectionCode() {
|
|
||||||
const tmpl = this.getHtmlTemplate().replace(/`/g, '\\`').replace(/\$/g, '\\\$');
|
|
||||||
return `
|
|
||||||
// Asset HTML injection voor ${this.nodeName}
|
|
||||||
window.EVOLV.nodes.${this.nodeName}.assetMenu.injectHtml = function() {
|
|
||||||
const placeholder = document.getElementById('asset-fields-placeholder');
|
|
||||||
if (placeholder && !placeholder.hasChildNodes()) {
|
|
||||||
placeholder.innerHTML = \`${tmpl}\`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Exporteer voor gebruik in Node-RED
|
|
||||||
module.exports = { TagcodeApp, DynamicAssetMenu };
|
|
||||||
Reference in New Issue
Block a user