proper slash handling in button.js

.gitlab-ci.yml

@@ -43,7 +43,8 @@ deploy:
     - curl -LO https://storage.googleapis.com/kubernetes-release/release/`curl -s https://storage.googleapis.com/kubernetes-release/release/stable.txt`/bin/linux/amd64/kubectl
     - chmod +x ./kubectl
     - mkdir /deploy
-    - for f in $(find k8s -regex '.*\\.ya*ml); do envsubst < $f > "/deploy/$(basename $f)"; done'
+    - for f in $(find k8s -regex '.*\.ya*ml'); do envsubst < $f > "/deploy/$(basename $f)"; done
     - ./kubectl apply -f /deploy
     - ./kubectl rollout status deploy $DEPLOY
-    - ./kubectl exec $(./kubectl get pods --selector=app=$DEPLOY --output=jsonpath='{.items[*].metadata.name}') -- python manage.py migrate
+    - POD=$(./kubectl get pods --selector=app=$DEPLOY --output=jsonpath='{.items[*].metadata.name}')
+    - ./kubectl exec $POD -- python manage.py migrate

.vscode/launch.json

@@ -5,7 +5,7 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "name": "Python: Django",
+            "name": "Test",
             "type": "python",
             "request": "launch",
             "program": "${workspaceFolder}/manage.py",
@@ -13,6 +13,17 @@
                 "test",
             ],
             "django": true
+        },
+        {
+            "name": "Run Server",
+            "type": "python",
+            "request": "launch",
+            "program": "${workspaceFolder}/manage.py",
+            "args": [
+                "runserver",
+                "--noreload"
+            ],
+            "django": true
         }
     ]
 }

config/urls.py

@@ -18,7 +18,7 @@ from django.urls import path, include
 from django.http import JsonResponse
 
 urlpatterns = [
-    path('', include('api.urls')),
+    # path('api/', include('api.urls')),
     path('', include('ui.urls')),
-    path('admin/', admin.site.urls),
+    # path('admin/', admin.site.urls),
 ]

k8s/deploy.yaml

@@ -16,7 +16,9 @@ spec:
         image: $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
         envFrom:
         - configMapRef:
-          name: gitlab
+            name: $DEPLOY
+        - secretRef:
+            name: django-secrets
         volumeMounts:
           - mountPath: /app/db
             name: $DEPLOY

ui/static/ui/button.css

@@ -0,0 +1,17 @@
+html, body { 
+    height: 100%;
+    width: 100%;
+    touch-action: manipulation;
+}
+
+.section, .container {
+    height: 100%;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}

ui/static/ui/button.js

@@ -1,26 +1,12 @@
-function getCookie(name) {
-    var cookieValue = null;
-    if (document.cookie && document.cookie !== '') {
-        var cookies = document.cookie.split(';');
-        for (var i = 0; i < cookies.length; i++) {
-            var cookie = cookies[i].trim();
-            // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                break;
-            }
-        }
-    }
-    return cookieValue;
-}
-
-var csrftoken = getCookie('csrftoken');
-var button = document.getElementById("BUTTON");
-var count = document.getElementById("COUNT");
+const csrftoken = getCookie('csrftoken');
+const button = document.getElementById("BUTTON");
+const count = document.getElementById("COUNT");
 
+// when button is clicked submit an empty post request
 button.addEventListener("click", event => {
     button.disabled = true;
-    fetch('/button', {
+    button.classList.add("is-loading");
+    fetch('/button/', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -34,7 +20,9 @@ button.addEventListener("click", event => {
             count.innerText = data.pressed;
         }).finally(() => {
             button.disabled = false;
+            button.classList.remove("is-loading");
         });
 });
 
+// when the page is loaded automatically select the button
 button.focus();

ui/static/ui/helper.js

@@ -0,0 +1,16 @@
+// get cookies when fetching with django
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}

ui/templates/ui/button.html

@@ -7,10 +7,10 @@
 {% endblock %}
 
 {% block js %}
+<script src="{% static 'ui/helper.js' %}"></script>
 <script src="{% static 'ui/button.js' %}"></script>
 {% endblock %}
 
-
 {% block body %}
 <section class="section">
     <div class="container">

ui/urls.py

@@ -2,5 +2,5 @@ from django.urls import path
 from . import views
 
 urlpatterns = [
-    path('button', views.button, name = 'button'),
+    path('button/', views.button, name = 'button'),
 ]