From d3124f7caae6d87d816a3ba4b2624487a04a0e1c Mon Sep 17 00:00:00 2001
From: Jan Dickmann <jan.dickmann@web.de>
Date: Thu, 20 Jun 2024 17:09:08 +0200
Subject: [PATCH] csrf added to startpage and first steps to double video

---
 slaeforms/app.py                           | 23 ++++++++--
 slaeforms/default.json                     | 52 ++++++++++++++++++++-
 slaeforms/static/styles.css                | 16 +++++++
 slaeforms/templates/standard_template.html | 53 ++++++++++++++++++----
 slaeforms/templates/startpage.html         |  1 +
 slaeforms/templates/teststartpage.html     |  3 +-
 6 files changed, 135 insertions(+), 13 deletions(-)

diff --git a/slaeforms/app.py b/slaeforms/app.py
index c2eb660..30a7a9c 100644
--- a/slaeforms/app.py
+++ b/slaeforms/app.py
@@ -181,7 +181,10 @@ def teststartpage():
 
         # if the block has stimuli, get how many
         if "stimuli" in current_block:
-            session["number_of_stimuli"] = len(list(current_block["stimuli"]["list"]))
+            if current_block["stimuli"]["type"] == "single_video":
+                session["number_of_stimuli"] = len(list(current_block["stimuli"]["list"]))
+            elif current_block["stimuli"]["type"] == "double_video":
+                session["number_of_stimuli"] = len(list(current_block["stimuli"]["list_1"]))
             
 
         print("number of blocks: ",len(session["block_names"]))
@@ -198,6 +201,15 @@ def teststartpage():
                             if config[name]["stimuli"]["order"] == "random":
                                 random.shuffle(order) #in random order
                             session["block_order"][name] = order
+                        case "double_video": 
+                            order = [] # order = list of stimuli keys
+                            list_1 = list(current_block["stimuli"]["list_1"])
+                            list_2 = list(current_block["stimuli"]["list_2"])
+                            for i in range(len(list(current_block["stimuli"]["list_1"]))):
+                                order.append((list_1[i], list_2[i]))
+                            print("order: ",order)
+                            #TODO random is not implemented here
+                            session["block_order"][name] = order
                         case "empty": 
                             order = list(config[name]["stimuli"]["list"]) # order = list of simuli keys
                             print("order: ",order)
@@ -286,6 +298,10 @@ def jsonform():
             case "single_video":
                 stimulus_configuration["video_url"] = config[session["current_block_name"]]["stimuli"]["list"][current_stimulus]
                 print("-------------videourl: ", stimulus_configuration["video_url"])
