Jan/slaeforms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dockerfile, fixing hardcoded url and cleanup

Browse Source
This commit is contained in:
Jan Dickmann 2024-06-30 12:40:39 +02:00
parent 11f051c7d9
commit 3e482d2e49
12 changed files with 246 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
slaeforms/app.py
View File

@ -657,5 +657,8 @@ def delete_all_entries():
# Close the session
db.session.close()
def create_app():
return app
if __name__ == '__main__':
app.run()
app.run()

17
slaeforms/dockerfile Normal file
View File

@ -0,0 +1,17 @@
# Use the official Python image from the Docker Hub
FROM python:3.10-slim
# Set the working directory
WORKDIR /slaeforms
# Copy the rest of the application code to the working directory
COPY . .
# Install the dependencies
RUN pip install --no-cache-dir -r requirements.txt
# Expose the port on which the app will run
EXPOSE 8000
# Define the command to run the application using Gunicorn
CMD ["gunicorn", "--bind", "0.0.0.0:8000", "app:create_app()"]

16
slaeforms/requirements.txt Normal file
View File

@ -0,0 +1,16 @@
blinker==1.8.2
click==8.1.7
colorama==0.4.6
Flask==3.0.3
Flask-SQLAlchemy==3.1.1
Flask-WTF==1.2.1
greenlet==3.0.3
gunicorn==22.0.0
itsdangerous==2.2.0
Jinja2==3.1.4
MarkupSafe==2.1.5
packaging==24.1
SQLAlchemy==2.0.30
typing_extensions==4.12.2
Werkzeug==3.0.3
WTForms==3.1.2

126
slaeforms/templates/layout2.html
View File

@ -1,64 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Testform</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<h2>Question: {{ current_question }}</h2>
{% if (videotype == "single")%} <!-- first figure out what video type we have -->
<div class="center">
<h3>Video 1</h3>
<iframe width="560" height="315" 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>
{% elif (videotype == "pairwise")%}
<div class="columncontainer">
<div class="columnleft center">
<h3>Video 1</h3>
<iframe width="560" height="315" class="center" src="{{ video_url_left }}" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="columnright">
<h3>Video 2</h3>
<iframe width="560" height="315" src="{{ video_url_right }}" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
{% else %}
<p>Error: No Videotype could be matched or was given!</p>
{% endif %}
<form action="http://localhost:5000/send" method="post">
{% for block in config["question 1"]["blocks"] %}
{% if (config["question 1"]["blocks"][block]["type"] == "likert") %}
<div class="likercontainer">
<div class="likert">
<label><input name="likertscale" type="radio" value="1" /><span>I dont like it at all</span></label>
<label><input name="likertscale" type="radio" value="2" /><span>I dont like it</span></label>
<label><input name="likertscale" type="radio" value="3" /><span>I am indifferent</span></label>
<label><input name="likertscale" type="radio" value="4" /><span>I like it</span></label>
<label><input name="likertscale" type="radio" value="5" /><span>I like it a lot</span></label>
</div>
</div>
{% elif (config["question 1"]["blocks"][block]["type"] == "textinput") %}
<label for="feedback">Additional Feedback: </label>
<textarea id="feedback" name="feedback" rows="3" cols="30" maxlength="200"></textarea>
{% else %}
<p>Error: A block could not be loaded!</p>
{% endif %}
{% endfor %}
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
</form>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Testform</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<h2>Question: {{ current_question }}</h2>
{% if (videotype == "single")%} <!-- first figure out what video type we have -->
<div class="center">
<h3>Video 1</h3>
<iframe width="560" height="315" 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>
{% elif (videotype == "pairwise")%}
<div class="columncontainer">
<div class="columnleft center">
<h3>Video 1</h3>
<iframe width="560" height="315" class="center" src="{{ video_url_left }}" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<div class="columnright">
<h3>Video 2</h3>
<iframe width="560" height="315" src="{{ video_url_right }}" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
{% else %}
<p>Error: No Videotype could be matched or was given!</p>
{% endif %}
<form action="http://localhost:5000/send" method="post">
{% for block in config["question 1"]["blocks"] %}
{% if (config["question 1"]["blocks"][block]["type"] == "likert") %}
<div class="likercontainer">
<div class="likert">
<label><input name="likertscale" type="radio" value="1" /><span>I dont like it at all</span></label>
<label><input name="likertscale" type="radio" value="2" /><span>I dont like it</span></label>
<label><input name="likertscale" type="radio" value="3" /><span>I am indifferent</span></label>
<label><input name="likertscale" type="radio" value="4" /><span>I like it</span></label>
<label><input name="likertscale" type="radio" value="5" /><span>I like it a lot</span></label>
</div>
</div>
{% elif (config["question 1"]["blocks"][block]["type"] == "textinput") %}
<label for="feedback">Additional Feedback: </label>
<textarea id="feedback" name="feedback" rows="3" cols="30" maxlength="200"></textarea>
{% else %}
<p>Error: A block could not be loaded!</p>
{% endif %}
{% endfor %}
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
</form>
</body>
</html>

