Skip to content
Snippets Groups Projects
Commit a1c10e84 authored by mrschnei's avatar mrschnei
Browse files

Added UI for blood and food pages. Updated UI for home and mask pages. Blood... 

Added UI for blood and food pages. Updated UI for home and mask pages. Blood and Food pages now show database of drives. Create accounts limit length of input
parent 09626897
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 240 additions and 236 deletions
servicePoints/templates/blood.html
+ 90
− 66
View file @ a1c10e84
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<title>Blood Drives</title>
<style>
.topnav {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
.topnav button:hover {
background: rgba(0,0,0,0.2);
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
main {
margin-top: 75px;
}
<title>Blood Drives</title>
.topitem {
color: #f2f2f2;
<style>
.listing {
float: left;
display: block;
font-size: 16px;
padding: 14px 16px;
margin: 10px;
border-radius: 7px;
border: 3px solid black;
}
.topmenu {
font-size: 16px;
padding: 14px 16px;
position: relative;
display: inline-block;
float: right;
}
.topmenu a {
color: #f2f2f2;
}
.listing {
float: left;
display: block;
.about {
padding: 14px 16px;
background-color: lightgray;
margin: 10px;
border-radius: 7px;
border: 3px solid black;
}
</style>
</head>
<body>
<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 class="jumbotron text-center" style="margin-bottom:0; ">
<h1>ServicePoints!</h1>
<p>Connect with your Org</p>
</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>
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color:#7952b3;">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="">Blood Drives</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/food/">Food Drives</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/mask/">Mask Making</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/tutorsu/">Tutoring</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Settings
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/accounts/profile/">View Profile</a>
{% if leader == 1 %}
<a class="dropdown-item" href="/accounts/manageOrg/">Manage Org</a>
{% endif %}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/accounts/logout/">Logout</a>
</div>
</li>
</ul>
</div>
<div class="listing">
Blood Drive 2 <br /> Location: Grand Rapids <br /> Link: <a href="">Link to Blood Drive</a>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-8">
<h2>Blood Drives</h2>
{% for bloodPost in bloodDs %}
<div class="listing">
{{bloodPost.name}}<br />
{{bloodPost.description}}<br />
{{bloodPost.link}}<br />
</div>
{% endfor %}
</div>
<div class="col-sm-4">
<div class="about">
<h2>About</h2>
<p>Blood...</p>
</div>
<p>
<a class="btn btn-default btn-lg btn-block" href="https://www.redcross.org/give-blood.html" role="button" style="background-color:#03DAC6;">Red Cross</a>
</p>
<div>
<h2>Your Info: </h2>
<p>Username: {{username}}</p>
<p>Organization: {{org}}</p>
<p>Hours: {{hours}}</p>
<hr class="d-sm-none">
</div>
</div>
</div>
</main>
</div>
<div class="jumbotron text-center" style="margin-bottom:0; ">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
......
servicePoints/templates/create.html
+ 4
− 4
View file @ a1c10e84
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
......@@ -61,11 +61,11 @@
<form action="/accounts/create/" method="post" enctype="multipart/form-data">
<div class="form-group">
<b>Your Name: </b>
<input type="text" placeholder="Enter Name" name="fullname" class="form-control" required />
<input type="text" placeholder="Enter Name" name="fullname" class="form-control" required maxlength="30" />
</div>
<div class="form-group">
<b>Username: </b>
<input type="text" placeholder="Enter Username" name="username" class="form-control" required />
<input type="text" placeholder="Enter Username" name="username" class="form-control" required maxlength="20" />
</div>
<div class="form-group">
<b>Email: </b>
......@@ -73,7 +73,7 @@
</div>
<div class="form-group">
<b>Password: </b>
<input type="password" placeholder="Enter Password" name="password" class="form-control" required />
<input type="password" placeholder="Enter Password" name="password" class="form-control" required maxlength="20" />
</div>
<div>
<b>Select an Organization:</b><br />
......
servicePoints/templates/createOrg.html
+ 5
− 5
View file @ a1c10e84
<!DOCTYPE html>
<!DOCTYPE html>
<html>
......@@ -62,15 +62,15 @@
<form action="/accounts/createOrg/" method="post" enctype="multipart/form-data">
<div class="form-group">
<b>New Student Organization Name: </b>
<input type="text" placeholder="Enter Org Name" name="orgName" class="form-control" required />
<input type="text" placeholder="Enter Org Name" name="orgName" class="form-control" required maxlength="30" />
</div>
<div class="form-group">
<b>Your Name: </b>
<input type="text" placeholder="Enter Your Name" name="fullname" class="form-control" required />
<input type="text" placeholder="Enter Your Name" name="fullname" class="form-control" required maxlength="30" />
</div>
<div class="form-group">
<b>Username: </b>
<input type="text" placeholder="Enter Username" name="username" class="form-control" required />
<input type="text" placeholder="Enter Username" name="username" class="form-control" required maxlength="20" />
</div>
<div class="form-group">
<b>Email: </b>
......@@ -78,7 +78,7 @@
</div>
<div class="form-group">
<b>Password: </b>
<input type="password" placeholder="Enter Password" name="password" class="form-control" required />
<input type="password" placeholder="Enter Password" name="password" class="form-control" required maxlength="20" />
</div>
{% if msg != '' %}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
......
servicePoints/templates/food.html
+ 87
− 60
View file @ a1c10e84
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<title>Food Drives</title>
<style>
.topnav {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
.topnav button:hover {
background: rgba(0,0,0,0.2);
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
main {
margin-top: 75px;
}
<title>Food Drives</title>
.topitem {
color: #f2f2f2;
<style>
.listing {
float: left;
display: block;
font-size: 16px;
padding: 14px 16px;
}
.topmenu {
font-size: 16px;
padding: 14px 16px;
position: relative;
display: inline-block;
float: right;
margin: 10px;
border-radius: 7px;
border: 3px solid black;
}
.topmenu a {
color: #f2f2f2;
}
.listing {
float: left;
display: block;
.about {
padding: 14px 16px;
background-color: lightgray;
margin: 10px;
border-radius: 7px;
border: 3px solid black;
}
</style>
</head>
<body>
<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="jumbotron text-center" style="margin-bottom:0; ">
<h1>ServicePoints!</h1>
<p>Connect with your Org</p>
</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>
<nav class="navbar navbar-expand-sm navbar-dark" style="background-color:#7952b3;">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/accounts/blood/">Blood Drives</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Food Drives</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/mask/">Mask Making</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/tutorsu/">Tutoring</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Settings
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/accounts/profile/">View Profile</a>
{% if leader == 1 %}
<a class="dropdown-item" href="/accounts/manageOrg/">Manage Org</a>
{% endif %}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/accounts/logout/">Logout</a>
</div>
</li>
</ul>
</div>
<div class="listing">
Food Drive 2 <br /> Location: Detroit <br /> Link: <a href="">Food Drive Information</a>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-8">
<h2>Food Drives</h2>
{% for foodPost in foodDs %}
<div class="listing">
{{foodPost.name}}<br />
{{foodPost.description}}<br />
{{foodPost.link}}<br />
</div>
{% endfor %}
</div>
<div class="col-sm-4">
<div class="about">
<h2>About</h2>
<p>Food...</p>
</div>
<div>
<h2>Your Info: </h2>
<p>Username: {{username}}</p>
<p>Organization: {{org}}</p>
<p>Hours: {{hours}}</p>
<hr class="d-sm-none">
</div>
</div>
</div>
</main>
</div>
<div class="jumbotron text-center" style="margin-bottom:0; ">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
......
servicePoints/templates/index.html
+ 13
− 9
View file @ a1c10e84
......@@ -107,11 +107,13 @@
<a class="btn btn-default btn-lg btn-block" href="/accounts/viewMemberPoints/" role:"button" style="background-color:#03DAC6;">View Points</a>
</p>
{% endif %}
<h2>Your Info: </h2>
<p>Username: {{username}}</p>
<p>Organization: {{org}}</p>
<p>Hours: {{hours}}</p>
<hr class="d-sm-none">
<div>
<h2>Your Info: </h2>
<p>Username: {{username}}</p>
<p>Organization: {{org}}</p>
<p>Hours: {{hours}}</p>
<hr class="d-sm-none">
</div>
</div>
</div>
</div>
......@@ -170,12 +172,14 @@
<label for="service">Select the type of service:</label>
<select name="service" id="service" class="form-control">
<option value="mask">Mask-Making</option>
<option value="blood">Donating Blood</option>
<option value="tutor">Tutoring</option>
<option value="food">Donating Food</option>
<option value="blood">Blood Drive</option>
<option value="food">Food Drive</option>
</select>
</div>
<div class="form-group">
<label for="description">Enter a Title or Name for the Drive:</label>
<input class="form-control" name="name" type="text" placeholder="Enter a Name" required>
</div>
<div class="form-group">
<label for="description">Enter a brief description of the service:</label>
<textarea class="form-control" name="description" rows="3" placeholder="Enter a Description" required></textarea>
......
servicePoints/templates/mask.html
+ 19
− 87
View file @ a1c10e84
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
......@@ -9,6 +9,15 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>How to make a mask:</title>
<style>
.about {
padding: 14px 16px;
background-color: lightgray;
margin: 10px;
border-radius: 7px;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0; ">
......@@ -77,98 +86,21 @@
<a style="font-size: 18px;" href="https://deaconess.com/How-to-make-a-Face-Mask/Mask-Donations?state=Michigan">Deaconess</a>
</div>
<div class="col-sm-4">
<p>
<a href="" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#pointsModal" style="background-color:#03DAC6;">Submit Points</a>
</p>
<p>
<a class="btn btn-default btn-lg btn-block" href="" data-toggle="modal" data-target="#serviceModal" style="background-color:#03DAC6;">Submit a Service Opportunity</a>
</p>
<h2>Your Info: </h2>
<p>Username: {{username}}</p>
<p>Organization: {{org}}</p>
<p>Hours: {{hours}}</p>
<hr class="d-sm-none">
</div>
</div>
</div>
<div class="modal fade" id="pointsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Submit Points</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<div class="about">
<h2>About</h2>
<p>Masks...</p>
</div>
<div class="modal-body">
<form action="/accounts/submitPoints/" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="service">Select the type of service:</label>
<select name="service" id="service" class="form-control">
<option value="mask">Mask-Making</option>
<option value="blood">Donating Blood</option>
<option value="tutor">Tutoring</option>
<option value="food">Donating Food</option>
</select>
</div>
<div class="form-group">
<label for="description">Enter a brief description of the service:</label>
<textarea class="form-control" name="description" rows="3" placeholder="Enter a Description"></textarea>
</div>
<div class="form-group">
<label for="file">Photo for proof of service</label>
<input type="file" name="file" class="form-control-file">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" name="update" value="Submit" />
</div>
</form>
<div>
<h2>Your Info: </h2>
<p>Username: {{username}}</p>
<p>Organization: {{org}}</p>
<p>Hours: {{hours}}</p>
<hr class="d-sm-none">
</div>
</div>
</div>
</div>
<div class="modal fade" id="serviceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Submit a Service Opportunity</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form action="/accounts/" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="service">Select the type of service:</label>
<select name="service" id="service" class="form-control">
<option value="mask">Mask-Making</option>
<option value="blood">Donating Blood</option>
<option value="tutor">Tutoring</option>
<option value="food">Donating Food</option>
</select>
</div>
<div class="form-group">
<label for="description">Enter a brief description of the service:</label>
<textarea class="form-control" name="description" rows="3" placeholder="Enter a Description"></textarea>
</div>
<div class="form-group">
<label for="file">Enter a link to the service</label>
<input type="url" name="link" class="form-control">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" name="update" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0; ">
</div>
<!-- Optional JavaScript -->
......
servicePoints/views/accounts.py
+ 20
− 4
View file @ a1c10e84
......@@ -294,7 +294,15 @@ def blood():
'username =:who',
{"who": username})
results = studentOrgCur.fetchone()
context = {'username': username, 'org': results["orgName"], 'hours': results["hours"]}
bloodDrives = cursor.execute('SELECT name, description, link FROM posts WHERE '
'service =:who',
{"who": 'blood'})
bloodDs = bloodDrives.fetchall()
# Add database info to context
context = {'username': username, 'org': results["orgName"], 'hours': results["hours"], 'bloodDs': bloodDs}
return render_template('blood.html', **context)
@servicePoints.app.route('/accounts/food/')
......@@ -305,7 +313,14 @@ def food():
'username =:who',
{"who": username})
results = studentOrgCur.fetchone()
context = {'username': username, 'org': results["orgName"], 'hours': results["hours"]}
foodDrives = cursor.execute('SELECT name, description, link FROM posts WHERE '
'service =:who',
{"who": 'food'})
foodDs = foodDrives.fetchall()
# Add database info to context
context = {'username': username, 'org': results["orgName"], 'hours': results["hours"], 'foodDs': foodDs}
return render_template('food.html', **context)
@servicePoints.app.route('/accounts/profile/', methods=['GET', 'POST'])
......@@ -507,12 +522,13 @@ def submitService():
if flask.request.method == 'POST':
serviceType = flask.request.form["service"]
description = flask.request.form["description"]
name = flask.request.form["name"]
link = flask.request.form["link"]
data = (serviceType, description, link)
data = (serviceType, name, description, link)
cursor = servicePoints.model.get_db()
cursor.execute("INSERT INTO posts(service, description, link) VALUES (?, ?, ?)", data)
cursor.execute("INSERT INTO posts(service, name, description, link) VALUES (?, ?, ?, ?)", data)
context = {'username': flask.session["username"], 'org': flask.session['orgName'], 'hours': flask.session["hours"],
'leader': flask.session["leader"], 'serviceMsg' :'Your post has been submitted', 'submitMsg':''}
......
sql/schema.sql
+ 2
− 1
View file @ a1c10e84
......@@ -51,7 +51,8 @@ CREATE TABLE requests(
CREATE TABLE posts(
postid INTEGER NOT NULL,
service VARCHAR(40) NOT NULL,
name VARCHAR(30) NOT NULL,
description VARCHAR(128) NOT NULL,
link VARCHAR(128) NOT NULL,
PRIMARY KEY(postid)
);
\ No newline at end of file
);
var/servicePoints.sqlite3
+ 0
− 0
View file @ a1c10e84
No preview for this file type
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment