taggart

Simple golang tagging filesystem webapp
Log | Files | Refs

tag-alias.js (4489B)

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