update active status and archive - api calls

app/admin/static/admin.js

@@ -1,14 +1,65 @@
 const archiveButtons = document.getElementsByClassName('archive-button');
 const activityButtons = document.getElementsByClassName('change-activity-btn');
 
-for(let i = 0; i < activityButtons.length; i++){
-    activityButtons[i].addEventListener('change', e => {
-        console.log(e.target.checked, e.target.id)
-    })
+
+
+
+function deactivateArchiveButtons(){
+    for (let i = 0; i < archiveButtons.length; i++){
+        archiveButtons[i].disabled=true;
+    }
+}
+function activateArchiveButtons(){
+    for (let i = 0; i < archiveButtons.length; i++){
+        archiveButtons[i].disabled=false;
+    }
+}
+function deactivateActiveStatusCheckboxes(){
+    for (let i = 0; i < activityButtons.length; i++){
+        activityButtons[i].disabled=true;
+    }
+}
+function activateActiveStatusCheckboxes(){
+    for (let i = 0; i < activityButtons.length; i++){
+        activityButtons[i].disabled=false;
+    }
 }
 
-for(let i = 0; i < archiveButtons.length; i++){
-    archiveButtons[i].addEventListener('click', e => {
-        console.log(e.target.id)
-    })
+async function updateActiveStatus(id, status) {
+    deactivateActiveStatusCheckboxes()
+    deactivateArchiveButtons()
+    var result = await fetch(`/campaigns/update_active_status/${id}/${status}`, {method:'PUT'});
+    var data = await result.json();
+    if (status === true){
+        status = 'True'
+    } else {
+        status = 'False'
+    }
+    document.getElementById(`${id}-active-status`).innerText = status;
+    activateActiveStatusCheckboxes()
+    activateArchiveButtons()
+    
 }
+
+async function archiveCampaign(id){
+    deactivateActiveStatusCheckboxes()
+    deactivateArchiveButtons()
+    var result = await fetch(`/campaigns/archive_campaign/${id}`, {method:'PUT'});
+    var data = await result.json();
+    document.getElementById(`${id}-row`).remove();
+    activateActiveStatusCheckboxes()
+    activateArchiveButtons()
+}
+
+document.addEventListener("DOMContentLoaded", (event) => {
+    for(let i = 0; i < activityButtons.length; i++){
+        activityButtons[i].addEventListener('change', e => {
+            updateActiveStatus(parseInt(e.target.value), e.target.checked)
+        })
+    }
+    for(let i = 0; i < archiveButtons.length; i++){
+        archiveButtons[i].addEventListener('click', e => {
+            archiveCampaign(parseInt(e.target.value))
+        })
+    }
+  });

app/admin/templates/administration.html

@@ -45,18 +45,26 @@
             </thead>
             <tbody>
                 {% for campaign in campaigns %}
-                <tr>
-                    <td>{{campaign.id}}</td>
-                    <td>{{campaign.title}}</td>
-                    <td>{{campaign.active}}</td>
-                    <td>
-                        <label class="switch">
-                            <input type="checkbox" id="{{campaign.id}}" class="change-activity-btn" {%if campaign.active%}checked{%endif%}>
-                            <span class="slider round"></span>
-                        </label>
-                    </td>
-                    <td><button id="{{campaign.id}}" class="archive-button btn btn-primary">Click to archive</button></td>
-                </tr>
+                    <tr id="{{campaign.id}}-row" >
+                        <td>{{campaign.id}}</td>
+                        <td>{{campaign.title}}</td>
+                        <td id="{{campaign.id}}-active-status">{{campaign.active}}</td>
+                        <td>
+                            <label class="switch">
+                                <input 
+                                type="checkbox" 
+                                value="{{campaign.id}}" 
+                                id="active-checkbox-{{campaign.id}}" 
+                                class="change-activity-btn" 
+                                {%if campaign.active%}checked{%endif%}>
+                                <span class="slider round"></span>
+                            </label>
+                        </td>
+                        <td><button 
+                            id="archive-button-{{campaign.id}}" 
+                            value="{{campaign.id}}" 
+                            class="archive-button btn btn-primary">Click to archive</button></td>
+                    </tr>
                 {% endfor %}
             </tbody>
         </table>