From ec62f331b89ae0b14f21e3ce09703978d370da33 Mon Sep 17 00:00:00 2001
From: Alice Kile <buoyantair@protonmail.com>
Date: Tue, 5 Nov 2019 15:09:03 +0530
Subject: [PATCH] app: Implement toggle button in app page

- revamp the old form submission model to enable/disable apps into a
  simple toggle button
- provide backwards compatibility when javascript is disabled

Reviewed-by: Joseph Nuthalapati <njoseph@riseup.net>
---
 plinth/forms.py                          |  1 +
 plinth/templates/app.html                | 56 +++++++++++++++---------
 static/themes/default/css/plinth.css     | 43 ++++++++++++++++++
 static/themes/default/js/app.template.js | 18 ++++++++
 4 files changed, 97 insertions(+), 21 deletions(-)
 create mode 100644 static/themes/default/js/app.template.js

diff --git a/plinth/forms.py b/plinth/forms.py
index 2d541513a..1cacf78ef 100644
--- a/plinth/forms.py
+++ b/plinth/forms.py
@@ -35,6 +35,7 @@ import plinth
 class AppForm(forms.Form):
     """Generic configuration form for an app."""
     is_enabled = forms.BooleanField(
+        widget=CheckboxInput(attrs={'id': 'app-toggle-input'}),
         label=_('Enable application'), required=False)
 
 
diff --git a/plinth/templates/app.html b/plinth/templates/app.html
index ba9532806..53dedbcc0 100644
--- a/plinth/templates/app.html
+++ b/plinth/templates/app.html
@@ -26,17 +26,29 @@
 {% load static %}
 
 {% block content %}
+  <div id='app-toggle-container' class="toggle-button-container">
+    <form id="app-toggle" class="form form-configuration" method="post">
+      {% csrf_token %}
+      {{ form|bootstrap }}
+      {% if is_enabled %}
+        <button type="submit" value="False" class="btn toggle-button toggle-button--toggled"></button>
+      {% else %}
+        <button type="submit" value="True" class="btn toggle-button"></button>
+      {% endif %}
+    </form>
+  </div>
+  <header>
+    {% block pagetitle %}
+      <h2>{{ name }}</h2>
+    {% endblock %}
 
-  {% block pagetitle %}
-    <h2>{{ name }}</h2>
-  {% endblock %}
-
-  {% block description %}
-    {% for paragraph in description %}
-      <p>{{ paragraph|safe }}</p>
-    {% endfor %}
-  {% endblock %}
-
+    {% block description %}
+      {% for paragraph in description %}
+        <p>{{ paragraph|safe }}</p>
+      {% endfor %}
+    {% endblock %}
+  </header>
+  
   {% if manual_page %}
     <p class="manual-page">
       <a href="{% url 'help:manual-page' lang='-' page=manual_page %}">
@@ -98,17 +110,19 @@
 
   {% include "port-forwarding-info.html" with service_name=name %}
 
-  {% block configuration %}
-    <h3>{% trans "Configuration" %}</h3>
+  <noscript>
+    {% block configuration %}
+      <h3>{% trans "Configuration" %}</h3>
+      <form class="form form-configuration" method="post">
+        {% csrf_token %}
 
-    <form class="form form-configuration" method="post">
-      {% csrf_token %}
-
-      {{ form|bootstrap }}
-
-      <input type="submit" class="btn btn-primary"
-             value="{% trans "Update setup" %}"/>
-    </form>
-  {% endblock %}
+        {{ form|bootstrap }}
 
+        <input type="submit" class="btn btn-primary"
+              value="{% trans "Update setup" %}"/>
+      </form>
+    {% endblock %}
+  </noscript>
+  
+  <script src="{% static 'theme/js/app.template.js' %}"></script>
 {% endblock %}
diff --git a/static/themes/default/css/plinth.css b/static/themes/default/css/plinth.css
index e79a55991..5b8e68881 100644
--- a/static/themes/default/css/plinth.css
+++ b/static/themes/default/css/plinth.css
@@ -464,3 +464,46 @@ a.menu_link_active {
 .names-domain-column {
     width: 50%;
 }
+
+.toggle-button-container {
+    display: none;
+    flex-flow: row;
+    justify-content: flex-end;
+}
+
+.toggle-button-container .form-group {
+    display: none;
+}
+
+.toggle-button {
+    border-radius: 25px;
+    border: none;
+    width: 55px;
+    height: 25px;
+    background: #ccc;
+    position: relative;
+}
+
+.toggle-button::before {
+    content: '';
+    display: block;
+    height: 18px;       
+    width: 18px;
+    border-radius: 100%;
+    background: #fff;
+    position: absolute;
+    top: 50%;
+    left: 6%;
+    transform: translateY(-50%);
+}
+.toggle-button--toggled {
+    background: #337ab7;
+}
+.toggle-button--toggled::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%) translateX(-116%)
+}
+
diff --git a/static/themes/default/js/app.template.js b/static/themes/default/js/app.template.js
new file mode 100644
index 000000000..ded526b62
--- /dev/null
+++ b/static/themes/default/js/app.template.js
@@ -0,0 +1,18 @@
+const appToggleForm = document.querySelector('#app-toggle')
+const appToggleContainer = appToggleForm.parentElement
+const appToggleInput = document.querySelector('#app-toggle-input')
+
+const onSubmit = (e) => {
+  e.preventDefault
+  appToggleInput.checked = !appToggleInput.checked
+  appToggleForm.submit()
+}
+
+appToggleForm.addEventListener('submit', onSubmit)
+
+
+/**
+ * if javascript is enabled, this script will run and show the toggle button
+ */
+
+appToggleContainer.style.display = 'flex';
\ No newline at end of file