.gitlab-ci.yml

@@ -19,7 +19,7 @@ staging:
     - apt-get update -qy
     - apt-get install -y ruby-dev
     - gem install dpl
-    - dpl --provider=heroku --app=<Your-herokuproject-name> --api-key=$HEROKU_STAGING_API_KEY
-    - dpl --provider=heroku --app=<Your-herokuproject-name> --api-key=$HEROKU_STAGING_API_KEY
+    - dpl --provider=heroku --app=<your-frontend-app-name> --api-key=$HEROKU_STAGING_API_KEY
+    - dpl --provider=heroku --app=<your-backend-app-name> --api-key=$HEROKU_STAGING_API_KEY
   only:
     - master

README.md

@@ -8,6 +8,8 @@ SecFit (Secure Fitness) is a hybrid mobile application for fitness logging.
 
 Docker
 
+Python 3.8.10
+
 Git
 
 Windows hosts must use Education or more advanced versions to run Docker \
@@ -15,7 +17,7 @@ Download: https://innsida.ntnu.no/wiki/-/wiki/English/Microsoft+Windows+10
 
 ### Install:
 
-$ git clone https://gitlab.stud.idi.ntnu.no/kyleo/secfit.git \
+$ git clone https://gitlab.stud.idi.ntnu.no/<your_username>/tdt4242-base.git \
 $ cd secfit/
 
 ### Run:
@@ -23,6 +25,18 @@ $ cd secfit/
 $ docker-compose up --build \
 Hosts the application on http://localhost:9090 with default settings
 
+You might have to run Docker with administrator privileges to get it to run properly:
+
+#### Windows:
+Either open the terminal as administrator (Windows key -> Search "cmd" -> "Run as administrator")
+
+or
+
+$ runas /user/Administrator "docker-compose up --build"
+
+#### Unix/OSX:
+$ sudo docker-compose up --build
+
 
 ## Technology
 - **deployment** Docker
@@ -132,37 +146,42 @@ WARNING: Do not perform penetration testing on Heroku applications
 
 Continuous integration will build the code pushed to master and push it to your heroku app so you get a live version of your latest code by just pushing your code to GitLab.
 
-1. Create a heroku account and an app for both the frontend and the backend.
-2. Select buildpacks for the two apps. The backend uses Python while the frontend uses node.js.
-   * Settings > Buildpacks > Add buildpack
+1. Make sure you have the right python version (3.8.10) and have all other requirements installed.
+2. Create a heroku account and an app for both the frontend and the backend. (Choose Europe as your region)
+3. Select buildpacks for the two apps. The backend uses Python while the frontend uses nodejs.
+   * Heroku > Settings > Buildpacks  > Add buildpack
    * Both applications need the buildpack https://github.com/heroku/heroku-buildpack-multi-procfile.git too.
-3. Set the project in the .gitlab-cs.yml file by replacing `<Your-herokuproject-name>` with the name of the Heroku app you created
+4. Set the two projects in the .gitlab-cs.yml file by replacing `<Your-herokuproject-name>` with the name of the Heroku apps you created. Commit and push your change.
 `- dpl --provider=heroku --app=<Your-herokuproject-name> --api-key=$HEROKU_STAGING_API_KEY`
-5. Set varibles at GitLab
-   * settings > ci > Environment Variables
-   * `HEROKU_STAGING_API_KEY` = heroku > Account Settings > API Key
+5. Set/Add varibles at GitLab
+   * GitLab > settings > ci > Variables > Expand
+   * Key = `HEROKU_STAGING_API_KEY`
+   * Value = Your API Key from Heroku (Heroku > Account Settings > API Key > Reveal)
+   * Type = Variable, Environment scope = All(default)
+   * Protect should not be enabled and Mask should be enabled
 6. Add heroku database for the backend
-   * Resources > Add ons > search for postgres > add "Heroku Postgres"
-7. Set variables for the backend on Heroku. Settings > Config vars > Reveal vars
-   * `DATABASE_URL` = Should be set by default. If not here is where you can find it: Resources > postgress > settings > view credentials > URI
+   * Heroku > Resources > Add ons > search for `postgres` > add "Heroku Postgres"
+   * Choose the free plan.
+7. Set variables for the backend on Heroku. Heroku > Settings > Config vars > Reveal vars
+   * `DATABASE_URL` = Should be set by default. If not here is where you can find it: Heroku > Resources > postgress > settings > view credentials > URI
    * `IS_HEROKU` = `IS_HEROKU`