2
slaeforms/templates/login.html
View File

@ -12,7 +12,7 @@
<div class="container">
<div class="login-container" >
<p>Some pages require you to be logged in.</p>
<form action="http://localhost:5000/login" method="post">
<form action="{{ url_for('login') }}" method="post">
<input class="login-elements" type="password" value="" name="password" placeholder="password">
<input class="login-elements" id="loginbutton" type="submit" value="submit";/>
</form></div>

282
slaeforms/templates/myvideotemplate.html → slaeforms/templates/old_unused/myvideotemplate.html
View File

@ -1,142 +1,142 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}" />
<!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Testform</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
</head>
<body>
<div class="container">
<h2>Gib Feedback als Video</h2>
<div class="centertext">
<button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
<img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}" alt="Camera Icon">
</button>
</div>
<div class="spacer" aria-hidden="true" style="height:30px"></div>
<div class="centertext">
<button type="button" class="videocontrols" id="buttonRecord" style="display:none" onclick="recordButton()">
<img id="buttonRecordIcon" src="{{ url_for('static', filename='icons/record-icon.png')}}" alt="Camera Icon">
</button>
<button type="button" class="videocontrols" id="buttonDelete" style="display:none" disabled
onclick="deleteButton()">
<img id="buttonDeleteIcon" src="{{ url_for('static', filename='icons/trash-icon.png')}}" alt="Delete Icon"
class="buttondisable">
</button>
</div>
<div class="spacer" aria-hidden="true" style="height:15px"></div>
<div class="centertext">
<video autoplay muted playsinline id="videoDisplay"></video>
</div>
<script>
const buttonCamera = document.getElementById('buttonCamera');
const buttonRecord = document.getElementById('buttonRecord');
const buttonDelete = document.getElementById('buttonDelete');
const videoDisplay = document.getElementById('videoDisplay');
const buttonCameraIcon = document.getElementById('buttonCameraIcon');
const buttonRecordIcon = document.getElementById('buttonRecordIcon');
//const buttonDeleteIcon = document.getElementById('buttonDeleteIcon');
var mediaRecorder = null;
var stream = null;
let recordedVideoBlob = null;
let isRecording = false;
let videoAccess = false;
async function cameraButton() {
if (!videoAccess) { //test what happens if user doesnt give the permission
console.log("cameraButton case videoAccess = false");
// maybe a try catch block?
try {
stream = await navigator.mediaDevices.getUserMedia({
video: true,
});
} catch (error) {
//TODO when this occurs the user should get a hint to reload the page or to allow it next to the url
newerror = error
console.log("Error: ", error);
return
}
console.log("stream is active");
videoAccess = true
videoDisplay.srcObject = stream
buttonCameraIcon.src = "{{ url_for('static', filename='icons/camera-off-icon.png') }}"; //todo, not sure if this works
buttonCameraIcon.alt = "Camera-off Icon";
buttonRecord.style.display = 'inline-block';
buttonDelete.style.display = 'inline-block';
videoDisplay.style.display = 'inline-block';
mediaRecorder = new MediaRecorder(stream, {
mimeType: "video/webm", //could use other video format: https://www.iana.org/assignments/media-types/media-types.xhtml#video
// I probably want to change the bitrate: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
});
} else {
console.log("cameraButton case videoAccess = true");
stream = null;
videoAccess = false
buttonCameraIcon.src = "{{ url_for('static', filename='icons/camera-icon.png') }}"; //todo, not sure if this works
buttonCameraIcon.alt = "Camera Icon";
buttonRecord.style.display = 'none';
buttonDelete.style.display = 'none';
videoDisplay.style.display = 'none';
}
console.log("camera button function ends");
}
mediaRecorder.addEventListener("dataavailable", (event) => {
videoRecorded.src = URL.createObjectURL(event.data);
recordedVideoBlob = event.data;
});
function recordButton() {
console.log("recordButton pressed");
if (!isRecording) {
console.log("recordButton pressed case isRecording = false");
deleteButton();
buttonDelete.setAttribute("disabled", "");
buttonDeleteIcon.classList.add("buttondisable");
mediaRecorder.start();
buttonRecordIcon.src = "{{ url_for('static', filename='icons/stop-icon.png') }}";
buttonRecordIcon.alt = 'record icon';
isRecording = true;
console.log('Recording started');
} else {
console.log("recordButton pressed case isRecording = true");
mediaRecorder.stop();
buttonRecordIcon.src = "{{ url_for('static', filename='icons/record-icon.png') }}";
buttonRecordIcon.alt = 'Stop Icon';
isRecording = false;
console.log('Recording stopped');
buttonDelete.removeAttribute("disabled");
buttonDeleteIcon.classList.remove("buttondisable");
}
}
function deleteButton() {
//todo delete data
buttonDelete.setAttribute("disabled", "");
buttonDeleteIcon.classList.add("buttondisable");
}
</script>
</div>
</body>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}" />
<!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Testform</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
</head>
<body>
<div class="container">
<h2>Gib Feedback als Video</h2>
<div class="centertext">
<button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
<img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}" alt="Camera Icon">
</button>
</div>
<div class="spacer" aria-hidden="true" style="height:30px"></div>
<div class="centertext">
<button type="button" class="videocontrols" id="buttonRecord" style="display:none" onclick="recordButton()">
<img id="buttonRecordIcon" src="{{ url_for('static', filename='icons/record-icon.png')}}" alt="Camera Icon">
</button>
<button type="button" class="videocontrols" id="buttonDelete" style="display:none" disabled
onclick="deleteButton()">
<img id="buttonDeleteIcon" src="{{ url_for('static', filename='icons/trash-icon.png')}}" alt="Delete Icon"
class="buttondisable">
</button>
</div>
<div class="spacer" aria-hidden="true" style="height:15px"></div>
<div class="centertext">
<video autoplay muted playsinline id="videoDisplay"></video>
</div>
<script>
const buttonCamera = document.getElementById('buttonCamera');
const buttonRecord = document.getElementById('buttonRecord');
const buttonDelete = document.getElementById('buttonDelete');
const videoDisplay = document.getElementById('videoDisplay');
const buttonCameraIcon = document.getElementById('buttonCameraIcon');
const buttonRecordIcon = document.getElementById('buttonRecordIcon');
//const buttonDeleteIcon = document.getElementById('buttonDeleteIcon');
var mediaRecorder = null;
var stream = null;
let recordedVideoBlob = null;
let isRecording = false;
let videoAccess = false;
async function cameraButton() {
if (!videoAccess) { //test what happens if user doesnt give the permission
console.log("cameraButton case videoAccess = false");
// maybe a try catch block?
try {
stream = await navigator.mediaDevices.getUserMedia({
video: true,
});
} catch (error) {
//TODO when this occurs the user should get a hint to reload the page or to allow it next to the url
newerror = error
console.log("Error: ", error);
return
}
console.log("stream is active");
videoAccess = true
videoDisplay.srcObject = stream
buttonCameraIcon.src = "{{ url_for('static', filename='icons/camera-off-icon.png') }}"; //todo, not sure if this works
buttonCameraIcon.alt = "Camera-off Icon";
buttonRecord.style.display = 'inline-block';
buttonDelete.style.display = 'inline-block';
videoDisplay.style.display = 'inline-block';
mediaRecorder = new MediaRecorder(stream, {
mimeType: "video/webm", //could use other video format: https://www.iana.org/assignments/media-types/media-types.xhtml#video
// I probably want to change the bitrate: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
});
} else {
console.log("cameraButton case videoAccess = true");
stream = null;
videoAccess = false
buttonCameraIcon.src = "{{ url_for('static', filename='icons/camera-icon.png') }}"; //todo, not sure if this works
buttonCameraIcon.alt = "Camera Icon";
buttonRecord.style.display = 'none';
buttonDelete.style.display = 'none';
videoDisplay.style.display = 'none';
}
console.log("camera button function ends");
}
mediaRecorder.addEventListener("dataavailable", (event) => {
videoRecorded.src = URL.createObjectURL(event.data);
recordedVideoBlob = event.data;
});
function recordButton() {
console.log("recordButton pressed");
if (!isRecording) {
console.log("recordButton pressed case isRecording = false");
deleteButton();
buttonDelete.setAttribute("disabled", "");
buttonDeleteIcon.classList.add("buttondisable");
mediaRecorder.start();
buttonRecordIcon.src = "{{ url_for('static', filename='icons/stop-icon.png') }}";
buttonRecordIcon.alt = 'record icon';
isRecording = true;
console.log('Recording started');
} else {
console.log("recordButton pressed case isRecording = true");
mediaRecorder.stop();
buttonRecordIcon.src = "{{ url_for('static', filename='icons/record-icon.png') }}";
buttonRecordIcon.alt = 'Stop Icon';
isRecording = false;
console.log('Recording stopped');
buttonDelete.removeAttribute("disabled");
buttonDeleteIcon.classList.remove("buttondisable");
}
}
function deleteButton() {
//todo delete data
buttonDelete.setAttribute("disabled", "");
buttonDeleteIcon.classList.add("buttondisable");
}
</script>
</div>
</body>
</html>

