implement cd

Project-OtaWilma · Sep 23, 2024 · 7acdde0 · 7acdde0
1 parent a82576f
commit 7acdde0
Show file tree

Hide file tree

Showing 7 changed files with 253 additions and 46 deletions.
diff --git a/.github/workflows/cd.yml b/.github/workflows/cd.yml
@@ -0,0 +1,52 @@
+name: Create and publish a Docker image
+
+on:
+  push:
+    branches: ['release']
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+
+    permissions:
+      contents: read
+      packages: write
+      attestations: write
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v1
+        with:
+          subject-name: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME}}
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,20 @@
+FROM nginx:latest
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+COPY . /usr/share/nginx/html
+
+WORKDIR /app
+RUN chown -R nginx:nginx /app && chmod -R 755 /app && \
+        chown -R nginx:nginx /var/cache/nginx && \
+        chown -R nginx:nginx /var/log/nginx && \
+        chown -R nginx:nginx /etc/nginx/conf.d
+RUN touch /var/run/nginx.pid && \
+        chown -R nginx:nginx /var/run/nginx.pid
+
+USER nginx
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
+
diff --git a/download.js b/download.js
@@ -0,0 +1,12 @@
+function download(filename, text) {
+    var element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+    element.setAttribute('download', filename);
+
+    element.style.display = 'none';
+    document.body.appendChild(element);
+
+    element.click();
+
+    document.body.removeChild(element);
+  }
diff --git a/index.css b/index.css
@@ -1,9 +1,28 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+
+    width: 100%; 
+
+    max-width: 1700px;
+}
+
+.right {
+    width: 400px;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .buttons {
     display: flex;
     flex-direction: row;
+    justify-content: flex-start;
     flex-wrap: wrap;
 
-    width: 100%;
+    width: calc(100% - 400px);
 }
 
 .btn {
@@ -26,18 +45,72 @@
     width: 250px;
     height: 250px;
     font-size: 1.5rem;
+    cursor: pointer;
 }
 
 .btn label {
     margin: 10px;
     font-size: 1.5rem;
 }
 
-.btn.reccomended {
-    justify-self: flex-end;
+.btn.disabled {
+    opacity: 0.3;
+    pointer-events: none;
 }
 
 .btn.reccomended button {
     opacity: 0.7;
     pointer-events: none;
+
+    border-color: blue;
+    color: blue;
+}
+
+.btn.reccomended label {
+    color: blue;
+}
+
+.log {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    padding: 10px;
+
+    margin: 20px;
+
+    height: 230px;
+    width: 230px;
+
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+    border: solid 1px gray;
+    border-radius: 2px;
+}
+
+.log p {
+    margin: 0;
+    padding: 3px;
+    font-size: 1rem;
+
+    width: 100%;
+}
+
+.log p:nth-child(even) {
+    background-color: whitesmoke;
+}
+
+#DOWNLOAD {
+    margin-top: -5px;
+    padding: 3px;
+    font-size: 1rem;
+
+    cursor: pointer;
+}
+
+.name {
+    font-style: italic;
+    opacity: 50%;
+    margin: 2px;
 }
diff --git a/index.html b/index.html
@@ -3,55 +3,65 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>YO Vessat</title>
 
     <script src="index.js"></script>
+    <script src="download.js"></script>
     <link rel="stylesheet" href="index.css">
+    <script type="text/javascript">
+        window.onbeforeunload = function() {
+            return "Dude, are you sure you want to leave? Think of the kittens!";
+        }
+    </script>
 </head>
 <body>
-    <div class="buttons">
-        <div class="btn">
-            <button class="b" target="1">1</button>
-            <label id="1">00:00</label>
+    <div class="container">
+        <div class="buttons">
+            <div class="btn">
+                <button class="b" target="1">1</button>
+                <label id="1">00:00</label>
+            </div>
+            <div class="btn">
+                <button class="b" target="2">2</button>
+                <label id="2">00:00</label>
+            </div>
+            <div class="btn">
+                <button class="b" target="3">3</button>
+                <label id="3">00:00</label>
+            </div>
+            <div class="btn">
+                <button class="b" target="4">4</button>
+                <label id="4">00:00</label>
+            </div>
+            <div class="btn">
+                <button class="b" target="5">5</button>
+                <label id="5">00:00</label>
+            </div>
+            <div class="btn">
+                <button class="b" target="6">6</button>
+                <label id="6">00:00</label>
+            </div>
+            <div class="btn">
+                <button class="b" target="7">7</button>
+                <label id="7">00:00</label>
+            </div>
+            <div class="btn">
+                <button class="b" target="8">8</button>
+                <label id="8">00:00</label>
+            </div>
         </div>
-        <div class="btn">
-            <button class="b" target="2">2</button>
-            <label id="2">00:00</label>
-        </div>
-        <div class="btn">
-            <button class="b" target="3">3</button>
-            <label id="3">00:00</label>
-        </div>
-        <div class="btn">
-            <button class="b" target="4">4</button>
-            <label id="4">00:00</label>
-        </div>
-        <div class="btn">
-            <button class="b" target="5">5</button>
-            <label id="5">00:00</label>
-        </div>
-        <div class="btn">
-            <button class="b" target="6">6</button>
-            <label id="6">00:00</label>
-        </div>
-        <div class="btn">
-            <button class="b" target="7">7</button>
-            <label id="7">00:00</label>
-        </div>
-        <div class="btn">
-            <button class="b" target="8">8</button>
-            <label id="8">00:00</label>
-        </div>
-        <div class="btn reccomended">
-            <button id="r">1</button>
-            <label >Suositeltu</label>
+        <div class="right">
+            <div class="btn reccomended">
+                <button id="r">1</button>
+                <label >Suositeltu</label>
+            </div>
 
+            <div class="log" id="LOG">
+            </div>
+            <button id="DOWNLOAD">Tallenna logitiedot</button>
+            <span class="name" id="NAME"></span>
         </div>
     </div>
-
-
-    <div class="log" id="LOG">
-
-    </div>
+
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,16 +1,29 @@
 
 let text = {};
+let logs = [];
 
 document.addEventListener('DOMContentLoaded', () => {
     const LOG = document.getElementById('LOG');
+    const DOWNLOAD = document.getElementById('DOWNLOAD');
     const r = document.getElementById('r');
+    const urlParams = new URLSearchParams(window.location.search);
+    const name = urlParams.get('name') ?? 'unknown';
+    document.getElementById('NAME').textContent = name;
+
     Array.from(document.getElementsByClassName('b')).forEach(btn => {
         const id = btn.getAttribute('target');
         const target = document.getElementById(id);
 
+        if (urlParams.has(id)) {
+            target.parentNode.classList.add('disabled');
+            target.textContent = 'Pois käytöstä';
+            return;
+        }
+
         text[id] = {
             element: target,
             occupied: false,
+            disabled: false,
             start: new Date(),
             value: 0
         };
@@ -21,7 +34,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
             if (text[id].occupied) {
                 const t = document.createElement('p');
-                t.textContent = `${id}: ${text[id].start.toLocaleTimeString('FI-fi')} (${fmt(text[id].value)})`;
+
+                const data = `${id}: ${text[id].start.toLocaleTimeString('FI-fi')} - ${(new Date()).toLocaleTimeString('FI-fi')} (${fmt(text[id].value)})`;
+                const rawData = `${id}/${text[id].start.getTime()}/${(new Date()).getTime()}/${text[id].value}`;
+                t.textContent = data;
+                logs.push(rawData);
                 LOG.appendChild(t);
             } else {
                 text[id].start = new Date();
@@ -32,6 +49,10 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
+    DOWNLOAD.addEventListener('click', () => {
+        download(`${name}-logs.txt`, logs.join('\n'));
+    });
+
     const fmt = (v) => {
         let minutes = Math.floor(v / 60);
         let seconds = v % 60;
@@ -45,7 +66,7 @@ document.addEventListener('DOMContentLoaded', () => {
         Object.keys(text).forEach(k => {
             let v = text[k];
             v.value += 1;
-            if (!v.occupied && v.value > min) {
+            if (!v.occupied && !v.disabled && v.value > min) {
                 min = v.value;
                 tmp = k;
             }

diff --git a/nginx.conf b/nginx.conf
@@ -0,0 +1,19 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+
+    location /health {
+        return 200;
+    }
+}