Added dashboard page to app.
This commit is contained in:
Karthik Pullela
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,124 @@
|
|||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
background-color: #d7dae0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardsCont {
|
||||||
|
background-color: #d7dae0;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
.container-fluid {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goalRow {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
.cardCont {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
margin: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.circleGraph {
|
||||||
|
padding: 0;
|
||||||
|
height: 400px;
|
||||||
|
color: black !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.twoCardRow {
|
||||||
|
height: 195px;
|
||||||
|
margin-bottom: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fa {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardInfo {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: #727375;
|
||||||
|
font-size: 23px;
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardData {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
bottom: 0;
|
||||||
|
color: #565759;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stepsC {
|
||||||
|
background-color: rgb(232, 245, 233);
|
||||||
|
}
|
||||||
|
.sleepC {
|
||||||
|
background-color: rgb(243, 229, 245);
|
||||||
|
}
|
||||||
|
.calC {
|
||||||
|
background-color: rgb(255, 243, 224);
|
||||||
|
}
|
||||||
|
.activityC {
|
||||||
|
background-color: rgb(225, 245, 254);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainGCont {
|
||||||
|
top: 30px;
|
||||||
|
padding: 10px;
|
||||||
|
height: 500px;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.mainG {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.mainGraph {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
@@ -141,6 +141,9 @@ button {
|
|||||||
padding: 0px 5px 10px 3px;
|
padding: 0px 5px 10px 3px;
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: 3px 3px 2px #888888;
|
box-shadow: 3px 3px 2px #888888;
|
||||||
|
position:relative;
|
||||||
|
left: 45%;
|
||||||
|
top:90%;
|
||||||
|
|
||||||
}
|
}
|
||||||
button:hover {
|
button:hover {
|
||||||
|
|||||||
@@ -0,0 +1,126 @@
|
|||||||
|
<!Doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
{% load static %}
|
||||||
|
<link rel="shortcut icon" href="pics/Airplane.ico" />
|
||||||
|
<title>Reflex</title>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="{% static 'home/dash.css' %}">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||||
|
<script src="https://use.fontawesome.com/7b29adddad.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
google.charts.load('current', {'packages':['corechart']});
|
||||||
|
google.charts.setOnLoadCallback(drawChart);
|
||||||
|
function drawChart() {
|
||||||
|
var data = google.visualization.arrayToDataTable([
|
||||||
|
['Task', 'Hours per Day'],
|
||||||
|
['Completed', 11],
|
||||||
|
['To Go' , 13],
|
||||||
|
]);
|
||||||
|
var options = {
|
||||||
|
title: 'Personal Goal Graph',
|
||||||
|
pieHole: 0.8,
|
||||||
|
colors:['red','#004411'],
|
||||||
|
};
|
||||||
|
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
|
||||||
|
chart.draw(data, options);
|
||||||
|
}
|
||||||
|
function getData(value){
|
||||||
|
}
|
||||||
|
google.charts.load('current', {'packages':['corechart']});
|
||||||
|
google.charts.setOnLoadCallback(drawVisualization);
|
||||||
|
function drawVisualization() {
|
||||||
|
// Some raw data (not necessarily accurate)
|
||||||
|
var data = google.visualization.arrayToDataTable([
|
||||||
|
['Day', 'Steps', 'Calories', 'Sleep', 'Activity', 'Average'],
|
||||||
|
['01/05', 10, 94, 90, 84, 70],
|
||||||
|
['01/06', 70, 90, 91, 84, 84],
|
||||||
|
['01/07', 96, 98, 70, 93, 90],
|
||||||
|
['01/08', 83, 90, 90, 75, 85],
|
||||||
|
['01/09', 80, 90, 93, 95, 90]
|
||||||
|
]);
|
||||||
|
var options = {
|
||||||
|
title : 'Daily Fitness Goals',
|
||||||
|
vAxis: {title: 'Percent'},
|
||||||
|
hAxis: {title: 'Days'},
|
||||||
|
seriesType: 'bars',
|
||||||
|
series: {5: {type: 'line'}}
|
||||||
|
};
|
||||||
|
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
|
||||||
|
chart.draw(data, options);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="nav container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-sm-12">
|
||||||
|
<font color="white">Reflex</font>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container-fluid cardsCont">
|
||||||
|
|
||||||
|
<div class="row goalRow">
|
||||||
|
<div class="col-md-6 cardCont">
|
||||||
|
<div class="card">
|
||||||
|
<div id="piechart" class="circleGraph"></div>
|
||||||
|
</div>
|
||||||
|
<!---graph -->
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 cardCont">
|
||||||
|
<div class="row twoCardRow">
|
||||||
|
<div class="col-md-6 cardCont">
|
||||||
|
<div class="card stepsC">
|
||||||
|
<i class="fa fa-male fa-2x" aria-hidden="true"></i>
|
||||||
|
<p class="cardInfo">Steps</p>
|
||||||
|
<p class="cardData">1000</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 cardCont">
|
||||||
|
<div class="card calC">
|
||||||
|
<i class="fa fa-fire fa-2x" aria-hidden="true"></i>
|
||||||
|
<p class="cardInfo">Calories</p>
|
||||||
|
<p class="cardData">250 Calories</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row twoCardRow">
|
||||||
|
<div class="col-md-6 cardCont">
|
||||||
|
<div class="card sleepC">
|
||||||
|
<i class="fa fa-bed fa-2x" aria-hidden="true"></i>
|
||||||
|
<p class="cardInfo">Sleep</p>
|
||||||
|
<p class="cardData">8.5 hours</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 cardCont">
|
||||||
|
<div class="card activityC">
|
||||||
|
<i class="fa fa-heart fa-2x" aria-hidden="true"></i>
|
||||||
|
<p class="cardInfo">Activity</p>
|
||||||
|
<p class="cardData">1 hours</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mainGCont">
|
||||||
|
<div class"col-md-12 mainG">
|
||||||
|
<div id="chart_div" class="mainGraph"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -51,8 +51,11 @@
|
|||||||
<br>
|
<br>
|
||||||
<a href="{% url 'logout' %}"><button id="begin">LOGOUT</button></a>
|
<a href="{% url 'logout' %}"><button id="begin">LOGOUT</button></a>
|
||||||
<br>
|
<br>
|
||||||
|
</p>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|
||||||
<p class="inputs">
|
<p class="inputs">
|
||||||
|
</p>
|
||||||
<br>
|
<br>
|
||||||
<a href="{% url 'log' %}"><button id="begin">BEGIN</button></a>
|
<a href="{% url 'log' %}"><button id="begin">BEGIN</button></a>
|
||||||
<br>
|
<br>
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ def dash(request):
|
|||||||
calories_data.append(my_data['bucket'][i]['dataset'][0]['point'][0]['value'][0]['fpVal'])
|
calories_data.append(my_data['bucket'][i]['dataset'][0]['point'][0]['value'][0]['fpVal'])
|
||||||
i = i+1
|
i = i+1
|
||||||
|
|
||||||
return render(request, 'home/home.html',
|
return render(request, 'home/dashboard.html',
|
||||||
{
|
{
|
||||||
'calories_data':calories_data,
|
'calories_data':calories_data,
|
||||||
'walk_data':walk_data,
|
'walk_data':walk_data,
|
||||||
|
|||||||
Reference in New Issue
Block a user