diff options
Diffstat (limited to 'pollutometer-php/app/Resources/views')
5 files changed, 165 insertions, 0 deletions
diff --git a/pollutometer-php/app/Resources/views/base.html.twig b/pollutometer-php/app/Resources/views/base.html.twig new file mode 100644 index 0000000..f8d8374 --- /dev/null +++ b/pollutometer-php/app/Resources/views/base.html.twig @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <title>{% block title %}Welcome!{% endblock %}</title> + {% block stylesheets %}{% endblock %} + <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css"/> + </head> + <body> + <nav class="navbar" role="navigation" aria-label="main navigation" style="margin: 0 0 3em 0"> + <div class="navbar-brand"> + <a class="navbar-item" href="/"> + <img src="https://cdn3.iconfinder.com/data/icons/christmas-icon-set-pixel-perfect/64/christmas-color-12-512.png" alt="Pollutometer" width="50px" height="auto"> + <span>Pollutometer</span> + </a> + <a class="navbar-item" href="/AllData"> + <span>All Data</span> + </a> + <a class="navbar-item" href="/LastWeekData"> + <span>Last Week Data</span> + </a> + <a class="navbar-item" href="/TrainSchedule"> + <span>Train Schedule</span> + </a> + </div> + </nav> + <div class="container"> + {% block body %}{% endblock %} + </div> + {% block javascripts %}{% endblock %} + </body> +</html> diff --git a/pollutometer-php/app/Resources/views/default/AllData.html.twig b/pollutometer-php/app/Resources/views/default/AllData.html.twig new file mode 100644 index 0000000..7bc33af --- /dev/null +++ b/pollutometer-php/app/Resources/views/default/AllData.html.twig @@ -0,0 +1,35 @@ +{% extends 'base.html.twig' %} + +{% block body %} +<div class="columns"> + <div class="column is-narrow"> +<table class="table"> + <thead class="thead"> + <tr class="tr"> + <th>TimeStamp</th> + <th>Co</th> + <th>No</th> + <th>So</th> + </tr> + </thead> + <tbody class="tbody"> + <tr class="tr"> + {% for table in data %} + <td class="td">{{ table.TimeStamp }}</td> + <td class="td">{{ table.Co }}</td> + <td class="td">{{ table.No }}</td> + <td class="td">{{ table.So }}</td> + </tr> + </tbody> + {% endfor %} +</table> + </div> + <div class="column"> +<canvas id="ctx"></canvas> + </div> +</div> +{% endblock %} +{% block javascripts %} + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> + <script src="{{ asset('js/AllDataChart.js') }}"></script +{% endblock %}
\ No newline at end of file diff --git a/pollutometer-php/app/Resources/views/default/LastWeekData.html.twig b/pollutometer-php/app/Resources/views/default/LastWeekData.html.twig new file mode 100644 index 0000000..fdc6dd9 --- /dev/null +++ b/pollutometer-php/app/Resources/views/default/LastWeekData.html.twig @@ -0,0 +1,35 @@ +{% extends 'base.html.twig' %} + +{% block body %} +<div class="columns"> + <div class="column is-narrow"> +<table class="table"> + <thead class="thead"> + <tr class="tr"> + <th>TimeStamp</th> + <th>Co</th> + <th>No</th> + <th>So</th> + </tr> + </thead> + <tbody class="tbody"> + <tr class="tr"> + {% for table in data %} + <td class="td">{{ table.TimeStamp }}</td> + <td class="td">{{ table.Co }}</td> + <td class="td">{{ table.No }}</td> + <td class="td">{{ table.So }}</td> + </tr> + </tbody> + {% endfor %} +</table> + </div> + <div class="column"> +<canvas id="ctx"></canvas> + </div> +</div> +{% endblock %} +{% block javascripts %} + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> + <script src="{{ asset('js/LastWeekDataChart.js') }}"></script +{% endblock %}
\ No newline at end of file diff --git a/pollutometer-php/app/Resources/views/default/TrainSchedule.html.twig b/pollutometer-php/app/Resources/views/default/TrainSchedule.html.twig new file mode 100644 index 0000000..efc94ec --- /dev/null +++ b/pollutometer-php/app/Resources/views/default/TrainSchedule.html.twig @@ -0,0 +1,28 @@ +{% extends 'base.html.twig' %} + +{% block body %} +<table class="table"> + <thead class="thead"> + <tr class="tr"> + <th>Name</th> + <th>Time</th> + <th>Date</th> + <th>Destination</th> + <th>AQI</th> + </tr> + </thead> + <tbody class="tbody"> + <tr class="tr"> + {% for table in data %} + <td class="td">{{ table.name }}</td> + <td class="td">{{ table.time }}</td> + <td class="td">{{ table.date }}</td> + <td class="td">{{ table.finalStop }}</td> + <td class="td">{{ table.direction }}</td> + </tr> + </tbody> + {% endfor %} +</table> +{% endblock %} +{% block javascripts %} +{% endblock %}
\ No newline at end of file diff --git a/pollutometer-php/app/Resources/views/default/index.html.twig b/pollutometer-php/app/Resources/views/default/index.html.twig new file mode 100644 index 0000000..176f519 --- /dev/null +++ b/pollutometer-php/app/Resources/views/default/index.html.twig @@ -0,0 +1,34 @@ +{% extends 'base.html.twig' %} + +{% block body %} + <div class="columns"> + <div class="column"> + <table class="table"> + <thead class="thead"> + <tr class="tr"> + <th class="td">TimeStamp</th> + <th class="td">Co</th> + <th class="td">No</th> + <th class="td">So</th> + </tr> + </thead> + <tbody class="tbody"> + <tr id="latest" class="tr"> + <td class="td">{{ TimeStamp }}</td> + <td class="td">{{ Co }}</td> + <td class="td">{{ No }}</td> + <td class="td">{{ So }}</td> + </tr> + </tbody> + </table> + <p id="aq">The current air quality index is <strong>{{ Aqi }}</strong></p> + </div> + <div class="column"> + <img src="https://www.ourair.org/wp-content/uploads/AQItable.gif"> + </div> + </div> + +{% endblock %} +{% block javascripts %} + <script src="{{ asset('js/realtime.js') }}"></script> +{% endblock %} |