From b8f0382e63dbceb556162544c8e1b0d960654f78 Mon Sep 17 00:00:00 2001
From: mrschnei <mrschnei@umich.edu>
Date: Wed, 22 Jul 2020 18:49:47 -0400
Subject: [PATCH] Updated UI for mask, tutor, blood, and food drive pages
---
servicePoints/templates/blood.html | 83 +++++++++++++++++++++++++-
servicePoints/templates/food.html | 75 +++++++++++++++++++++++-
servicePoints/templates/mask.html | 93 +++++++++++++++++++++++-------
servicePoints/templates/tutor.html | 85 ++++++++++++++++++++++-----
servicePoints/views/accounts.py | 33 +++++++++--
5 files changed, 328 insertions(+), 41 deletions(-)
diff --git a/servicePoints/templates/blood.html b/servicePoints/templates/blood.html
index 5a1043e..56597ed 100644
--- a/servicePoints/templates/blood.html
+++ b/servicePoints/templates/blood.html
@@ -4,10 +4,89 @@
<link rel="stylesheet" type="text/css" href="/css/style.css">
<title>Blood Drives</title>
- <a href="/">Home</a>
+ <style>
+ .topnav {
+ background-color: #333;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ }
+
+ .topnav button:hover {
+ background: rgba(0,0,0,0.2);
+ }
+
+ main {
+ margin-top: 75px;
+ }
+
+ .topitem {
+ color: #f2f2f2;
+ float: left;
+ display: block;
+ font-size: 16px;
+ padding: 14px 16px;
+ }
+
+
+ .topmenu {
+ font-size: 16px;
+ padding: 14px 16px;
+ position: relative;
+ display: inline-block;
+ float: right;
+ }
+
+ .topmenu a {
+ color: #f2f2f2;
+ }
+
+ .listing {
+ float: left;
+ display: block;
+ padding: 14px 16px;
+ margin: 10px;
+ border-radius: 7px;
+ border: 3px solid black;
+ }
+ </style>
+
+
</head>
<body>
- <h1 style="text-align:center">Blood Drives</h1>
+
+ <div class="topnav">
+ <div class="topitem">
+ Username: {{username}}
+ </div>
+ <div class="topitem">
+ Organization: {{org}}
+ </div>
+ <div class="topitem">
+ Hours: {{hours}}
+ </div>
+ <div class="topmenu">
+ <a href="/">Home</a>
+ </div>
+ <div class="topmenu">
+ <a href="https://www.redcross.org/give-blood.html">Red Cross</a>
+ </div>
+ </div>
+
+ <main>
+ <h1 style="text-align:center">Blood Drives</h1>
+
+ <div class="listing">
+ Ann Arbor Blood Donation Center <br />
+ Location: 4624 Packard Rd Ann Arbor, MI 48108 <br />
+ Times: 07/22/2020 : 11:00 AM - 07:15 PM <br />
+ <a href="">Link to Blood Drive</a>
+ </div>
+
+ <div class="listing">
+ Blood Drive 2 <br /> Location: Grand Rapids <br /> Link: <a href="">Link to Blood Drive</a>
+ </div>
+ </main>
</body>
diff --git a/servicePoints/templates/food.html b/servicePoints/templates/food.html
index e2033c4..a15560a 100644
--- a/servicePoints/templates/food.html
+++ b/servicePoints/templates/food.html
@@ -4,10 +4,81 @@
<link rel="stylesheet" type="text/css" href="/css/style.css">
<title>Food Drives</title>
- <a href="/">Home</a>
+ <style>
+ .topnav {
+ background-color: #333;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ }
+
+ .topnav button:hover {
+ background: rgba(0,0,0,0.2);
+ }
+
+ main {
+ margin-top: 75px;
+ }
+
+ .topitem {
+ color: #f2f2f2;
+ float: left;
+ display: block;
+ font-size: 16px;
+ padding: 14px 16px;
+ }
+
+ .topmenu {
+ font-size: 16px;
+ padding: 14px 16px;
+ position: relative;
+ display: inline-block;
+ float: right;
+ }
+
+ .topmenu a {
+ color: #f2f2f2;
+ }
+
+ .listing {
+ float: left;
+ display: block;
+ padding: 14px 16px;
+ margin: 10px;
+ border-radius: 7px;
+ border: 3px solid black;
+ }
+ </style>
</head>
<body>
- <h1 style="text-align:center">Food Drives</h1>
+
+ <div class="topnav">
+ <div class="topitem">
+ Username: {{username}}
+ </div>
+ <div class="topitem">
+ Organization: {{org}}
+ </div>
+ <div class="topitem">
+ Hours: {{hours}}
+ </div>
+ <div class="topmenu">
+ <a href="/">Home</a>
+ </div>
+ </div>
+
+
+ <main>
+ <h1 style="text-align:center">Food Drives</h1>
+
+ <div class="listing">
+ Food Drive 1 <br /> Location: Ann Arbor <br /> Link: <a href="">Food Drive Information</a>
+ </div>
+
+ <div class="listing">
+ Food Drive 2 <br /> Location: Detroit <br /> Link: <a href="">Food Drive Information</a>
+ </div>
+ </main>
diff --git a/servicePoints/templates/mask.html b/servicePoints/templates/mask.html
index c36506c..64a7548 100644
--- a/servicePoints/templates/mask.html
+++ b/servicePoints/templates/mask.html
@@ -14,32 +14,85 @@
padding: 10px;
}
- </style>
+ .topnav {
+ background-color: #333;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ }
+
+ .topnav button:hover {
+ background: rgba(0,0,0,0.2);
+ }
+
+ main {
+ margin-top: 75px;
+ }
+
+ .topitem {
+ color: #f2f2f2;
+ float: left;
+ display: block;
+ font-size: 16px;
+ padding: 14px 16px;
+ }
+
+ .topmenu {
+ font-size: 16px;
+ padding: 14px 16px;
+ position: relative;
+ display: inline-block;
+ float: right;
+ }
+
+ .topmenu a {
+ color: #f2f2f2;
+ }
- <a href="/">Home</a>
+ </style>
</head>
<body>
- <h1 style="text-align:center">How to Make and Donate Masks</h1>
-
- <div>
- <div class="column" style="border-right:1px solid;">
- <h2 style="text-align:center">How to Make Masks</h2>
- <p>Linked below is a video tutorial for making masks with simple materials that can be bought cheaply or found around the home.
- </p>
- <div style="text-align:center">
- <iframe width="560" height="315" src="https://www.youtube.com/embed/VgHrnS6n4iA" frameborder="0"
- allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- </div>
+
+ <div class="topnav">
+ <div class="topitem">
+ Username: {{username}}
+ </div>
+ <div class="topitem">
+ Organization: {{org}}
+ </div>
+ <div class="topitem">
+ Hours: {{hours}}
</div>
- <div class="column">
- <h2 style="text-align:center">Where to donate masks</h2>
- <p>Find places can be tricky as the stock in masks rises around the country. Donations can still be useful for organizations or communities
- that might not be able to purchase masks. Places to donate in your local area can be found through some searches on google.</p>
- <p>Some links that might be useful: </p>
- <a href="https://deaconess.com/How-to-make-a-Face-Mask/Mask-Donations?state=Michigan">Deaconess</a>
+ <div class="topmenu">
+ <a href="/">Home</a>
</div>
</div>
-
+ <main>
+ <h1 style="text-align:center">How to Make and Donate Masks</h1>
+
+ <div>
+ <div class="column" style="border-right:1px solid;">
+ <h2 style="text-align:center">How to Make Masks</h2>
+ <p>
+ Linked below is a video tutorial for making masks with simple materials that can be bought cheaply or found around the home.
+ </p>
+ <div style="text-align:center">
+ <iframe width="560" height="315" src="https://www.youtube.com/embed/VgHrnS6n4iA" frameborder="0"
+ allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+ </div>
+ </div>
+ <div class="column">
+ <h2 style="text-align:center">Where to donate masks</h2>
+ <p>
+ Find places can be tricky as the stock in masks rises around the country. Donations can still be useful for organizations or communities
+ that might not be able to purchase masks. Places to donate in your local area can be found through some searches on google.
+ </p>
+ <p>Some links that might be useful: </p>
+ <a href="https://deaconess.com/How-to-make-a-Face-Mask/Mask-Donations?state=Michigan">Deaconess</a>
+ </div>
+ </div>
+ </main>
+
</body>
</html>
diff --git a/servicePoints/templates/tutor.html b/servicePoints/templates/tutor.html
index 158dd1c..7b9b01c 100644
--- a/servicePoints/templates/tutor.html
+++ b/servicePoints/templates/tutor.html
@@ -67,15 +67,70 @@
clear: both;
display: table;
}
+
+ .listing {
+ float: left;
+ display: block;
+ padding: 14px 16px;
+ margin: 10px;
+ border-radius: 7px;
+ border: 3px solid black;
+ }
+
+ .topnav {
+ background-color: #333;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ }
+
+ main {
+ margin-top: 75px;
+ }
+
+ .topitem {
+ color: #f2f2f2;
+ float: left;
+ display: block;
+ font-size: 16px;
+ padding: 14px 16px;
+ }
+
+ .topmenu {
+ font-size: 16px;
+ padding: 14px 16px;
+ position: relative;
+ display: inline-block;
+ float: right;
+ }
+
+ .topmenu a {
+ color: #f2f2f2;
+ }
+
</style>
<body>
- <a href="/">Home</a>
<title>ServicePoints</title>
- <div class="su">
- <button onclick="document.getElementById('id01').style.display='block'" style="width:auto; right: 35px">Sign Up</button>
+
+ <div class="topnav">
+ <div class="topitem">
+ Username: {{username}}
+ </div>
+ <div class="topitem">
+ Organization: {{org}}
+ </div>
+ <div class="topitem">
+ Hours: {{hours}}
+ </div>
+ <div class="topmenu">
+ <button onclick="document.getElementById('id01').style.display='block'" style="width:auto; right: 35px">Sign Up</button>
+ </div>
+ <div class="topmenu">
+ <a href="/">Home</a>
+ </div>
</div>
<div id="id01" class="modal">
@@ -102,18 +157,22 @@
</form>
</div>
- <hr>
+ <main>
+ <h1>Welcome to the Service Points Tutoring page!</h1>
- <h1>Welcome to the Service Points Tutoring page!</h1>
+ <p>Search through our database of current tutors or sign up to have your name and information listed.</p>
- <p>Search through our database of current tutors or sign up to have your name and information listed.</p>
-
- <h3>Name, Subject(s), Time, Email</h3>
- <p>
- {% for tutor, user in zip(tutors, tutorsN) %}
- <p>{{user.fullname}}, {{tutor.subject}}, {{tutor.time}}, {{user.email}}</p>
- {% endfor %}
- </p>
+ <p>
+ {% for tutor, user in zip(tutors, tutorsN) %}
+ <div class="listing">
+ {{user.fullname}}<br />
+ Subjects: {{tutor.subject}}<br />
+ Available Times: {{tutor.time}}<br />
+ Contact Email: {{user.email}}
+ </div>
+ {% endfor %}
+ </p>
+ </main>
</body>
</html>
diff --git a/servicePoints/views/accounts.py b/servicePoints/views/accounts.py
index 85ebb15..34fb0d0 100644
--- a/servicePoints/views/accounts.py
+++ b/servicePoints/views/accounts.py
@@ -331,17 +331,35 @@ def incompleteForm(prev):
@servicePoints.app.route('/accounts/mask/')
def mask():
- context = {}
+ username = flask.session["username"]
+ cursor = servicePoints.model.get_db()
+ studentOrgCur = cursor.execute('SELECT orgName, hours FROM users WHERE '
+ 'username =:who',
+ {"who": username})
+ results = studentOrgCur.fetchone()
+ context = {'username': username, 'org': results["orgName"], 'hours': results["hours"]}
return render_template('mask.html', **context)
@servicePoints.app.route('/accounts/blood/')
def blood():
- context = {}
+ username = flask.session["username"]
+ cursor = servicePoints.model.get_db()
+ studentOrgCur = cursor.execute('SELECT orgName, hours FROM users WHERE '
+ 'username =:who',
+ {"who": username})
+ results = studentOrgCur.fetchone()
+ context = {'username': username, 'org': results["orgName"], 'hours': results["hours"]}
return render_template('blood.html', **context)
@servicePoints.app.route('/accounts/food/')
def food():
- context = {}
+ username = flask.session["username"]
+ cursor = servicePoints.model.get_db()
+ studentOrgCur = cursor.execute('SELECT orgName, hours FROM users WHERE '
+ 'username =:who',
+ {"who": username})
+ results = studentOrgCur.fetchone()
+ context = {'username': username, 'org': results["orgName"], 'hours': results["hours"]}
return render_template('food.html', **context)
@servicePoints.app.route('/accounts/profile/', methods=['GET', 'POST'])
@@ -469,8 +487,15 @@ def tutorsu():
cur2 = cursor.execute('SELECT fullname, email FROM users WHERE username IN (SELECT username FROM tutors)')
tutorsN = cur2.fetchall()
+ username = flask.session["username"]
+ cursor = servicePoints.model.get_db()
+ studentOrgCur = cursor.execute('SELECT orgName, hours FROM users WHERE '
+ 'username =:who',
+ {"who": username})
+ results = studentOrgCur.fetchone()
+
# Add database info to context
- context = {"tutors": tutors, "tutorsN": tutorsN}
+ context = {"tutors": tutors, "tutorsN": tutorsN, 'username': username, 'org': results["orgName"], 'hours': results["hours"]}
return flask.render_template("tutor.html", **context,zip=zip)
@servicePoints.app.route('/accounts/submitPoints/', methods=['GET', 'POST'])
--
GitLab