Greatly simplify docker-compose.yaml

Remove pgadmin and specific version for compose

.gitignore

@@ -1,3 +1,5 @@
 venv/
 __pycache__/
-db/
+db/
+staticfiles/
+.vscode/settings.json

.gitlab-ci.yml

@@ -1,7 +1,7 @@
 variables:
   CI_PROJECT_DIR: "."
-  CI_REGISTRY_IMAGE: hub.ducoterra.net/ducoterra/mysite
-  DEPLOY: test
+  CI_REGISTRY_IMAGE: hub.ducoterra.net/ducoterra/button
+  DEPLOY: button
 
 stages:
   - build
@@ -20,10 +20,15 @@ build:
     - /kaniko/executor --context $CI_PROJECT_DIR --dockerfile $CI_PROJECT_DIR/Dockerfile --destination $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
 
 test:
+  stage: test
+  variables:
+    POSTGRES_PASSWORD: postgres
   only:
     variables:
     - $CI_COMMIT_TAG
-  stage: test
+  services:
+  - name: postgres:12
+    alias: postgres
   image:
     name: $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
     entrypoint: [""]
@@ -31,20 +36,19 @@ test:
     - python manage.py test
 
 deploy:
+  stage: deploy
   only:
     variables:
     - $CI_COMMIT_TAG
-  stage: deploy
   image:
     name: debian:10
     entrypoint: [""]
   script:
     - apt -qq update >> /dev/null && apt -qq install -y curl gettext >> /dev/null
-    - 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
-    - ./kubectl apply -f /deploy
-    - ./kubectl rollout status deploy $DEPLOY
-    - POD=$(./kubectl get pods --selector=app=$DEPLOY --output=jsonpath='{.items[*].metadata.name}')
-    - ./kubectl exec $POD -- python manage.py migrate
+    - curl -o /usr/bin/kubectl -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 /usr/bin/kubectl
+    - curl https://raw.githubusercontent.com/helm/helm/master/scripts/get-helm-3 | bash
+    - helm upgrade --install $DEPLOY ./helm --set image=$CI_REGISTRY_IMAGE --set tag=$CI_COMMIT_TAG
+    - sleep 10
+    - POD=$(kubectl get pods --selector=app=$DEPLOY --output=jsonpath='{.items[*].metadata.name}')
+    - kubectl exec $POD -- python manage.py migrate

.vscode/launch.json

@@ -12,7 +12,11 @@
             "args": [
                 "test",
             ],
-            "django": true
+            "env": {
+                "DB_HOST": "localhost"
+            },
+            "django": true,
+            "preLaunchTask": "docker-compose up"
         },
         {
             "name": "Run Server",
@@ -21,9 +25,12 @@
             "program": "${workspaceFolder}/manage.py",
             "args": [
                 "runserver",
-                "--noreload"
             ],
-            "django": true
+            "env": {
+                "DB_HOST": "localhost"
+            },
+            "django": true,
+            "preLaunchTask": "docker-compose up"
         }
     ]
 }

.vscode/tasks.json

@@ -0,0 +1,10 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "docker-compose up",
+            "command": "docker-compose up -d",
+            "type": "shell"
+        }
+    ]
+}

Dockerfile

@@ -1,4 +1,6 @@
-FROM python:3.8.2
+FROM python:3
+
+USER root
 
 WORKDIR /app
 COPY config config
@@ -8,10 +10,13 @@ COPY manage.py manage.py
 COPY requirements.txt requirements.txt
 RUN pip install -r requirements.txt
 