-   * `PROCFILE` = `backend/secfit/Procfile`
-8. Set variables for the frontend on heroku. Settings > Config vars > Reveal vars. Insert the URL for your backend app.
+   * `PROCFILE` = `Procfile`
+8. Set variables for the frontend on heroku. Heroku > Settings > Config vars > Reveal vars. Insert the URL for your backend app and the path to your Procfile. (Example: `https://secfit-group01-v22-backend.herokuapp.com`)
    * `BACKEND_HOST` = `https://<SECFIT_BACKEND>.herokuapp.com`
    * `PROCFILE` = `frontend/Procfile`
-9. Push the repository to both of the heroku applications https://devcenter.heroku.com/articles/git 
-   * git push `<backend-repository>` HEAD:master
-   * git push `<frontend-repository>` HEAD:master
-10. On GitLab go to CI / CD in the repository menu and select `Run Pipeline` if it has not already started. When both stages complete the app should be available on heroku. Staging will fail from timeout as Heroku does not give the propper response to end the job. But the log should state that the app was deployed.
+9. Push the repository to both of the heroku applications 
+   * Follow the guides on https://devcenter.heroku.com/articles/git#for-an-existing-heroku-app 
+      * Make sure you install the heroku CLI https://devcenter.heroku.com/articles/heroku-cli
+      * Make sure you log in to the heroku CLI ($ heroku login)
+      * Make sure you create a remote for the frontend and backend apps (Example: heroku git:remote -a secfit-group01-v22-frontend)
+      * Push your code to both apps (Your URLs can also be found on the settings page on your Heroku apps)	
+         * Example: $ git push https://git.heroku.com/secfit-group01-v22-frontend.git master
+         * Make sure you use `master` and not `main` as your target branch
+10. On GitLab go to CI / CD in the repository menu and select `Run Pipeline` if it has not already started. When both stages complete the app should be available on heroku. The log should state that the app was deployed.
 11. Setup the applications database.
-   * Install heroku CLI by following: https://devcenter.heroku.com/articles/heroku-cli
-   * Log in to the Heroku CLI by entering `heroku login`. This opens a webbrowser and you accept the login request.
+   * Log in to the Heroku CLI by entering `heroku login` if you have not already done this. This opens a webbrowser and you accept the login request.
    * Migrate database by entering
-   `heroku run python backend/secfit/manage.py migrate -a <heroku-app-name>`. `Heroku run` will run the folowing command on your heroku instance. Remember to replace `<heroku-app-name>` with your app name
-   * and create an admin account by running
+   `heroku run python backend/secfit/manage.py migrate -a <heroku-app-name>`. `Heroku run` will run the folowing command on your heroku instance. Remember to replace `<heroku-app-name>` with your backend app name
+   * and create an admin account for the backend by running
    `heroku run python backend/secfit/manage.py createsuperuser -a <heroku-app-name>`.
-   * seed database `heroku run python backend/secfit/manage.py loaddata seed.json -a <heroku-app-name>`
-12. On the frontend app, add a config variable for `BACKEND_HOST` = `BACKEND_HOST`
-
-You will also need the heroku multi-procfile buildpack: https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-multi-procfile.
-In general, for this application to work (beyond locally), you will need to set the BACKEND_HOST to the URL of the REST API backend.
+   * seed database `heroku run python backend/secfit/manage.py loaddata backend/secfit/seed.json -a <heroku-app-name>`

backend/secfit/runtime.txt

-python-3.8.6
\ No newline at end of file
+python-3.8.10
\ No newline at end of file

frontend/www/exercise.html

@@ -31,17 +31,17 @@
             </div>
             <div class="col-lg-6"></div>
             <div class="col-lg-6">
-                <label for="inputUnit" class="form-label">Unit</label>
+                <label for="inputUnit" class="form-label">Unit (Reps, time, etc.)</label>
                 <input type="text" class="form-control" id="inputUnit" name="unit" readonly>
             </div>
             <div class="col-lg-6"></div>
             <div class="col-lg-6">