2
slaeforms/templates/popuptest.html
View File

@ -39,7 +39,7 @@
If you have further questions, please send an email to testemail@notarealemail.deee
</p>
</div>
<form class="dsgvoform" action="http://localhost:5000/start" method="post">
<form class="dsgvoform" action="{{ url_for('startpage') }}" method="post">
<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
</label>

2
slaeforms/templates/standard_template.html
View File

@ -123,7 +123,7 @@ step={{question["step"]}}
<p>Error: Block {{ stimulus["type"] }} could not be loaded!</p>
{% endif %}
<form class="formlayout" id="question_form" action="http://localhost:5000/send" method="post">
<form class="formlayout" id="question_form" action="{{ url_for('sendpage') }}" method="post">
{% for question in questions %}
{% if (questions[question]["type"] == "likert") %}

2
slaeforms/templates/startpage.html
View File

@ -10,7 +10,7 @@
<body>
<div class="container">
<h2>Hello! Thank you for participating in our study!</h2>
<form action="http://localhost:5000/start" method="post">
<form action="{{ url_for('startpage') }}" method="post">
<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>

20
slaeforms/templates/test_page0.html
View File

@ -1,20 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Test Page 0 - Nothing</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
</head>
<body>
<div class="container">
<p>This is just a test page for the single page option of the json configuration, but without something to submit</p>
<form action="http://localhost:5000/send_json" method="post">
<input type="hidden" name="submittedString" value="Hello, backend!">
<input id="submitbutton" type = "submit" value = "submit";/>
</form>
</div>
</body>
</html>

25
slaeforms/templates/test_page1.html
View File

@ -1,25 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!-- styles.css {{ url_for('static', filename='styles.css')}}-->
<title>Test Page 1 - Datenschutzerklaerung</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>
<div class="container">
<p>This is just a test page for the single page option of the json configuration</p>
<form action="http://localhost:5000/send_json" method="post">
<input
type="checkbox"
id="accepted"
name="accepted"
value="checked" />
<label for="accepted">Akzeptieren sie die Datenschutzerklaerung</label>
<p><input id="submitbutton" type = "submit" value = "submit";/></p>
</form>
</div>
</body>
</html>

2
slaeforms/templates/teststartpage.html
View File

@ -32,7 +32,7 @@
</p>
</div>
<form class="dsgvoform" action="http://localhost:5000/start" method="post">
<form class="dsgvoform" action="{{ url_for('startpage') }}" method="post">
<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
</label>