diff --git a/Frontend/main.py b/Frontend/main.py index 3534a44e9599f2e48ab920272c4d675670b17889..b7c18a8fd1ac69e4425c9634689761d07cab4402 100644 --- a/Frontend/main.py +++ b/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(): diff --git a/Frontend/static/fish.jpg b/Frontend/static/fish.jpg new file mode 100644 index 0000000000000000000000000000000000000000..98ab695e02ae4e1d09495ba2144ec8122cb2ac35 Binary files /dev/null and b/Frontend/static/fish.jpg differ diff --git a/Frontend/static/styles.css b/Frontend/static/styles.css index 7b0e469d967a48b82a0e59ed67f6e55888e91a09..6ce17f3425160bcab9c608ba2fe51f59120e7d8f 100644 --- a/Frontend/static/styles.css +++ b/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 diff --git a/Frontend/templates/case.html b/Frontend/templates/case.html index 0ce4ce0403826f87af3f8f0cc0e381482ef33797..0dc76bdeb2c28643590a8fa8228bf163e80fb078 100644 --- a/Frontend/templates/case.html +++ b/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 diff --git a/Frontend/templates/index.html b/Frontend/templates/index.html index 596ba7319e15372a47fe6fa5780b367c14a209b0..4eab6ab22cf8bf9ecf3cfcef1c246e71db5c2d84 100644 --- a/Frontend/templates/index.html +++ b/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 diff --git a/backend/__pycache__/agent.cpython-310.pyc b/backend/__pycache__/agent.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..2d69292a176e0bf9864ce0376b131a799fea145d Binary files /dev/null and b/backend/__pycache__/agent.cpython-310.pyc differ diff --git a/backend/__pycache__/environment.cpython-310.pyc b/backend/__pycache__/environment.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..3d05bede9ffa0deaeeaad6066517b51a2637b898 Binary files /dev/null and b/backend/__pycache__/environment.cpython-310.pyc differ diff --git a/backend/__pycache__/input.cpython-310.pyc b/backend/__pycache__/input.cpython-310.pyc index 4fecd126abbcf7a739b97c04e7e39b9094d0788b..5fc77bbb88bf85a946a36cba3fbc42989099cc70 100644 Binary files a/backend/__pycache__/input.cpython-310.pyc and b/backend/__pycache__/input.cpython-310.pyc differ diff --git a/backend/__pycache__/input.cpython-311.pyc b/backend/__pycache__/input.cpython-311.pyc new file mode 100644 index 0000000000000000000000000000000000000000..9bc2fd7b614b6a85f6ce665f69236c62417d1460 Binary files /dev/null and b/backend/__pycache__/input.cpython-311.pyc differ diff --git a/backend/__pycache__/simplesimmodel.cpython-310.pyc b/backend/__pycache__/simplesimmodel.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..c4b2c4a2cc7012f14ec8e0ac1a040c97e6da7186 Binary files /dev/null and b/backend/__pycache__/simplesimmodel.cpython-310.pyc differ