From db5bbf22c1c5d4132067a9354a966e2f160fbe44 Mon Sep 17 00:00:00 2001
From: GenoJayadi <genojayadi12@gmail.com>
Date: Fri, 30 Jun 2023 22:33:20 +0200
Subject: [PATCH] Temporary download functionality added. Temporary case
preview functionality added. Some more comments. Cleaned up some of the code
---
Frontend/main.py | 102 ++++++++++++++++-----------------
Frontend/templates/case.html | 36 +++++++++---
Frontend/templates/index.html | 51 ++++++++---------
Frontend/templates/result.html | 12 ++--
4 files changed, 107 insertions(+), 94 deletions(-)
diff --git a/Frontend/main.py b/Frontend/main.py
index b7c18a8..8625127 100644
--- a/Frontend/main.py
+++ b/Frontend/main.py
@@ -18,7 +18,7 @@ import input, eventlog
#define the app
app = Flask(__name__)
-#the super secret key that allows browser based flashes :)
+#the super secret key that allows browser based flashes :
app.secret_key = '54321'
#specifies where the upload directory is and the file type available for uploads
@@ -32,85 +32,78 @@ app.config['STATIC_FOLDER'] = STATIC_FOLDER
#specifices where the temporary folder for downloaded file would be:
DOWNLOAD_FOLDER = 'upload'
+app.config['DOWNLOAD_FOLDER'] = DOWNLOAD_FOLDER
-#home page route
+#home page route. The type inputs are just for the list selection.
@app.route('/')
def index():
- return render_template('index.html')
-
-@app.route('/', methods=['GET'])
-def download(type):
- if type == "csv":
- path = 'upload/Activity_Table.csv'
- return send_file(path, as_attachment=True)
- else:
- return redirect(url_for('index'))
+ types = ['csv','xes']
+ return render_template('index.html',fileTypes = types)
"""
The following is the upload functionality. It uploads directly into the "upload" directory.
-It redirects towards the case ID input page.
+Then it redirects towards the case ID input page.
"""
@app.route('/', methods=['POST'])
def upload_file():
uploaded_file = request.files['file']
if uploaded_file.filename != '':
+ #file is saved in the 'upload' directory.
uploaded_file.save(os.path.join(app.config['UPLOAD_FOLDER'],uploaded_file.filename))
elif uploaded_file.filename == '':
#if no file has been selected, flashes a warning
flash('No files selected! Please select a file!')
return redirect(url_for('index'))
- return redirect(url_for('get_caseid'))
-
-"""
-Route for inputting case ID. For now it redirects towards "recommendation" alongside "id".
-This is the old one using just pure text input. Refer to the one below for the version with dropdown menu.
-"""
-"""
-
-@app.route('/case.html', methods=['POST'])
-def get_caseid():
- caseid = request.form['caseId']
- if caseid == '':
- #if no caseID has been inputted, flashes a warning.
- flash('Please input a case ID!')
- return redirect(url_for('case'))
- elif not caseid.isdigit():
- #if the input is not an integer, flashes a warning.
- flash('Please input an integer!')
- return redirect(url_for('case'))
- else:
- #else it will redirect to ../recommendation/id
- return redirect(url_for('recommendation',id=caseid))
-"""
+ return redirect(url_for('case_id'))
+
+"""
+The download usage. Currently just downloads fish.jpg.
+os.path.join here is setup to point towards static folder and also point at fish.jpg.
+Currently it just sends a preexisting file. Meaning the generated file will have to be saved somewhere to import.
+"""
+@app.route('/download/', methods=['GET'])
+def download():
+ filetype = request.args.get("selectType")
+ if filetype == 'csv':
+ path = os.path.join(app.config['STATIC_FOLDER'], 'fish.jpg')
+ #flash the confirmation that file is succesfully downloaded
+ flash('Generated a event log in csv. Please check your attachments!')
+ return send_file(path, as_attachment=True)
+ elif filetype == 'xes':
+ path = os.path.join(app.config['STATIC_FOLDER'], 'fish.jpg')
+ #flash the confirmation that file is succesfully downloaded
+ flash('Generated a event log in xes. Please check your attachments!')
+ return send_file(path, as_attachment=True)
"""
Route for displaying possible case IDs. It is a dropdown menu that displays the list from the python script in the dropdown menu.
+There is a preview functionality, when clicked will show a preview of a generated image. It is linked to the 'preview' button in the case id page.
+The generated image currently displays static images and not instantly generated ones from the backend.
+Currently it displays moyai.jpg by default and fish.jpg on case 1 and 2. Will change this later.
"""
@app.route('/case.html', methods=['GET'])
-def get_caseid():
+def case_id():
#temporary choice of cases until I figure out where the actual function from backend is.
#give the list here in selection using functions from
- selection = [1,2,3,4,5]
- return render_template('case.html',selection=selection)
-
-@app.route('/case.html', methods=['POST'])
-def display_preview():
- #temporary preview, only works for case id 1 and 2
- if id == 1:
- preview = os.path.join(app.config['STATIC_FOLDER'], 'moyai.jpg')
- if id == 2:
- preview = os.path.join(app.config['STATIC_FOLDER'],'fish.jpg')
+ selection = [1,2,3,4,5]
+ previewid = request.args.get("selectpreview")
+ if previewid == '1':
+ preview = os.path.join(app.config['STATIC_FOLDER'], 'fish.jpg')
+ elif previewid == '2':
+ preview = os.path.join(app.config['STATIC_FOLDER'], 'fish.jpg')
else:
- preview = os.path.join(app.config['STATIC_FOLDER'],'fish.jpg')
- return render_template('case.html',preview = preview)
-
+ preview = os.path.join(app.config['STATIC_FOLDER'], 'moyai.jpg')
+
+ return render_template('case.html', selection=selection, preview=preview)
+
"""
-Route for after picking the case ID. The selected case ID will be sent back to
+Route for sending the case id towards recommendation. This is linked to the 'Optimize now' button in the case ID page.
+I have decided to use a separate dropdown list to avoid cross sending the http requests by accident.
"""
-@app.route('/case.html',methods=['POST'])
-def post_caseid():
- selected_caseid=request.form.get('selectresult')
- return redirect(url_for('recommendation',result=selected_caseid))
+@app.route('/case.html', methods=['POST'])
+def send_caseid():
+ result = request.form.get("selectresult")
+ return redirect(url_for('recommendation', result=result))
"""
The result page.
@@ -135,6 +128,7 @@ def loading():
def aboutus():
return render_template('aboutus.html')
+#the main app
if __name__ == "__main__":
port = int(os.environ.get('PORT', 5000))
app.run(debug=True, host='0.0.0.0', port=port)
diff --git a/Frontend/templates/case.html b/Frontend/templates/case.html
index 0dc76bd..bbc9db6 100644
--- a/Frontend/templates/case.html
+++ b/Frontend/templates/case.html
@@ -9,22 +9,40 @@
{%block body%}
<div style="text-align: center;" class="custom-select">
- <form id="selectcaseid" method='POST' name="selectresult">
- <select name=selectresult id="selectcaseid" method='GET' action="{{ url_for('get_caseid') }} form="selectcaseid" >
+ <!--This is the form for directly sending case ID to be processed by the agent.-->
+ <form action="{{ url_for('send_caseid') }}" id="selectcaseid" method="post" name="selectresult">
+ <select name="selectresult" id="selectcaseid" method="get" action="{{ url_for('case_id') }} form="selectcaseid" >
{% for id in selection %}
+ <!--case dropdown menu-->
<option value= "{{id}}"> {{id}} </option>
{% endfor %}
</select>
+
+ <div style = "text-align: center;">
+ <!--Submit button-->
+ <button type="submit" class="button" form="selectcaseid" value="casevalue"> Optimize now!</button>
+ </div>
</form>
-</div>
-<div style = "text-align: center;">
- <button onclick="window.location.href='{{ url_for('display_preview',id=casevalue)}}'" type="submit" class="button" form="selectcaseid" value="casevalue"> Preview</button>
-</div>
+ Preview it before optimizing!
+ <!--The preview functionality. The dropdown menu is separate to avoid mixing the http requests between both button because I have skill issue and am incapable of coding this cleanly.-->
+ <form action="{{ url_for('case_id') }}" id="previewCase" method="get" name="previewCase">
+ <select name="selectpreview" id="selectcaseid" method="get" action="{{ url_for('case_id') }} form="selectcaseid">
+ {% for id in selection %}
+ <!--Dropdown selection-->
+ <option value= "{{id}}"> {{id}} </option>
+ {% endfor %}
+ </select>
-<img src="{{ preview }}" alt="Placeholder">
+ <div style = "text-align: center;">
+ <!--The preview image-->
+ <img src="{{ preview }}">
+ </div>
-<div style = "text-align: center;">
- <button onclick="window.location.href='{{ url_for('recommendation',result=casevalue)}}'" type="submit" class="button" form="selectcaseid" value="casevalue"> Optimize now!</button>
+ <div style = "text-align: center;">
+ <!--The preview button-->
+ <button type="submit" class="button" form="previewCase" value="casevalue"> Preview this case! </button>
+ </div>
+ </form>
</div>
{%endblock%}
\ No newline at end of file
diff --git a/Frontend/templates/index.html b/Frontend/templates/index.html
index 4eab6ab..e485bc2 100644
--- a/Frontend/templates/index.html
+++ b/Frontend/templates/index.html
@@ -1,3 +1,4 @@
+<!--Here is the home page. It contains the file upload and download functionality-->
{% extends 'base.html' %}
{% block head %}
@@ -11,38 +12,36 @@
</header>
<div style="text-align: center; padding-top: 50 px;">
- <h1 class="introductions">Introduction</h1>
- <h2 class="desc">OPTIS is a standalone Python based web application which aims to minimize time and cost requirements of busines processes. <br> It seeks to achieve this by using an intelligent agent that is trained using reinforcement learning techniques.</h2>
- <h3>Here is a short introduction video on our app that explains how the app works!</h3>
- <iframe width="560" height="315" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
+ <h1 class="introductions">Introduction</h1>
+ <h2 class="desc">OPTIS is a standalone Python based web application which aims to minimize time and cost requirements of busines processes. <br> It seeks to achieve this by using an intelligent agent that is trained using reinforcement learning techniques.</h2>
+ <h3>Here is a short introduction video on our app that explains how the app works!</h3>
+ <!-- This would be the introduction video. Will most likely be replaced with just the user manual???-->
+ <iframe width="560" height="315" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align: center;">
<h1>Upload your files and get started now!</h1>
- <form action="" method="POST" enctype="multipart/form-data">
- <p><input type="file" name="file" accept=".xes,.csv"></p>
- <p><input type="submit" value="submit" class="button"></p>
- </form>
- <h2 style="font-size: 14px">please input only .xes and .csv files. please!</h2>
+ <!--This is the upload functionality. It automatically already filters for xes and csv file. However, a warning is added nonetheless for user experience.-->
+ <form action="{{ url_for('upload_file') }}" method="POST" enctype="multipart/form-data" name="upload">
+ <p><input type="file" name="file" accept=".xes,.csv"></p>
+ <p><input type="submit" value="submit" class="button"></p>
+ </form>
+ <h2 style="font-size: 14px">please input only .xes and .csv files. please!</h2>
</div>
<div style="text-align: center;">
- <h1> Or generate your own event log to try out the functionality! </h1>
- <form action="/" method='GET' name="export" id="export">
- <div>
- <input type="radio" id="csv" name="type" value="csv"
- checked>
- <label for="csv">Download as .csv</label>
- </div>
-
- <div>
- <input type="radio" id="xes" name="type" value="xes">
- <label for="xes">Download as .xes</label>
- </div>
- </form>
-
- <div style = "text-align: center;">
- <button onclick="window.location.href='{{ url_for('download',type=type)}}'" type="submit" class="button" form="export" value="type"> Generate </button>
- </div>
+ <!--The generate and download functionality. While it is just planned to only be xes and csv files. The type selection is dynamnic and can be changed from main.py-->
+ <h1> Or generate your own event log to immediately try out the app! </h1>
+ <form action="{{ url_for('download') }}" method="get" name="downloadType" id="downloadType">
+ <select name="selectType" id="fileType" method="get" action="{{ url_for('download') }} form="downloadType">
+ {% for type in fileTypes %}
+ <option value= "{{type}}"> import as .{{type}} </option>
+ {% endfor %}
+ </select>
+
+ <div style = "text-align: center;">
+ <button type="submit" class="button" form="downloadType" value="exportType"> Generate an event log! </button>
+ </div>
+ </form>
</div>
{% endblock %}
\ No newline at end of file
diff --git a/Frontend/templates/result.html b/Frontend/templates/result.html
index a163a4c..3e0893e 100644
--- a/Frontend/templates/result.html
+++ b/Frontend/templates/result.html
@@ -11,10 +11,12 @@
{%block body%}
<div style="text-align: center;">
<h1>Here are the results of the optimization!</h1>
- <h2>We recommend you to do the following activity for this specific case:</h2>
- <!--res is the result-->
- <h3>Placeholder result: {{ res }}</h3>
- <img src="{{url_for('static',filename='moyai.jpg')}}" alt="Placeholder"> <br>
- <button onclick="window.location.href='/'" class="button"> Optimize your next case NOW!</button>
+ <h2>We recommend you to do the following activity for this specific case:</h2>
+ <!--res is the result-->
+ <h3>Placeholder result: {{ res }}</h3>
+ <!-- currently a placeholder image to display result-->
+ <img src="{{url_for('static',filename='moyai.jpg')}}" alt="Placeholder"> <br>
+ <!--button to go back to home page-->
+ <button onclick="window.location.href='/'" class="button"> Optimize your next case NOW!</button>
</div>
{%endblock%}
\ No newline at end of file
--
GitLab