Temporary download functionality added. Temporary case preview functionality...

Temporary download functionality added. Temporary case preview functionality added. Some more comments. Cleaned up some of the code

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'))     
+    return redirect(url_for('case_id')) 
     
 """
-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))
+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:
+    previewid = request.args.get("selectpreview")
+    if previewid == '1':
         preview = os.path.join(app.config['STATIC_FOLDER'], 'fish.jpg')
-    else:
+    elif previewid == '2':
         preview = os.path.join(app.config['STATIC_FOLDER'], 'fish.jpg')
-    return render_template('case.html',preview = preview)
+    else:
+        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))
+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)

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>
-  </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>
+        <!--Submit button-->
+        <button type="submit" class="button" form="selectcaseid" value="casevalue"> Optimize now!</button>
       </div>
+  </form>
+
+  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>
+      <!--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

Frontend/templates/index.html

+<!--Here is the home page. It contains the file upload and download functionality-->
 {% extends 'base.html' %}
 
 {% block head %}
@@ -14,12 +15,14 @@
     <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">
+    <!--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>
@@ -27,22 +30,18 @@
   </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>
+    <!--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 onclick="window.location.href='{{ url_for('download',type=type)}}'" type="submit" class="button" form="export" value="type"> Generate </button>
+          <button  type="submit" class="button" form="downloadType" value="exportType"> Generate an event log! </button>
         </div>
+      </form>
   </div>
 {% endblock %}
\ No newline at end of file

Frontend/templates/result.html

@@ -14,7 +14,9 @@
         <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