+            case "double_video":
+                stimulus_configuration["video_url1"] = config[session["current_block_name"]]["stimuli"]["list_1"][current_stimulus[0]]
+                stimulus_configuration["video_url2"] = config[session["current_block_name"]]["stimuli"]["list_2"][current_stimulus[1]]
+
         return render_template(
         "standard_template.html",
         stimuli=current_block_stimuli,
@@ -537,8 +553,9 @@ def table_contents():
     query1 = select(qtable).where(qtable.c.alter == 78)
     print("Query 1: ", query1)
     print("Query 1 result: ")
-
-    for row in db.session.execute(query1):
+    result = db.session.execute(query1)
+    print("Columns: ", result.columns)
+    for row in result:
         print(row)
     #Test End
 
diff --git a/slaeforms/default.json b/slaeforms/default.json
index 8231877..729e499 100644
--- a/slaeforms/default.json
+++ b/slaeforms/default.json
@@ -1,4 +1,55 @@
 {
+    "Block 0":{
+        "type": "TaskTemplate",
+        "tempalte": "standard_template.html",
+        "stimuli":{
+            "type":"double_video",
+            "list_1":{
+                "video_1":"https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70",
+                "video_2":"https://www.youtube-nocookie.com/embed/EL76Ok4r0aQ?si=hqUm8eUUfX39NN4L",
+                "video_3":"https://www.youtube-nocookie.com/embed/XTMIomsXxKM?si=r2zB6OKERH6Jdpi6"
+            },
+            "list_2":{
+                "video_1":"https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70",
+                "video_2":"https://www.youtube-nocookie.com/embed/EL76Ok4r0aQ?si=hqUm8eUUfX39NN4L",
+                "video_3":"https://www.youtube-nocookie.com/embed/XTMIomsXxKM?si=r2zB6OKERH6Jdpi6"
+            },
+            "configuration":{
+                "embed":"yt"
+            }
+        },
+        "questions":{
+            "question1":{
+                "type": "likert",
+                "name": "likertscale",
+                "text": "How would you rate this video?",
+                "required": "true",
+                "points":{
+                    "p1":{
+                        "value":"1",
+                        "text":"I dont like it at all"
+                    },
+                    "p2":{
+                        "value":"2",
+                        "text":"I am indifferent"
+                    },
+                    "p3":{
+                        "value":"3",
+                        "text":"I like it a lot"
+                    }
+                }
+            }
+        },
+        "database_table" :{
+            "table_name": "double_video_test",
+            "fields": {
+                "likertscale":{
+                    "type": "integer",
+                    "nullable": "false"
+                }
+            }
+        }
+    },
     "Block 1":{
         "type": "TaskTemplate",
         "tempalte": "standard_template.html",
@@ -138,7 +189,6 @@
     "Block 2":{
         "type": "TaskTemplate",
         "tempalte": "standard_template.html",
-        "number_of_pages":"3",
         "stimuli":{
             "type":"single_video",
             "order": "random",
diff --git a/slaeforms/static/styles.css b/slaeforms/static/styles.css
index 1cb2a9d..e3a0de1 100644
--- a/slaeforms/static/styles.css
+++ b/slaeforms/static/styles.css
@@ -206,6 +206,22 @@ iframe { /* center the iframe, mostly unnecessary */
     -moz-transform: rotateY(180deg);
   }
 
+  /* Double Video */
+.dv_button {
+    display: inline-block;
+    width: 10%;
+    padding: 20px 20px;
+    margin: auto;
+}
+.dv_half {
+    display: inline-block;
+    width: 45%;
+    margin: auto;
+}
+.double_video_container {
+    width: 100%;
+}
+
 /* Likert stuff */
 .likert {
     --likert-rows: 5;
diff --git a/slaeforms/templates/standard_template.html b/slaeforms/templates/standard_template.html
index 0950324..6aea3f2 100644
--- a/slaeforms/templates/standard_template.html
+++ b/slaeforms/templates/standard_template.html
@@ -4,14 +4,49 @@
 </p>") -%}
 {% if (embed == "yt") %}
 
-    {% if (title != "") %}
-    <h3>{{title}}</h3>
-    {% endif %}
-    <div class="iframe-container">
-        <iframe class="center" src="{{ video_url }}" title="YouTube video player" frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowfullscreen></iframe>
+{% if (title != "") %}
+<h3>{{title}}</h3>
+{% endif %}
+<div class="iframe-container">
+    <iframe class="center" src="{{ video_url }}" title="YouTube video player" frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen></iframe>
+</div>
+
+{% else %}
+{{code}}
+{% endif %}
+{%- endmacro %}
+
+{% macro double_video(video_url1, video_url2, embed="yt", title="",width="560", height="315", class="center", code="<p>
+    No code given
+</p>") -%}
+{% if (embed == "yt") %}
+
+{% if (title != "") %}
+<h3>{{title}}</h3>
+{% endif %}
+<div class="double_video_container">
+
+    <div class="dv_half">
+        <div class="iframe-container">
+            <iframe class="center" src="{{ video_url1 }}" title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen></iframe>
+        </div>
     </div>
+    <div style="display: inline-block;">
+    <button class="dv_button">Play Videos</button>
+</div>
+    <div class="dv_half">
+        <div class="iframe-container">
+            <iframe class="center" src="{{ video_url2 }}" title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen></iframe>
+        </div>
+    </div>
+
+</div>
 
 {% else %}
 {{code}}
@@ -59,6 +94,8 @@ step={{question["step"]}}
     <div class="container">
         {% if (stimulus_type == "single_video") %}
         {{ single_video(**stimulus_configuration) }}
+        {% elif (stimulus_type == "double_video") %}
+        {{ double_video(**stimulus_configuration) }}
         {% elif (stimulus_type == "empty") %}
 
         {% else %}
@@ -66,7 +103,7 @@ step={{question["step"]}}
         {% endif %}
 
         <form class="formlayout" id="question_form" action="http://localhost:5000/send_json" method="post">
-            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
             {% for question in questions %}
             {% if (questions[question]["type"] == "likert") %}
             <div class="likercontainer">
diff --git a/slaeforms/templates/startpage.html b/slaeforms/templates/startpage.html
index 3de6867..dfb10e0 100644
--- a/slaeforms/templates/startpage.html
+++ b/slaeforms/templates/startpage.html
@@ -11,6 +11,7 @@
         <div class="container">
     <h2>Hello! Thank you for participating in our study!</h2>
     <form action="http://localhost:5000/start" method="post">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
     <label for="terms-and-conditions">
         <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the +terms and conditions</a>
     </label>
diff --git a/slaeforms/templates/teststartpage.html b/slaeforms/templates/teststartpage.html
index 11b5491..c929614 100644
--- a/slaeforms/templates/teststartpage.html
+++ b/slaeforms/templates/teststartpage.html
@@ -19,7 +19,8 @@
         If you have further questions, please send an email to testemail@notarealemail.deee
     </p>
     </div>
-    <form class="dsgvoform"action="http://localhost:5000/teststart" method="post">
+    <form class="dsgvoform" action="http://localhost:5000/teststart" method="post">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
     <label for="terms-and-conditions">
         <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the +terms and conditions</a>
     </label>