-                <label for="inputDuration" class="form-label"> Duration (Seconds per unit)</label>
+                <label for="inputDuration" class="form-label"> Duration(Expects a positive integer)</label>
                 <input type="number" class="form-control" id="inputDuration" name="duration" readonly></input>
             </div>
             <div class="col-lg-6"></div>
             <div class="col-lg-6">
-                <label for="inputCalories" class="form-label"> Calories burned (kcal per minute)</label>
+                <label for="inputCalories" class="form-label"> Calories burned (Expects a positive integer)</label>
                 <input type="number" class="form-control" id="inputCalories" name="calories" readonly></input>
             </div>
             <div class="col-lg-6"></div>

frontend/www/gallery.html

+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Gallery</title>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+
+        <script src="https://kit.fontawesome.com/0ce6c392ca.js" crossorigin="anonymous"></script>
+        <link rel="stylesheet" href="styles/style.css">
+        <script src="scripts/navbar.js" type="text/javascript" defer></script>
+    </head>
+    <body>
+        <navbar-el></navbar-el>
+
+        <div class="container">
+            <h1 id="workout-title" class="mt-3"></h1>
+            <h3 id="workout-owner" class="mt-6"></h3>
+            <input type="button" class="btn btn-secondary" id="btn-back-workout" value="  Back to workout  ">
+            
+            <div class="gallery-container">
+                <div class="main-img">
+                    <img src="" id="current">
+                </div>
+
+                <h3 id="no-images-text" class="mt-6">This workout has no images.</h3>
+                <div class="imgs" id="img-collection-container">
+                    <div id="img-collection"></div>
+                    <div id="img-collection-delete"></div>
+                </div>        
+            </div>
+        </div>
+
+        <script src="scripts/scripts.js"></script>
+        <script src="scripts/defaults.js"></script>
+        <script src="scripts/gallery.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+    </body>
+
+</html>
\ No newline at end of file

frontend/www/index.html

@@ -17,7 +17,7 @@
             <div class="row mt-3">
                 <div class="col-lg text-center">
                     <h2 class="mt-3">Welcome to SecFit!</h2>
-                    <p>SecFit (coming from "Secure" and "Fitness") is the most secure fitness logging app on the net.
+                    <p>SecFit (coming from "SuperSecure" and "Fitness") is the most secure fitness logging app on the net.
                         You can conveniently log a workout using either our website or our app. You can also view and comment on others'
                         workouts!
                     </p>

frontend/www/scripts/gallery.js

