Skip to content
Snippets Groups Projects
Commit 528e7d85 authored by Nour's avatar Nour
Browse files

Merge remote-tracking branch 'origin/geno2' into nour

parents e7a2b1a2 fd662283
No related branches found
No related tags found
No related merge requests found
"""
The main app. This handles both the backend and the frontend side.
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 datetime import datetime
from werkzeug.utils import secure_filename
import time, os
import os, time, sys
"""
The following are the import for the backend. Just write the name of the script without .py.
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
#define the app
app = Flask(__name__)
#the secret key :)
SECRET_KEY = '12345'
#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
UPLOAD_FOLDER = '/upload'
UPLOAD_FOLDER = 'upload'
ALLOWED_EXTENSIONS = {'.csv','.xes'}
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
......@@ -19,23 +31,27 @@ app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
def index():
return render_template('index.html')
#the upload functionality. It then redirects to the case labeling page
"""
The following is the upload functionality. It uploads directly into the "upload" directory.
It redirects towards the case ID input page.
"""
@app.route('/', methods=['POST'])
def upload_file():
uploaded_file = request.files['file']
if uploaded_file.filename != '':
uploaded_file.save(uploaded_file.filename)
uploaded_file.save(os.path.join(app.config['UPLOAD_FOLDER'],uploaded_file.filename))
elif uploaded_file.filename == '':
flash('no files selected')
#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
#login page route. eventually will be removed
@app.route('/login.html')
def login():
return render_template('login.html')
#signup page route
#signup page route. eventually will be removed
@app.route('/signup.html')
def signup():
return render_template('signup.html')
......@@ -45,21 +61,50 @@ def signup():
def case():
return render_template('case.html')
#eventually to input the case ID selection, for now it does nothing
@app.route('/case.html', methods=['GET'])
def input_caseid():
return render_template('case.html')
"""
Route for inputting case ID. For now it redirects towards "recommendation" alongside "id".
"""
@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))
#result page route
#placeholder result page route. Will eventually be removed and is now defunct.
@app.route('/result.html')
def result():
return render_template('result.html')
"""
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)
return render_template('result.html',res=res)
#loading page route
@app.route('/loading.html')
def loading():
return render_template('loading.html')
#about us page route
@app.route('/aboutus.html')
def aboutus():
return render_template('aboutus.html')
if __name__ == "__main__":
port = int(os.environ.get('PORT', 5000))
app.run(debug=True, host='0.0.0.0', port=port)
......
......@@ -5,13 +5,18 @@
/*the body*/
body {
margin: 0;
background-color:rgb(233, 240, 254);
background-color:rgb(230,241,250);
}
/* description*/
.desc {
font-family: "Times New Roman";
font-size: 15px;
margin: 0;
}
.introductions h1{
margin:0px;
}
/*.container {
......@@ -43,7 +48,7 @@ body {
/* Add a black background color to the top navigation */
.topnav {
background-color:lightslategrey;
background-color:rgb(0,114,188);
overflow: hidden;
}
......@@ -75,9 +80,13 @@ body {
border: 0;
}
.h1 {
margin:0
}
/* Simple Button Style*/
.button {
background-color:rgb(9, 18, 146); /* Green */
background-color:rgb(0,114,188) ; /* Green */
border: none;
color: whitesmoke;
padding: 15px 32px;
......@@ -85,6 +94,8 @@ body {
text-decoration: none;
display: inline-block;
font-size: 16px;
margin:25px;
border-radius:8px;
}
/* styling for text*/
......@@ -99,3 +110,9 @@ input[type=text] {
label {
margin: 15px 12px;
}
.warning {
text-align: right;
color: red;
font-size: large;
}
\ No newline at end of file
{% extends 'base.html' %}
{% block head %}
<title>About us</title>
{% endblock %}
{% block body %}
<div style='text-align:center'>
<h1>This is a project from the Chair of Process and Data Science from RWTH Aachen University</h1>
<img src="{{url_for('static',filename='moyai.jpg')}}" alt="Placeholder"> <br>
<h2>by: Ahmad Mannoun, Aleksandra Dimitrova, Geno Jayadi, Paula Hermenau </h2>
</div>
{% endblock %}
\ No newline at end of file
<!--
The base of the website. Includes: Navigation bar, warning flash, and also the head of the site.
-->
<!DOCTYPE html>
<html lang="en">
<head>
......@@ -22,11 +25,26 @@
<noscript>Please enable javascript to use the app.</noscript>
<div class="topnav">
<a href="/">Home</a>
<a href="#about">About Us</a>
<a href="aboutus.html">About Us</a>
<!--
<a href="login.html" class="right" style="float:right"> Login </a>
<a href="signup.html" class="right" style="float:right"> Sign Up </a>
-->
</div>
{% endblock %}
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<div style="text-align:center">
<a class="warning">{{ message }}</a>
</div>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
{% block body %}
{% endblock %}
......
<!--
Here is the case ID input page. Really straightforward as it is just one form and one input.
-->
{% extends 'base.html' %}
{%block head%}
......@@ -7,10 +10,10 @@
{%block body%}
<div style="text-align: center;">
<h1>Choose the case you want to optimize</h1>
<form>
<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"><br>
<input type="text" id="caseId" name="caseId" type="number"><br>
</form>
<button onclick="window.location.href='result.html'" class="button"> Optimize now!</button>
<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
......@@ -10,8 +10,8 @@
<h2 >OPTIS is an app that aims to give you the best possible recommendations for your business processes!</h2>
</header>
<div style="text-align: center; padding-top: 150px;">
<h1>Introduction</h1>
<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>
......
<!--
The result. For now it outputs a placeholder image moyai.jpg.
"res" is the result specified by the Flask app. Use that to print out the result in the bracket.
-->
{% extends 'base.html' %}
{%block head%}
......@@ -8,7 +12,8 @@
<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>
<h3>Placeholder</h3>
<!--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>
</div>
......
Source diff could not be displayed: it is too large. Options to address this: view the blob.
Source diff could not be displayed: it is too large. Options to address this: view the blob.
Source diff could not be displayed: it is too large. Options to address this: view the blob.
File added
File added
import pandas as pd
"""
Pretend this is the backend. It simply just return it's input.
"""
#placeholder function as an example for the backend
def foo(input):
return input + " has been processed by the backend"
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment