taggart

Simple golang tagging filesystem webapp
Log | Files | Refs

tag-alias.js (4027B)

      1 // Initialize from the global variable passed from the template
      2 let aliasGroups = window.initialAliasGroups || [];
      3 
      4 function renderAliasGroups() {
      5     const container = document.getElementById('alias-groups');
      6     container.innerHTML = '';
      7 
      8     aliasGroups.forEach((group, groupIndex) => {
      9         const groupDiv = document.createElement('div');
     10         groupDiv.style.cssText = 'border: 1px solid #ddd; padding: 15px; margin-bottom: 15px; border-radius: 4px; background-color: #f8f9fa;';
     11 
     12         groupDiv.innerHTML = `
     13             <div style="margin-bottom: 10px;">
     14                 <label style="display: block; font-weight: bold; margin-bottom: 5px;">Category:</label>
     15                 <input type="text"
     16                        value="${escapeHtml(group.category)}"
     17                        onchange="updateCategory(${groupIndex}, this.value)"
     18                        style="width: 200px; padding: 6px; font-size: 14px;"
     19                        placeholder="e.g., colour">
     20             </div>
     21 
     22             <div style="margin-bottom: 10px;">
     23                 <label style="display: block; font-weight: bold; margin-bottom: 5px;">Aliased Values:</label>
     24                 <div id="aliases-${groupIndex}"></div>
     25                 <button onclick="addAlias(${groupIndex})" type="button" class="text-button">+ Add Value</button>
     26             </div>
     27 
     28             <button onclick="removeAliasGroup(${groupIndex})" type="button" class="text-button">Remove Group</button>
     29         `;
     30 
     31         container.appendChild(groupDiv);
     32         renderAliases(groupIndex);
     33     });
     34 }
     35 
     36 function renderAliases(groupIndex) {
     37     const container = document.getElementById(`aliases-${groupIndex}`);
     38     container.innerHTML = '';
     39 
     40     const group = aliasGroups[groupIndex];
     41     if (!group.aliases) {
     42         group.aliases = [];
     43     }
     44 
     45     group.aliases.forEach((alias, aliasIndex) => {
     46         const aliasDiv = document.createElement('div');
     47         aliasDiv.style.cssText = 'display: flex; gap: 10px; margin-bottom: 5px; align-items: center;';
     48 
     49         aliasDiv.innerHTML = `
     50             <input type="text"
     51                    value="${escapeHtml(alias)}"
     52                    onchange="updateAlias(${groupIndex}, ${aliasIndex}, this.value)"
     53                    style="flex: 1; padding: 6px; font-size: 14px;"
     54                    placeholder="e.g., blue">
     55             <button onclick="removeAlias(${groupIndex}, ${aliasIndex})" type="button" class="text-button">Remove</button>
     56         `;
     57 
     58         container.appendChild(aliasDiv);
     59     });
     60 }
     61 
     62 function addAliasGroup() {
     63     aliasGroups.push({
     64         category: '',
     65         aliases: ['', '']
     66     });
     67     renderAliasGroups();
     68 }
     69 
     70 function removeAliasGroup(groupIndex) {
     71     if (confirm('Remove this alias group?')) {
     72         aliasGroups.splice(groupIndex, 1);
     73         renderAliasGroups();
     74     }
     75 }
     76 
     77 function updateCategory(groupIndex, value) {
     78     aliasGroups[groupIndex].category = value;
     79 }
     80 
     81 function addAlias(groupIndex) {
     82     aliasGroups[groupIndex].aliases.push('');
     83     renderAliases(groupIndex);
     84 }
     85 
     86 function removeAlias(groupIndex, aliasIndex) {
     87     aliasGroups[groupIndex].aliases.splice(aliasIndex, 1);
     88     renderAliases(groupIndex);
     89 }
     90 
     91 function updateAlias(groupIndex, aliasIndex, value) {
     92     aliasGroups[groupIndex].aliases[aliasIndex] = value;
     93 }
     94 
     95 function escapeHtml(text) {
     96     const div = document.createElement('div');
     97     div.textContent = text;
     98     return div.innerHTML;
     99 }
    100 
    101 document.getElementById('aliases-form').addEventListener('submit', function(e) {
    102     // Filter out empty groups and aliases
    103     const cleanedGroups = aliasGroups
    104         .filter(group => group.category && group.aliases && group.aliases.length > 0)
    105         .map(group => ({
    106             category: group.category.trim(),
    107             aliases: group.aliases.filter(a => a && a.trim()).map(a => a.trim())
    108         }))
    109         .filter(group => group.aliases.length >= 2); // Need at least 2 values to be an alias
    110 
    111     document.getElementById('aliases_json').value = JSON.stringify(cleanedGroups);
    112 });
    113 
    114 // Initial render
    115 renderAliasGroups();