+COPY scripts scripts
+RUN chmod +x scripts/*
+ENTRYPOINT ["scripts/entrypoint.sh"]
+
 RUN useradd -ms /bin/bash django
 RUN chown -R django .
-
 USER django
-RUN python manage.py collectstatic
+RUN python manage.py collectstatic --no-input
 
-CMD ["gunicorn","-b",":8000", "-w", "4", "config.wsgi"]
+CMD ["scripts/cmd.sh"]

README.md

@@ -2,23 +2,4 @@
 
 My CI testing pipeline for a django project.
 
-[![pipeline status](http://gitlab.ducoterra.net/ducoterra/ci_builder/badges/master/pipeline.svg)](http://gitlab.ducoterra.net/ducoterra/ci_builder/-/commits/master)
-
-## Django Environment Variables
-
-### Django Secret
-
-```bash
-kubectl create secret generic django-secrets --from-literal=SECRET_KEY=$(python -c "import secrets ; print(secrets.token_urlsafe(32))")
-```
-
-### Django Allowed Hosts
-
-```yaml
-apiVersion: v1
-kind: ConfigMap
-metadata:
-  name: test
-data:
-  ALLOWED_HOSTS: localhost,test.ducoterra.net
-```
+[![pipeline status](https://gitlab.ducoterra.net/ducoterra/ci_builder/badges/master/pipeline.svg)](https://gitlab.ducoterra.net/ducoterra/ci_builder/-/commits/master)

config/settings.py

@@ -24,6 +24,7 @@ SECRET_KEY = os.getenv("SECRET_KEY")
 
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True if os.getenv("DEBUG") == "True" else False
+LOGGING_CONFIG = None
 
 ALLOWED_HOSTS = os.getenv("ALLOWED_HOSTS", "localhost").split(",")
 
@@ -78,8 +79,12 @@ WSGI_APPLICATION = 'config.wsgi.application'
 
 DATABASES = {
     'default': {
-        'ENGINE': 'django.db.backends.sqlite3',
-        'NAME': os.path.join(BASE_DIR, 'db/db.sqlite3'),
+        'ENGINE': 'django.db.backends.postgresql',
+        'NAME': os.getenv('DB_NAME', 'postgres'),
+        'USER': os.getenv('POSTGRES_USER', 'postgres'),
+        'PASSWORD': os.getenv('POSTGRES_PASSWORD', 'postgres'),
+        'HOST': os.getenv('DB_HOST', 'postgres'),
+        'PORT': os.getenv('DB_PORT', '5432'),
     }
 }
 

config/urls.py

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

docker-compose.yml

@@ -0,0 +1,45 @@
+version: '3'
+
+services:
+  button:
+    build: .
+    image: site:local
+    labels:
+      - "traefik.http.routers.button.rule=Host(`button.localhost`)"
+      - "traefik.http.services.button-service.loadbalancer.server.port=8000"
+      - "traefik.http.middlewares.btn-ratelimit.ratelimit.average=50"
+      - "traefik.http.middlewares.btn-ratelimit.ratelimit.burst=10"
+      - "traefik.http.routers.button.middlewares=btn-ratelimit@docker"
+    volumes:
+      - ./manage.py:/app/manage.py
+      - ./config:/app/config
+      - ./api:/app/api
+    environment:
+      - DEBUG=True
+      - SECRET_KEY=secret
+      - ALLOWED_HOSTS=button.localhost
+      - DJANGO_SUPERUSER_PASSWORD=django
+
+  postgres:
+    image: postgres:13
+    volumes:
+      - data:/var/lib/postgresql/data 
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+    ports: 
+      - 5432:5432
+
+  traefik:
+    image: traefik:v2.4
+    labels:
+      - "traefik.http.routers.traefik.rule=Host(`traefik.localhost`)"
+      - "traefik.http.services.traefik-service.loadbalancer.server.port=8080"
+    command: --api.insecure=true --providers.docker --log.level=ERROR --accesslog=true
+    ports:
+      - 80:80
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+
+volumes:
+  data:

heavy_load.py

@@ -0,0 +1,38 @@
+import getpass
+import threading
+import requests
+import time
+import sys
+from requests.auth import HTTPBasicAuth
+
+rate = int(sys.argv[1]) # /second
+if rate == 0:
+    burst = True
+    print("Burst mode activated")
+else:
+    burst = False
+    sleep = 1 / rate
+    print(f"Beginning load test at {rate} calls/second")
+url = 'https://button.ducoterra.net/'
+# url = 'http://button.localhost/'
+
+def timer(func, *args, **kwargs):
+    then = time.time()
+    func(*args, **kwargs)
+    print(time.time() - then)
+
+# init = requests.get('https://button.ducoterra.net/button/')
+init = requests.get(url)
+csrf = init.cookies.get('csrftoken')
+session = init.cookies.get('sessionid')
+me = lambda num: print(num) or print(requests.post(url, headers = {'Content-Type': 'application/json', 'X-CSRFToken': csrf, 'Cookie': f'csrftoken={csrf}; sessionid={session}'}).text)
+threadme = lambda num: threading.Thread(target=timer, args=(me, num)).start()
+
+if burst:
+    [threadme(num) for num in range(0,100)]
+else:
+    num = 1
+    while True:
+        threadme(num)
+        num += 1
+        time.sleep(sleep)

helm/.helmignore

@@ -0,0 +1,23 @@
+# Patterns to ignore when building packages.
+# This supports shell glob matching, relative path matching, and
+# negation (prefixed with !). Only one pattern per line.
+.DS_Store
+# Common VCS dirs
+.git/
+.gitignore
+.bzr/
+.bzrignore
+.hg/
+.hgignore
+.svn/
+# Common backup files
+*.swp
+*.bak
+*.tmp
+*.orig
+*~
+# Various IDEs
+.project
+.idea/
+*.tmproj
+.vscode/

helm/Chart.yaml

@@ -0,0 +1,23 @@
+apiVersion: v2
+name: helm
+description: A Helm chart for Kubernetes
+
+# A chart can be either an 'application' or a 'library' chart.
+#
+# Application charts are a collection of templates that can be packaged into versioned archives
+# to be deployed.
+#
+# Library charts provide useful utilities or functions for the chart developer. They're included as
+# a dependency of application charts to inject those utilities and functions into the rendering
+# pipeline. Library charts do not define any templates and therefore cannot be deployed.
+type: application
+
+# This is the chart version. This version number should be incremented each time you make changes
+# to the chart and its templates, including the app version.
+# Versions are expected to follow Semantic Versioning (https://semver.org/)
+version: 0.1.0
+
+# This is the version number of the application being deployed. This version number should be
+# incremented each time you make changes to the application. Versions are not expected to
+# follow Semantic Versioning. They should reflect the version the application is using.
+appVersion: 1.16.0

helm/templates/configmap.yaml

@@ -0,0 +1,8 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: {{ .Release.Name }}
+  labels:
+    app: {{ .Release.Name }}
+data:
+  ALLOWED_HOSTS: {{ .Release.Name }}.ducoterra.net

helm/templates/deploy.yaml

@@ -0,0 +1,33 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ .Release.Name }}
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: {{ .Release.Name }}
+  template:
+    metadata:
+      labels:
+        app: {{ .Release.Name }}
+    spec:
+      containers:
+        - image: {{ required "A valid .Values.image entry required!" .Values.image }}:{{ required "A valid .Values.tag entry required!" .Values.tag }}
+          name: {{ .Release.Name }}
+          ports:
+            - containerPort: 8080
+          envFrom:
+            - configMapRef:
+                name: {{ .Release.Name }}
+            - secretRef:
+                name: {{ .Release.Name }}
+            - secretRef:
+                name: postgres
+          resources:
+            limits:
+              memory: "500Mi"
+              cpu: "250m"
+            requests:
+              memory: "1Mi"
+              cpu: "100m"

helm/templates/hpa.yaml

@@ -0,0 +1,18 @@
+apiVersion: autoscaling/v2beta2
+kind: HorizontalPodAutoscaler
+metadata:
+  name: {{ .Release.Name }}
+spec:
+  scaleTargetRef:
+    apiVersion: apps/v1
+    kind: Deployment
+    name: {{ .Release.Name }}
+  minReplicas: 1
+  maxReplicas: 4
+  metrics:
+  - type: Resource
+    resource:
+      name: cpu
+      target:
+        type: Utilization
+        averageUtilization: 50

helm/templates/ingress.yaml

@@ -0,0 +1,78 @@
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: {{ .Release.Name }}-internal-tls
+  annotations:
+    kubernetes.io/ingress.class: traefik-internal
+spec:
+  entryPoints:
+    - websecure
+  tls:
+    certResolver: myresolver
+    domains:
+    - main: "*.ducoterra.net"
+  routes:
+  - match: Host(`{{ .Release.Name }}.ducoterra.net`)
+    kind: Rule
+    services:
+    - name: {{ .Release.Name }}
+      port: 8000
+
+---
+
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: {{ .Release.Name }}-internal-web
+  annotations:
+    kubernetes.io/ingress.class: traefik-internal
+spec:
+  entryPoints:
+    - web
+  routes:
+  - match: Host(`{{ .Release.Name }}.ducoterra.net`)
+    kind: Rule
+    services:
+    - name: {{ .Release.Name }}
+      port: 8000
+    middlewares:
+      - name: httpsredirect
+
+---
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: {{ .Release.Name }}-external-tls
+  annotations:
+    kubernetes.io/ingress.class: traefik-external
+spec:
+  entryPoints:
+    - websecure
+  tls:
+    certResolver: myresolver
+  routes:
+  - match: Host(`{{ .Release.Name }}.ducoterra.net`)
+    kind: Rule
+    services:
+    - name: {{ .Release.Name }}
+      port: 8000
+
+---
+
+apiVersion: traefik.containo.us/v1alpha1
+kind: IngressRoute
+metadata:
+  name: {{ .Release.Name }}-external-web
+  annotations:
+    kubernetes.io/ingress.class: traefik-external
+spec:
+  entryPoints:
+    - web
+  routes:
+  - match: Host(`{{ .Release.Name }}.ducoterra.net`)
+    kind: Rule
+    services:
+    - name: {{ .Release.Name }}
+      port: 8000
+    middlewares:
+      - name: httpsredirect

helm/templates/secret.yaml

@@ -0,0 +1,10 @@
+{{ if and .Values.secret .Release.IsInstall }}
+apiVersion: v1
+kind: Secret
+metadata:
+  name: {{ .Release.Name }}
+type: generic
+data:
+  SECRET_KEY: {{ randAlphaNum 64 | b64enc | quote }}
+  DJANGO_SUPERUSER_PASSWORD: {{ randAlphaNum 64 | b64enc | quote }}
+{{ end }}

helm/templates/service.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Service
+metadata:
+  labels:
+    app: {{ .Release.Name }}
+  name: {{ .Release.Name }}
+spec:
+  ports:
+  - port: 8000
+    protocol: TCP
+    name: {{ .Release.Name }}-web
+    targetPort: 8000
+  selector:
+    app: {{ .Release.Name }} # This selects the pod(s) that match the selector
+  type: ClusterIP

helm/values.yaml

@@ -0,0 +1,3 @@
+image: hub.ducoterra.net/ducoterra/button
+tag: 1.0.2
+secret: true

k8s/configmap.yaml

@@ -1,6 +0,0 @@
-apiVersion: v1
-kind: ConfigMap
-metadata:
-  name: $DEPLOY
-data:
-  ALLOWED_HOSTS: localhost,test.ducoterra.net

k8s/deploy.yaml

@@ -1,37 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: $DEPLOY
-spec:
-  selector:
-    matchLabels:
-      app: $DEPLOY
-  template:
-    metadata:
-      labels:
-        app: $DEPLOY
-    spec:
-      containers:
-      - name: $DEPLOY
-        image: $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG
-        envFrom:
-        - configMapRef:
-            name: $DEPLOY
-        - secretRef:
-            name: django-secrets
-        volumeMounts:
-          - mountPath: /app/db
-            name: $DEPLOY
-        resources:
-          limits:
-            memory: "256Mi"
-            cpu: "250m"
-          requests:
-            memory: "1Mi"
-            cpu: "1m"
-        ports:
-        - containerPort: 8000
-      volumes:
-        - name: $DEPLOY
-          persistentVolumeClaim:
-            claimName: $DEPLOY

k8s/ingress.yaml

@@ -1,54 +0,0 @@
-apiVersion: networking.k8s.io/v1beta1
-kind: Ingress
-metadata:
-  annotations:
-    ingress.kubernetes.io/ssl-redirect: "true"
-  name: $DEPLOY
-spec:
-  tls:
-  - hosts:
-    - test.ducoterra.net
-    secretName: letsencrypt
-  rules:
-  - host: test.ducoterra.net
-    http:
-      paths:
-      - backend:
-          serviceName: $DEPLOY
-          servicePort: 8000
-
----
-
-apiVersion: traefik.containo.us/v1alpha1
-kind: IngressRoute
-metadata:
-  name: $DEPLOY-external-tls
-spec:
-  entryPoints:
-    - websecure
-  tls:
-    secretName: letsencrypt
-  routes:
-  - match: Host(`test.ducoterra.net`)
-    kind: Rule
-    services:
-    - name: $DEPLOY
-      port: 8000
-
----
-
-apiVersion: traefik.containo.us/v1alpha1
-kind: IngressRoute
-metadata:
-  name: $DEPLOY-external-web
-spec:
-  entryPoints:
-    - web
-  routes:
-  - match: Host(`test.ducoterra.net`)
-    kind: Rule
-    services:
-    - name: $DEPLOY
-      port: 8000
-    middlewares:
-      - name: httpsredirect

k8s/pvc.yaml

@@ -1,11 +0,0 @@
-apiVersion: v1
-kind: PersistentVolumeClaim
-metadata:
-  name: $DEPLOY
-spec:
-  storageClassName: nfs-encrypted
-  accessModes:
-    - ReadWriteMany
-  resources:
-    requests:
-      storage: 8Gi

k8s/service.yaml

@@ -1,10 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: $DEPLOY
-spec:
-  selector:
-    app: $DEPLOY
-  ports:
-  - port: 8000
-    targetPort: 8000

requirements.txt

@@ -2,4 +2,5 @@ django
 djangorestframework
 pygments
 gunicorn
-whitenoise
+whitenoise
+psycopg2-binary

scripts/cmd.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+gunicorn -b :8000 -w 4 config.wsgi

scripts/entrypoint.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+if ! $SKIP_ENTRYPOINT || [ -z $SKIP_ENTRYPOINT ]; then
+
+MIGRATED=false
+
+while ! $MIGRATED; do
+echo "Migrating..."
+python manage.py migrate 2> /dev/null
+
+if [ $? -eq 0 ]; then
+MIGRATED=true
+else
+echo "ERROR - $(date) - Migrate failed."
+sleep 1
+fi
+
+done
+
+fi
+
+$@

ui/static/ui/achievement.css

@@ -0,0 +1,41 @@
+.achievement {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: -1;
+}
+
+.achievement-animate {
+    animation-name: moveup;
+    animation-duration: 2s;
+    animation-fill-mode: forwards;
+}
+
+.achievment-column {
+    height: 100%;
+    overflow: auto;
+    text-align: center;
+}
+
+.achievement-text {
+    font-size: 4rem;
+}
+
+@media only screen and (max-width: 768px) {
+    .achievment-column {
+        height: 50%;
+    }
+}
+
+@keyframes moveup {
+    from {bottom: 0px;}
+    to {bottom: 200px; color: white;}
+}
+
+@keyframes fadeout {
+    from {}
+    to {color: transparent;}
+}

ui/static/ui/button.css

@@ -7,14 +7,26 @@ html, body {
     height: 100%;
 }
 
-.container {
+.columns {
+    height: 100%;
+}
+
+.button-column {
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
     text-align: center;
+    height: 100%;
 }
 
-.disable-dbl-tap-zoom {
-    touch-action: manipulation;
+@media only screen and (max-width: 768px) {
+    .button-column {
+        height: 50%;
+    }
+}
+
+
+.button-container {
+    position: absolute;
 }

ui/static/ui/button.js

@@ -1,27 +1,31 @@
-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;
-            }
-        }
+const csrftoken = getCookie('csrftoken');
+const button = document.getElementById("BUTTON");
+const count = document.getElementById("COUNT");
+const button_container = document.getElementById("button-container");
+const achievement = document.getElementById("achievement");
+const achievement_list = document.getElementById("achievement-list");
+const achievement_column = document.getElementById("achievement-column");
+
+function add_achievement(text) {
+    if (text != undefined) {
+        achievement.querySelector(".achievement-text").innerText = text;
+        achievement.classList.remove("achievement-animate");
+        void achievement.offsetWidth;
+        achievement.classList.add("achievement-animate");
+
+        var elem = document.createElement("div");
+        elem.innerText = text;
+        achievement_list.appendChild(elem);
+
+        achievement_column.scrollTo(0, achievement_list.scrollHeight);
     }
-    return cookieValue;
 }
 
-var csrftoken = getCookie('csrftoken');
-var button = document.getElementById("BUTTON");
-var count = document.getElementById("COUNT");
-
+// when button is clicked submit an empty post request
 button.addEventListener("click", event => {
     button.disabled = true;
     button.classList.add("is-loading");
-    fetch('/button', {
+    fetch(button.dataset.action, {
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -33,10 +37,12 @@ button.addEventListener("click", event => {
         })
         .then((data) => {
             count.innerText = data.pressed;
+            add_achievement(data.achievement);
         }).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

@@ -4,25 +4,43 @@
 
 {% block css %}
 <link rel="stylesheet" href="{% static 'ui/button.css' %}">
+<link rel="stylesheet" href="{% static 'ui/achievement.css' %}">
 {% 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">
-        <div>
-            <h1 class="title">
-                The Button
-            </h1>
-            <button class="button is-primary disable-dbl-tap-zoom" id="BUTTON">Press</button>
+    <div class="columns">
+        <div class="column">
         </div>
-        <div><br></div>
-        <div>
-            <h1 class="title" id="COUNT">{{ pressed }}</h1>
+        <div class="button-column column">
+            <div>
+                <h1 class="title">
+                    The Button
+                </h1>
+                <button class="button is-danger" id="BUTTON" data-action = "{% url 'button' %}">Press</button>
+            </div>
+            <div><br></div>
+            <div>
+                <h1 class="title" id="COUNT">{{ pressed }}</h1>
+            </div>
+            <div id="achievement" class="achievement">
+                <div>
+                    <div class="achievement-text"></div>
+                </div>
+            </div>
+        </div>
+        <div class="column achievment-column" id = "achievement-column">
+            <div class="achievements-list" id="achievement-list">
+                <h1 class="title">Achievements</h1>
+                {% for key,value in achievement.items %}
+                <div>{{ value }}</div>
+                {% endfor %}
+            </div>
         </div>
     </div>
 </section>

ui/tests.py

@@ -1,5 +1,5 @@
 from django.contrib.auth.models import AnonymousUser, User
-from django.test import RequestFactory, TestCase
+from django.test import RequestFactory, TestCase, Client
 
 from .views import button
 
@@ -11,23 +11,29 @@ class SimpleTest(TestCase):
             username='testuser', email='test@test.test', password='testpass')
 
     def test_button(self):
-        # Create an instance of a GET request.
-        request = self.factory.get('/snippets')
-        request.user = self.user
-        request.session = self.client.session
-        response = button(request)
+        # Test initial load
+        c = Client()
+        response = c.get('/')
         self.assertEqual(response.status_code, 200)
-        
-        request = self.factory.post(
-            '/button',
-            data={},
-            content_type='application/json'
-        )
-        request.session = self.client.session
-        response = button(request)
-        self.assertEqual(response.status_code, 200)
-        self.assertEqual(request.session.get('pressed'), 1)
+        self.assertEqual(response.context.get("achievement"), {})
 
-        response = button(request)
+        # Test first achievement
+        response = c.post('/', {})
         self.assertEqual(response.status_code, 200)
-        self.assertEqual(request.session.get('pressed'), 2)
+        self.assertEqual(response.json().get("pressed"), 1)
+        self.assertEqual(response.json().get("achievement"), "Clicked!")
+        self.assertEqual(c.session.get('pressed'), 1)
+
+        # Test second achievement
+        response = c.post('/', {})
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.json().get("pressed"), 2)
+        self.assertEqual(response.json().get("achievement"), "Clicked Twice!")
+        self.assertEqual(c.session.get('pressed'), 2)
+
+        # Test no achievement
+        response = c.post('/', {})
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.json().get("pressed"), 3)
+        self.assertEqual(response.json().get("achievement"), None)
+        self.assertEqual(c.session.get('pressed'), 3)

ui/urls.py

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

ui/views.py

@@ -1,14 +1,70 @@
 from django.shortcuts import render
 from django.http import JsonResponse
 
+achievements = {
+    1: "Clicked!",
+    2: "Clicked Twice!",
+    4: "2^2",
+    8: "2^3",
+    16: "2^4",
+    24: "I'm that old",
+    32: "2^5",
+    64: "2^6",
+    100: "one hundred",
+    128: "2^7",
+    200: "two hundred",
+    250: "quarter thousand",
+    256: "2^8",
+    300: "three hundred",
+    400: "four hundred",
+    500: "half thousand",
+    512: "2^9",
+    600: "six hundred",
+    700: "seven hundred",
+    800: "eight hundred",
+    900: "nine hundred",
+    1000: "full thousand",
+    1024: "2^10",
+    1776: "America",
+    1914: "Some War here",
+    1938: "Some more war here",
+    1950: "Lots of war in here",
+    2000: "Computers die",
+    2008: "Houses die",
+    2019: "People die",
+    2048: "2048!",
+    2500: "Keep going!",
+    3000: "three thousand",
+    4000: "four thousand",
+    4096: "2^11",
+    5000: "halfway to ten thousand",
+    10001: "ten thousand one",
+    100000: "one hundred thousand",
+    1000000: "one million?",
+    10000000: "ten millions???",
+    100000000: "one hundo billion",
+    1000000000: "JK this is actually a billion though",
+    10000000000: "I'm not going to create another achievement",
+    100000000000: "one hundred billion",
+    1000000000000: "It's physically impossible to click this high"
+}
+
+
 def button(request):
     PRESSED = 'pressed'
-    try:
-        request.session[PRESSED]
-    except KeyError:
-        request.session[PRESSED] = 0
+    ACHIEVE = 'achievement'
+    pressed = request.session.get(PRESSED, 0)
 
     if request.method == "POST":
-        request.session[PRESSED] += 1
-        return JsonResponse({PRESSED: request.session[PRESSED]})
-    return render(request, "ui/button.html", {PRESSED: request.session[PRESSED]})
+        pressed = pressed + 1
+        request.session[PRESSED] = pressed
+        response = {
+            PRESSED: pressed,
+            ACHIEVE: achievements.get(pressed)
+        }
+        return JsonResponse(response)
+
+    response = {PRESSED: pressed}
+    achieved = {k:v for k,v in achievements.items() if k <= pressed}
+    response.update({ACHIEVE: achieved})
+    return render(request, "ui/button.html", response)