cache

Frontend/main.py

@@ -4,7 +4,7 @@ render_template just renders the html from the "template" folder.
 redirect_url redirects towards a certain url, but does NOT render a template if the pointed url also does not.
 
 """
-from flask import Flask, render_template, url_for, request, redirect, flash
+from flask import Flask, render_template, url_for, request, redirect, flash, send_file, send_from_directory
 from datetime import datetime
 from werkzeug.utils import secure_filename
 import os, time, sys
@@ -13,12 +13,12 @@ The following are the import for the backend. Just write the name of the script
 Then you can immediately use the function from the script directly in the app.
 """
 sys.path.append(os.path.join(os.path.dirname(sys.path[0]),'backend'))
-import input
+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
@@ -26,75 +26,98 @@ UPLOAD_FOLDER = 'upload'
 ALLOWED_EXTENSIONS = {'.csv','.xes'}
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 
-#home page route
+#specifies the static folder used for images and stuff
+STATIC_FOLDER = 'static'
+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. The type inputs are just for the list selection.
 @app.route('/')
 def index():
-    return render_template('index.html')
+    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('case'))     
-
-#login page route. eventually will be removed
-@app.route('/login.html')
-def login():
-    return render_template('login.html')
+    return redirect(url_for('case_id')) 
     
-#signup page route. eventually will be removed
-@app.route('/signup.html')
-def signup():
-    return render_template('signup.html')
-
-#case selection page route
-@app.route('/case.html')
-def case():
-    return render_template('case.html')
+"""
+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 inputting case ID. For now it redirects towards "recommendation" alongside "id".
+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=['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'))
+@app.route('/case.html', methods=['GET'])
+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]
+    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:
-        #else it will redirect to ../recommendation/id
-        return redirect(url_for('recommendation',id=caseid))
+        preview = os.path.join(app.config['STATIC_FOLDER'], 'moyai.jpg') 
     
+    return render_template('case.html', selection=selection, preview=preview)
     
-#placeholder result page route. Will eventually be removed and is now defunct.
-@app.route('/result.html')
-def result():
-    return render_template('result.html')
+"""
+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 send_caseid():
+    result = request.form.get("selectresult")
+    return redirect(url_for('recommendation', result=result))
 
 """
 The result page. 
 It processes "id" (for now it uses the "foo" function from input.py) using backend functions
 and prints out the result immediately in the page.
 """
-@app.route('/result.html/<id>', methods=['GET'])
-def recommendation(id):
-    res = input.foo(id)
+@app.route('/result.html/<result>', methods=['GET'])
+def recommendation(result):
+    res = input.foo(result)
     return render_template('result.html',res=res)
 
+"""
+Loading page. Has yet to be used.
+"""
 #loading page route
 @app.route('/loading.html')
 def loading():
@@ -105,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/static/styles.css

@@ -19,33 +19,6 @@ body {
   margin:0px;
 }
 
-/*.container {
-  margin: 1rem;
-  text-align: center;
-}
-
-.site-title {
-  font-size: 2rem;
-}*
-
-/* aleks' navbar 
-.nav {
-  background-color: #333;
-  color: white;
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-  gap: 2rem;
-  padding: 0 1rem;
-}
-
-/* aleks' div 
-.myDiv {
-  border: 5px outset red;
-  background-color: lightblue;
-  text-align: center;
-}*/
-
 /* Add a black background color to the top navigation */
 .topnav {
   background-color:rgb(0,114,188);
@@ -92,10 +65,10 @@ body {
   padding: 15px 32px;
   text-align: center;
   text-decoration: none;
-  display: inline-block;
   font-size: 16px;
   margin:25px;
   border-radius:8px;
+  display:inline-block;
 }
 
 /* styling for text*/
@@ -116,3 +89,62 @@ label {
   color: red;
   font-size: large;
 }
+
+.custom-select {
+  position: relative;
+  font-family: Arial;
+}
+
+.custom-select select {
+  display: inline-block; /*hide original SELECT element: */
+}
+
+.select-selected {
+  background-color: DodgerBlue;
+}
+
+/* Style the arrow inside the select element: */
+.select-selected:after {
+  position: absolute;
+  content: "";
+  top: 14px;
+  right: 10px;
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-color: #fff transparent transparent transparent;
+}
+
+/* Point the arrow upwards when the select box is open (active): */
+.select-selected.select-arrow-active:after {
+  border-color: transparent transparent #fff transparent;
+  top: 7px;
+}
+
+/* style the items (options), including the selected item: */
+.select-items div,.select-selected {
+  color: #ffffff;
+  padding: 8px 16px;
+  border: 1px solid transparent;
+  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
+  cursor: pointer;
+}
+
+/* Style items (options): */
+.select-items {
+  position: absolute;
+  background-color: DodgerBlue;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 99;
+}
+
+/* Hide the items when the select box is closed: */
+.select-hide {
+  display: none;
+}
+
+.select-items div:hover, .same-as-selected {
+  background-color: rgba(0, 0, 0, 0.1);
+}
\ No newline at end of file

Frontend/templates/case.html

@@ -8,12 +8,41 @@
 {%endblock%}
 
 {%block body%}
+<div style="text-align: center;" class="custom-select">
+  <!--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>
+
+  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>
+
       <div style = "text-align: center;">
-    <h1>Choose the case you want to optimize</h1>
-    <form method="post" id="caseid" action="{{ url_for('case')}}">
-        <label for="caseId"> Please enter the case ID:</label><br>
-        <input type="text" id="caseId" name="caseId" type="number"><br>
+        <!--The preview image-->
+        <img src="{{ preview }}">
+      </div>
+
+    <div style = "text-align: center;">
+      <!--The preview button-->
+      <button type="submit" class="button" form="previewCase" value="casevalue"> Preview this case! </button>
+    </div>
   </form>
-      <button onclick="window.location.href='result.html'" type="submit" class="button" form="caseid" value="casevalue"> Optimize now!</button>
 </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,15 +15,33 @@
     <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>
       <h2 style="font-size: 14px">please input only .xes and .csv files. please!</h2>
   </div>
+
+  <div style="text-align: center;">
+    <!--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

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