mirror of
https://github.com/sotam0316/drawNET_test.git
synced 2026-04-25 03:58:38 +09:00
sotam0316
164 lines
8.5 KiB
JavaScript
164 lines
8.5 KiB
JavaScript
import { t } from '../../i18n.js';
|
|
|
|
/**
|
|
* Generates the HTML for node properties.
|
|
*/
|
|
export function getNodeTemplate(data, allGroups) {
|
|
return `
|
|
<div class="prop-group horizontal">
|
|
<label>${t('prop_id')}</label>
|
|
<input type="text" class="prop-input" value="${data.id}" readonly style="opacity: 0.5; font-size: 11px;">
|
|
</div>
|
|
<div class="prop-group">
|
|
<label>${t('prop_label')}</label>
|
|
<input type="text" class="prop-input" id="prop-label" value="${data.label || ''}">
|
|
</div>
|
|
<div class="prop-row">
|
|
<div class="prop-group">
|
|
<label>${t('prop_type')}</label>
|
|
<input type="text" class="prop-input" id="prop-type" value="${data.type || ''}">
|
|
</div>
|
|
<div class="prop-group">
|
|
<label>${t('prop_parent')}</label>
|
|
<select class="prop-input" id="prop-parent">
|
|
<option value="">${t('none')}</option>
|
|
${allGroups.map(g => {
|
|
const gData = g.getData() || {};
|
|
const label = gData.label || g.id;
|
|
// Debug log to confirm what the template sees
|
|
// console.log(`[Template:Node] Parent Option: ID=${g.id}, Label=${label}`);
|
|
return `<option value="${g.id}" ${data.parent === g.id ? 'selected' : ''}>${label}</option>`;
|
|
}).join('')}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="prop-row" style="margin-bottom: 8px;">
|
|
<div class="toggle-group" style="margin-bottom: 0; flex: 1;">
|
|
<label class="toggle-switch" style="padding: 10px;">
|
|
<span style="font-size: 11px;">GROUP</span>
|
|
<input type="checkbox" id="prop-is-group" class="prop-input" ${data.is_group ? 'checked' : ''}>
|
|
<div class="switch-slider"></div>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-group" style="margin-bottom: 0; flex: 1;">
|
|
<label class="toggle-switch danger" style="padding: 10px;">
|
|
<span style="color: #ef4444; font-size: 11px;"><i class="fas fa-lock"></i> LOCK</span>
|
|
<input type="checkbox" id="prop-locked" class="prop-input" ${data.locked ? 'checked' : ''}>
|
|
<div class="switch-slider"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="prop-row">
|
|
<div class="prop-group">
|
|
<label>${t('prop_label_color')}</label>
|
|
<input type="color" class="prop-input" id="prop-label-color" value="${data.color || data['text-color'] || '#64748b'}" style="height: 34px; padding: 2px;">
|
|
</div>
|
|
<div class="prop-group">
|
|
<label>${t('prop_label_pos')}</label>
|
|
<select class="prop-input" id="prop-label-pos">
|
|
${(() => {
|
|
const nodeType = (data.type || '').toLowerCase();
|
|
const defaultPos = data.is_group ? 'top' : (['rect', 'circle', 'rounded-rect', 'text-box', 'label'].includes(nodeType) ? 'center' : 'bottom');
|
|
const currentPos = data.label_pos || defaultPos;
|
|
return `
|
|
<option value="top" ${currentPos === 'top' ? 'selected' : ''}>${t('top')}</option>
|
|
<option value="bottom" ${currentPos === 'bottom' ? 'selected' : ''}>${t('bottom')}</option>
|
|
<option value="left" ${currentPos === 'left' ? 'selected' : ''}>${t('left')}</option>
|
|
<option value="right" ${currentPos === 'right' ? 'selected' : ''}>${t('right')}</option>
|
|
<option value="center" ${currentPos === 'center' ? 'selected' : ''}>${t('center')}</option>
|
|
`;
|
|
})()}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
${(() => {
|
|
const nodeType = (data.type || '').toLowerCase();
|
|
const primitives = ['rect', 'circle', 'rounded-rect', 'text-box', 'label', 'triangle', 'diamond', 'parallelogram', 'cylinder', 'document', 'manual-input', 'rack'];
|
|
if (data.is_group || primitives.includes(nodeType)) {
|
|
return `
|
|
<div class="prop-row">
|
|
<div class="prop-group">
|
|
<label>${t('prop_fill_color')}</label>
|
|
<input type="color" class="prop-input" id="prop-fill-color" value="${data.fill || data.background || '#ffffff'}" style="height: 34px; padding: 2px;">
|
|
</div>
|
|
<div class="prop-group">
|
|
<label>${t('prop_border_color')}</label>
|
|
<input type="color" class="prop-input" id="prop-border-color" value="${data.border || data['border-color'] || '#94a3b8'}" style="height: 34px; padding: 2px;">
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
return '';
|
|
})()}
|
|
|
|
<div class="prop-row">
|
|
${data.is_group ? `
|
|
<div class="prop-group">
|
|
<label>${t('prop_padding')}</label>
|
|
<input type="number" class="prop-input" id="prop-padding" value="${data.padding || 40}" min="0" max="200">
|
|
</div>
|
|
` : ''}
|
|
${data.type === 'rack' ? `
|
|
<div class="prop-group">
|
|
<label>${t('prop_slots')}</label>
|
|
<input type="number" class="prop-input" id="prop-slots" value="${data.slots || 42}" min="1" max="100">
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
|
|
<!-- PM Standard Attributes Section -->
|
|
<div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--panel-border);">
|
|
<div class="prop-row">
|
|
<div class="prop-group">
|
|
<label>${t('prop_vendor')}</label>
|
|
<input type="text" class="prop-input" id="prop-vendor" value="${data.vendor || ''}" placeholder="Cisco">
|
|
</div>
|
|
<div class="prop-group">
|
|
<label>${t('prop_model')}</label>
|
|
<input type="text" class="prop-input" id="prop-model" value="${data.model || ''}" placeholder="C9300">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prop-row">
|
|
<div class="prop-group">
|
|
<label>${t('prop_ip')}</label>
|
|
<input type="text" class="prop-input" id="prop-ip" value="${data.ip || ''}" placeholder="192.168.1.1">
|
|
</div>
|
|
<div class="prop-group">
|
|
<label>${t('prop_status')}</label>
|
|
<select class="prop-input" id="prop-status">
|
|
<option value="planning" ${data.status === 'planning' ? 'selected' : ''}>Plan</option>
|
|
<option value="installed" ${data.status === 'installed' ? 'selected' : ''}>Live</option>
|
|
<option value="retired" ${data.status === 'retired' ? 'selected' : ''}>None</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prop-row">
|
|
<div class="prop-group">
|
|
<label>${t('prop_project')}</label>
|
|
<input type="text" class="prop-input" id="prop-project" value="${data.project || ''}">
|
|
</div>
|
|
<div class="prop-group">
|
|
<label>${t('prop_env')}</label>
|
|
<select class="prop-input" id="prop-env">
|
|
<option value="prod" ${data.env === 'prod' ? 'selected' : ''}>PROD</option>
|
|
<option value="staging" ${data.env === 'staging' ? 'selected' : ''}>STG</option>
|
|
<option value="dev" ${data.env === 'dev' ? 'selected' : ''}>DEV</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="prop-group">
|
|
<label>${t('prop_tags')}</label>
|
|
<input type="text" class="prop-input" id="prop-tags" value="${(data.tags || []).join(', ')}">
|
|
</div>
|
|
<div class="prop-group">
|
|
<label>${t('prop_description')}</label>
|
|
<textarea class="prop-input" id="prop-description" rows="2" style="resize: vertical; min-height: 48px; font-size: 12px;">${data.description || ''}</textarea>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|