Update static/js/project.js

static/js/project.js

@@ -1,183 +1,119 @@
-let currentParameters = [];
-
-function listProjects() {
-    apiGet('/project/list')
-        .then(data => {
-            const select = document.getElementById('project-select');
-            select.innerHTML = '<option value="">-- Select a project --</option>';
-            Object.keys(data).forEach(project => {
-                const option = document.createElement('option');
-                option.value = project;
-                option.text = project;
-                select.appendChild(option);
-            });
-        })
-        .catch(err => console.error(err));
+// project.js
+document.addEventListener('DOMContentLoaded', function() {
+    loadProjectDetails();
+    setupEventListeners();
+});
+
+function setupEventListeners() {
+    document.getElementById('saveChangesBtn').addEventListener('click', saveProject);
+    document.getElementById('publishVersionBtn').addEventListener('click', publishProject);
+    document.getElementById('addIntentBtn').addEventListener('click', showAddIntentModal);
+    document.getElementById('newVersionBtn').addEventListener('click', showNewVersionModal);
 }
 
 function loadProjectDetails() {
-    const project = document.getElementById('project-select').value;
-    if (!project) return;
-
-    apiGet(`/project/${project}/latest`)
+    fetch('/project/details')
+        .then(response => response.json())
         .then(data => {
-            const details = document.getElementById('project-details');
-            const info = document.getElementById('project-info');
-            details.classList.remove('d-none');
-
-            let html = `<p><strong>Version:</strong> ${data.version_number}</p>`;
-            html += `<p><strong>Published:</strong> ${data.published ? '✅ Yes' : '❌ No'}</p>`;
-            html += `<div><strong>Intents:</strong><ul>`;
-            if (Array.isArray(data.intents) && data.intents.length > 0) {
-                data.intents.forEach(intent => {
-                    html += `<li>${intent.name} 
-                    <button class="btn btn-sm btn-primary ml-2" onclick="editIntent('${intent.name}')">Edit</button>
-                    <button class="btn btn-sm btn-danger ml-2" onclick="removeIntent('${intent.name}')">–</button>
-                    </li>`;
-                });
-            } else {
-                html += `<li>No intents defined.</li>`;
-            }
-            html += `</ul><button class="btn btn-sm btn-success" onclick="addIntent()">+ Add Intent</button></div>`;
-            info.innerHTML = html;
-
-            if (data.published) {
-                document.querySelectorAll('#project-info input, #project-info button').forEach(el => {
-                    el.disabled = true;
-                });
-            }
+            renderProjectDetails(data);
         })
-        .catch(err => console.error(err));
-}
-
-function addIntent() {
-    const project = document.getElementById('project-select').value;
-    const intentName = prompt('Enter new intent name:');
-    if (!intentName) return;
-
-    apiPost('/project/add_intent', { project_name: project, intent_name: intentName })
-        .then(data => {
-            showResult('project-result', data);
-            loadProjectDetails();
-        })
-        .catch(err => {
-            console.error(err);
-            alert('Failed to add intent.');
+        .catch(error => {
+            console.error('Error loading project details:', error);
+            alert('Failed to load project details.');
         });
 }
 
-function removeIntent(name) {
-    const project = document.getElementById('project-select').value;
-    if (!confirm(`Are you sure you want to delete intent '${name}'?`)) return;
-
-    apiPost('/project/delete_intent', { project_name: project, intent_name: name })
-        .then(data => {
-            showResult('project-result', data);
-            loadProjectDetails();
-        })
-        .catch(err => {
-            console.error(err);
-            alert('Failed to delete intent.');
-        });
-}
-
-function editIntent(name) {
-    const project = document.getElementById('project-select').value;
-
-    apiGet(`/project/${project}/latest`)
-        .then(data => {
-            const intent = data.intents.find(i => i.name === name);
-            if (!intent) {
-                alert('Intent not found.');
-                return;
-            }
-
-            document.getElementById('intent-project-name').value = project;
-            document.getElementById('intent-name').value = intent.name;
-            document.getElementById('intent-action').value = intent.action || '';
-            document.getElementById('intent-fallback').value = intent.fallback_error_message || '';
-            document.getElementById('intent-prompt').value = intent.humanization_prompt || '';
-            document.getElementById('intent-examples').value = (intent.examples || []).join(', ');
-            currentParameters = intent.parameters || [];
-            populateParameterTable(currentParameters);
-
-            $('#intentModal').modal('show');
-        })
-        .catch(err => console.error(err));
-}
-
-function saveIntent() {
-    const project = document.getElementById('intent-project-name').value;
-    const name = document.getElementById('intent-name').value;
-    const action = document.getElementById('intent-action').value;
-    const fallback = document.getElementById('intent-fallback').value;
-    const prompt = document.getElementById('intent-prompt').value;
-    const examples = document.getElementById('intent-examples').value.split(',').map(e => e.trim());
-
-    const intentData = {
-        action: action,
-        fallback_error_message: fallback,
-        humanization_prompt: prompt,
-        examples: examples,
-        parameters: currentParameters
-    };
-
-    apiPost('/project/update_intent', {
-        project_name: project,
-        intent_name: name,
-        intent_data: intentData
-    })
-    .then(data => {
-        showResult('project-result', data);
-        $('#intentModal').modal('hide');
-        loadProjectDetails();
-    })
-    .catch(err => {
-        console.error(err);
-        alert('Failed to save intent.');
+function renderProjectDetails(data) {
+    const container = document.getElementById('projectDetails');
+    container.innerHTML = '';
+
+    const published = data.published ? '✅ Yes' : '❌ No';
+    container.innerHTML += `<p><strong>Version:</strong> ${data.version}</p>`;
+    container.innerHTML += `<p><strong>Published:</strong> ${published}</p>`;
+    const list = document.createElement('ul');
+    data.intents.forEach(intent => {
+        const li = document.createElement('li');
+        li.style.marginBottom = '8px';
+        li.innerHTML = `${intent.name} 
+            <button class="btn btn-sm btn-primary" onclick="editIntent('${intent.id}')">Edit</button>
+            <button class="btn btn-sm btn-danger" onclick="removeIntent('${intent.id}')">-</button>`;
+        list.appendChild(li);
     });
+    container.appendChild(list);
+
+    document.getElementById('publishVersionBtn').disabled = data.published;
 }
 
 function saveProject() {
-    alert('Save logic will be implemented here.');
+    fetch('/project/update', { method: 'POST' })
+        .then(response => response.json())
+        .then(data => alert('Project saved!'))
+        .catch(error => alert('Failed to save project.'));
 }
 
 function publishProject() {
-    alert('Publish logic will be implemented here.');
+    fetch('/project/publish', { method: 'POST' })
+        .then(response => response.json())
+        .then(data => alert('Project published!'))
+        .catch(error => alert('Failed to publish project.'));
 }
 
-function populateParameterTable(parameters) {
-    const body = document.getElementById('parameter-body');
-    body.innerHTML = '';
-    parameters.forEach((param, index) => {
-        const row = document.createElement('tr');
-        row.innerHTML = `
-            <td><input type="text" class="form-control" value="${param.name || ''}" onchange="updateParam(${index}, 'name', this.value)"></td>
-            <td>
-                <select class="form-control" onchange="updateParam(${index}, 'type', this.value)">
-                    <option value="string" ${param.type === 'string' ? 'selected' : ''}>string</option>
-                    <option value="int" ${param.type === 'int' ? 'selected' : ''}>int</option>
-                    <option value="float" ${param.type === 'float' ? 'selected' : ''}>float</option>
-                </select>
-            </td>
-            <td><input type="text" class="form-control" value="${param.regex || ''}" onchange="updateParam(${index}, 'regex', this.value)"></td>
-            <td><input type="text" class="form-control" value="${param.validation_message || ''}" onchange="updateParam(${index}, 'validation_message', this.value)"></td>
-            <td><button class="btn btn-sm btn-danger" onclick="removeParameterRow(${index})">Delete</button></td>
-        `;
-        body.appendChild(row);
-    });
+function showAddIntentModal() {
+    // show modal for adding intent and API info
+    $('#addIntentModal').modal('show');
 }
 
-function addParameterRow() {
-    currentParameters.push({ name: '', type: 'string', regex: '', validation_message: '' });
-    populateParameterTable(currentParameters);
+function showNewVersionModal() {
+    fetch('/project/versions')
+        .then(response => response.json())
+        .then(versions => {
+            const select = document.getElementById('baseVersionSelect');
+            select.innerHTML = '';
+            versions.forEach(v => {
+                const option = document.createElement('option');
+                option.value = v.id;
+                option.textContent = `Version ${v.number}`;
+                select.appendChild(option);
+            });
+            $('#newVersionModal').modal('show');
+        })
+        .catch(error => {
+            alert('Failed to load versions.');
+        });
 }
 
-function removeParameterRow(index) {
-    currentParameters.splice(index, 1);
-    populateParameterTable(currentParameters);
+function createNewVersion() {
+    const baseVersionId = document.getElementById('baseVersionSelect').value;
+    fetch('/project/new-version', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ base_version_id: baseVersionId })
+    })
+    .then(response => response.json())
+    .then(data => {
+        alert('New version created!');
+        loadProjectDetails();
+    })
+    .catch(error => alert('Failed to create new version.'));
 }
 
-function updateParam(index, key, value) {
-    currentParameters[index][key] = value;
+function loadSparkProjects() {
+    fetch('/spark/projects')
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                alert('⚠ Spark service unreachable.');
+                return;
+            }
+            const list = document.getElementById('sparkProjectList');
+            list.innerHTML = '';
+            data.projects.forEach(p => {
+                const li = document.createElement('li');
+                li.textContent = p.name;
+                list.appendChild(li);
+            });
+        })
+        .catch(error => {
+            alert('⚠ Spark service unreachable.');
+        });
 }