+let goBackButton;
+let submitNewFileButton;
+
+async function retrieveWorkoutImages(id) {  
+    let workoutData = null;
+    let response = await sendRequest("GET", `${HOST}/api/workouts/${id}/`);
+    if (!response.ok) {
+        let data = await response.json();
+        let alert = createAlert("Could not retrieve workout data!", data);
+        document.body.prepend(alert);
+    } else {
+        workoutData = await response.json();
+
+        document.getElementById("workout-title").innerHTML = "Workout name: " + workoutData["name"];
+        document.getElementById("workout-owner").innerHTML = "Owner: " + workoutData["owner_username"];
+
+        let hasNoImages = workoutData.files.length == 0;
+        let noImageText = document.querySelector("#no-images-text");
+
+        if(hasNoImages){
+            noImageText.classList.remove("hide");
+            return;
+        }
+
+        noImageText.classList.add("hide");
+
+        
+        let filesDiv = document.getElementById("img-collection");
+        let filesDeleteDiv = document.getElementById("img-collection-delete");
+        
+        const currentImageFileElement = document.querySelector("#current");
+        let isFirstImg = true;
+
+        let fileCounter = 0;
+
+        for (let file of workoutData.files) {
+            let a = document.createElement("a");
+            a.href = file.file;
+            let pathArray = file.file.split("/");
+            a.text = pathArray[pathArray.length - 1];
+            a.className = "me-2";
+
+            
+
+            let isImage = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"].includes(a.text.split(".")[1]);
+
+            if(isImage){
+                let deleteImgButton = document.createElement("input");
+                deleteImgButton.type = "button";
+                deleteImgButton.className = "btn btn-close";
+                deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
+                deleteImgButton.addEventListener('click', () => handleDeleteImgClick(deleteImgButton.id, "DELETE", `Could not delete workout ${deleteImgButton.id}!`, HOST, ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"]));
+                filesDeleteDiv.appendChild(deleteImgButton);
+                
+                let img = document.createElement("img");
+                img.src = file.file;
+                
+                filesDiv.appendChild(img);
+                deleteImgButton.style.left = `${(fileCounter % 4) * 191}px`;
+                deleteImgButton.style.top = `${Math.floor(fileCounter / 4) * 105}px`;
+
+                if(isFirstImg){
+                    currentImageFileElement.src = file.file;
+                    isFirstImg = false;
+                }
+                fileCounter++;
+            }
+        }
+
+        const otherImageFileElements = document.querySelectorAll(".imgs img");
+        const selectedOpacity = 0.6;
+        otherImageFileElements[0].style.opacity = selectedOpacity;
+
+        otherImageFileElements.forEach((imageFileElement) => imageFileElement.addEventListener("click", (event) => {
+            //Changes the main image
+            currentImageFileElement.src = event.target.src;
+
+            //Adds the fade animation
+            currentImageFileElement.classList.add('fade-in')
+            setTimeout(() => currentImageFileElement.classList.remove('fade-in'), 500);
+
+            //Sets the opacity of the selected image to 0.4
+            otherImageFileElements.forEach((imageFileElement) => imageFileElement.style.opacity = 1)
+            event.target.style.opacity = selectedOpacity;
+        }))
+
+    }
+    return workoutData;     
+}
+
+async function validateImgFileType(id, host_variable, acceptedFileTypes) {
+    let file = await sendRequest("GET", `${host_variable}/api/workout-files/${id}/`);
+    let fileData = await file.json();
+    let fileType = fileData.file.split("/")[fileData.file.split("/").length - 1].split(".")[1];
+    
+    return acceptedFileTypes.includes(fileType);
+}
+
+async function handleDeleteImgClick (id, http_keyword, fail_alert_text, host_variable, acceptedFileTypes) {
+    
+    if(validateImgFileType(id, host_variable, acceptedFileTypes, )){
+        return
+    }
+
+    let response = await sendRequest(http_keyword, `${host_variable}/api/workout-files/${id}/`);
+
+    if (!response.ok) {
+        let data = await response.json();
+        let alert = createAlert(fail_alert_text, data);
+        document.body.prepend(alert);
+    } else {
+        location.reload();
+    }
+}
+
+function handleGoBackToWorkoutClick() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const id = urlParams.get('id');
+    window.location.replace(`workout.html?id=${id}`);
+}
+
+window.addEventListener("DOMContentLoaded", async () => {
+
+    goBackButton = document.querySelector("#btn-back-workout");
+    goBackButton.addEventListener('click', handleGoBackToWorkoutClick);
+
+    const urlParams = new URLSearchParams(window.location.search);
+    const id = urlParams.get('id');
+    let workoutData = await retrieveWorkoutImages(id);   
+
+});
\ No newline at end of file

frontend/www/scripts/workout.js

@@ -3,6 +3,7 @@ let okWorkoutButton;
 let deleteWorkoutButton;
 let editWorkoutButton;
 let postCommentButton;
+let galleryButton;
 
 async function retrieveWorkout(id) {  
     let workoutData = null;
@@ -41,19 +42,9 @@ async function retrieveWorkout(id) {
             let pathArray = file.file.split("/");
             a.text = pathArray[pathArray.length - 1];
             a.className = "me-2";
-            let img
-            let isImage = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"].includes(a.text.split(".")[1]);
-            if(isImage){ 
-                img = document.createElement("img");
-                img.src = file.file;
-                img.width = "500";
-            }
 
             filesDiv.appendChild(a);
 
-            if(isImage){
-                filesDiv.appendChild(img);
-            }
         }
 
         // create exercises
@@ -126,6 +117,7 @@ function handleEditWorkoutButtonClick() {
     document.querySelector("#inputOwner").readOnly = true;  // owner field should still be readonly 
 
     editWorkoutButton.className += " hide";
+    galleryButton.className += " hide";
     okWorkoutButton.className = okWorkoutButton.className.replace(" hide", "");
     cancelWorkoutButton.className = cancelWorkoutButton.className.replace(" hide", "");
     deleteWorkoutButton.className = deleteWorkoutButton.className.replace(" hide", "");
@@ -136,6 +128,13 @@ function handleEditWorkoutButtonClick() {
 
 }
 
+function handleGalleryButtonClick() {
+    const urlParams = new URLSearchParams(window.location.search);
+
+    const id = urlParams.get('id');
+    window.location.replace(`gallery.html?id=${id}`);
+}
+
 async function deleteWorkout(id) {
     let response = await sendRequest("DELETE", `${HOST}/api/workouts/${id}/`);
     if (!response.ok) {
@@ -321,6 +320,7 @@ window.addEventListener("DOMContentLoaded", async () => {
     okWorkoutButton = document.querySelector("#btn-ok-workout");
     deleteWorkoutButton = document.querySelector("#btn-delete-workout");
     editWorkoutButton = document.querySelector("#btn-edit-workout");
+    galleryButton = document.querySelector("#btn-gallery-workout");
     let postCommentButton = document.querySelector("#post-comment");
     let divCommentRow = document.querySelector("#div-comment-row");
     let buttonAddExercise = document.querySelector("#btn-add-exercise");
@@ -329,6 +329,9 @@ window.addEventListener("DOMContentLoaded", async () => {
     buttonAddExercise.addEventListener("click", createBlankExercise);
     buttonRemoveExercise.addEventListener("click", removeExercise);
 
+    galleryButton.addEventListener("click", handleGalleryButtonClick);
+
+
     const urlParams = new URLSearchParams(window.location.search);
     let currentUser = await getCurrentUser();
 
@@ -356,6 +359,8 @@ window.addEventListener("DOMContentLoaded", async () => {
         cancelWorkoutButton.className = cancelWorkoutButton.className.replace(" hide", "");
         buttonAddExercise.className = buttonAddExercise.className.replace(" hide", "");
         buttonRemoveExercise.className = buttonRemoveExercise.className.replace(" hide", "");
+        galleryButton.className += " hide";
+
 
         okWorkoutButton.addEventListener("click", async () => await createWorkout());
         cancelWorkoutButton.addEventListener("click", handleCancelDuringWorkoutCreate);

frontend/www/styles/style.css

@@ -62,3 +62,57 @@
 .link-block {
   display: block;
 }
+
+
+.gallery-container {
+  max-width: 760px;
+  margin: auto;
+  border: #fff solid 3px;
+  background: #fff;
+}
+
+.main-img img, .imgs img {
+  width: 100%;
+  max-height: 400px;
+}
+
+.imgs > div{
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-gap: 5px;
+  border-top: #fff solid 20px;
+  position: relative;
+}
+
+#img-collection img {
+  height: 100px;
+  width: 186px;
+}
+
+#img-collection-delete input {
+  height: 20px;
+  width: 20px;
+  background-color: gray;
+  position: absolute;
+}
+
+#img-collection {
+  z-index: 1;
+  position: absolute;
+}
+
+#img-collection-delete {
+  z-index: 2;
+  position: absolute; 
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  opacity: 0;
+  animation: fadeIn 0.5s ease-in 1 forwards ;
+}
\ No newline at end of file

frontend/www/workout.html

@@ -57,12 +57,18 @@
         </div>
         <div class="col-lg-6">
         </div>
+        
         <div class="col-lg-6">
           <input type="button" class="btn btn-primary hide" id="btn-ok-workout" value="  OK  ">
           <input type="button" class="btn btn-primary hide" id="btn-edit-workout" value=" Edit ">
           <input type="button" class="btn btn-secondary hide" id="btn-cancel-workout" value="Cancel">
           <input type="button" class="btn btn-danger float-end hide" id="btn-delete-workout" value="Delete">
         </div>
+        
+        <div class="col-lg-6">
+          <input type="button" class="btn btn-info" id="btn-gallery-workout" value="  Go to gallery  ">
+        </div>
+        
         <div class="col-lg-6"></div>
         <div class="col-lg-12">
             <h3 class="mt-3">Exercises</h3>

runtime.txt

-python-3.8.6
\ No newline at end of file
+python-3.8.10
\ No newline at end of file