adding js to start work on archive buttons and change activity status

app/admin/static/admin.js

@@ -0,0 +1,11 @@
+var archiveButtons = document.getElementsByClassName('archive-button');
+for(let i = 0; i < archiveButtons.length; i++){
+    archiveButtons[i].addEventListener('click', e => {
+        console.log(e.target.id)
+    })
+}
+
+
+// archiveButton.addEventListener('change', (e) => {
+//     console.log(e)
+// })

app/admin/static/administration.css

@@ -0,0 +1,56 @@
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+  
+input:checked + .slider {
+    background-color: #2196F3;
+}
+  
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+  
+input:checked + .slider:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+}
+  
+  /* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+  
+.slider.round:before {
+    border-radius: 50%;
+}

app/admin/templates/administration.html

@@ -1,5 +1,8 @@
 {% extends 'base.html' %}
 {% block title %}Administration{% endblock title %}
+{% block stylesheet %}
+    <link rel="stylesheet" href="{{ url_for('admin.static', filename='administration.css') }}">
+{% endblock stylesheet %}
 {% block content %}
 <main>
     <div class="container my-4 px-5">
@@ -36,6 +39,8 @@
                     <th>#</th>
                     <th>Title</th>
                     <th>Active</th>
+                    <th>Change Active Status</th>
+                    <th>Archive?</th>
                 </tr>
             </thead>
             <tbody>
@@ -44,10 +49,18 @@
                     <td>{{campaign.id}}</td>
                     <td>{{campaign.title}}</td>
                     <td>{{campaign.active}}</td>
+                    <td>
+                        <label class="switch">
+                            <input type="checkbox" {% 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>
                 {% endfor %}
             </tbody>
         </table>
     </div>
 </main>
+<script src="{{url_for('.static', filename='admin.js')}}"></script>
 {% endblock content %}