added dropdown menu (works). added preview functionality (breaks dropdown)....

added dropdown menu (works). added preview functionality (breaks dropdown). added function to export generated event log (download still doesn't work and there's still no generated file)

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,7 +13,7 @@ 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__)
@@ -26,11 +26,26 @@ UPLOAD_FOLDER = 'upload'
 ALLOWED_EXTENSIONS = {'.csv','.xes'}
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 
+#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'
+
 #home page route
 @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'))
+
 """
 The following is the upload functionality. It uploads directly into the "upload" directory.
 It redirects towards the case ID input page.
@@ -44,26 +59,14 @@ def upload_file():
         #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')
-
-#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')
+    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']
@@ -78,23 +81,50 @@ def get_caseid():
     else:
         #else it will redirect to ../recommendation/id
         return redirect(url_for('recommendation',id=caseid))
-        
+"""
 
-#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 displaying possible case IDs. It is a dropdown menu that displays the list from the python script in the dropdown menu.
+"""
+@app.route('/case.html', methods=['GET'])
+def get_caseid():
+    #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')
+    else:
+        preview = os.path.join(app.config['STATIC_FOLDER'],'fish.jpg')    
+    return render_template('case.html',preview = preview)
+
+"""
+Route for after picking the case ID. The selected case ID will be sent back to 
+"""
+@app.route('/case.html',methods=['POST'])
+def post_caseid():
+    selected_caseid=request.form.get('selectresult')
+    return redirect(url_for('recommendation',result=selected_caseid))
 
 """
 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():

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*/
@@ -115,4 +88,63 @@ label {
   text-align: right;
   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,23 @@
 {%endblock%}
 
 {%block body%}
-<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>
-      </form> 
-      <button onclick="window.location.href='result.html'" type="submit" class="button" form="caseid" value="casevalue"> Optimize now!</button>
+<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"  >
+      {% for id in selection %}
+        <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>
+</div>
+
+<img src="{{ preview }}" alt="Placeholder">
+
+<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>
 {%endblock%}
\ No newline at end of file

Frontend/templates/index.html

@@ -25,4 +25,24 @@
     </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>
+  </div>
 {% endblock %}
\ No newline at end of file