Refactoring pages

Signed-off-by: Matheus Fernandes <matheus.souza.fernandes@gmail.com> Signed-off-by: Macario Soares <macario.junior@gmail.com>
Pi2-FGABreja · Dec 5, 2015 · c328209 · c328209
1 parent 365af10
commit c328209
Show file tree

Hide file tree

Showing 12 changed files with 217 additions and 116 deletions.
diff --git a/FGABreja/defaults/templates/base.html b/FGABreja/defaults/templates/base.html
@@ -34,6 +34,9 @@
         });
         $('.modal-trigger').leanModal();
         $(".dropdown-button").dropdown();
+        $('.collapsible').collapsible({
+          accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
+        });
       });
     </script>
 

diff --git a/FGABreja/defaults/templates/topbar.html b/FGABreja/defaults/templates/topbar.html
@@ -16,7 +16,9 @@
     </a>
 
     <ul id="nav-mobile" class="left hide-on-med-and-down">
-
+      {% if user.is_authenticated %}
+        <li><a href="{% url 'new_process' %}"><i class="material-icons left">add_circle</i>{% trans "New Process" %}</a></li>
+      {% endif %}
     </ul>
 
     <ul id="nav-mobile" class="right hide-on-med-and-down">

diff --git a/FGABreja/monitoring/templates/home.html b/FGABreja/monitoring/templates/home.html
@@ -3,46 +3,60 @@
 
 {% block title %}Home{% endblock title %}
 
-{% block navbar_tabs %}
-  <ul class="tabs fixed z-depth-1 hide-on-small-only">
-    <li class="tab col s3"><a href="#real-time">Real-Time</a></li>
-    <li class="tab col s3"><a href="#report-chart">Report Chart</a></li>
-  </ul>
-
-  <ul class="tabs fixed z-depth-1 hide-on-med-and-up">
-    <li class="tab col s3"><a href="#real-time"><i class="material-icons small">timer</i></a></li>
-    <li class="tab col s3"><a href="#report-chart"><i class="material-icons">insert_chart</i></a></li>
-  </ul>
-{% endblock navbar_tabs %}
-
 {% block main_content %}
-  <div id="real-time" class="container">
-    <div class="row">
-      <div class="home-card">
-        <div class="card-content">
-          <span class="card-title brown-text">{% trans "Brewery" %}</span>
-          <div id="realtime-chart" class="graph"></div>
-        </div>
-      </div>
+<div class="container">
+  <div class="row">
+    <div class="s12 m12 col">
+      <h3 class="center-align">{% trans "Beer Processes" %}</h3>
     </div>
   </div>
+</div>
 
-  <div id="report-chart" class="container">
-    <div class="row">
-      <div class="home-card">
-        <div class="card-content">
-          <span class="card-title brown-text">{% trans "Brewery" %}</span>
-          <div id="static-chart" class="graph"></div>
+<div class="container">
+  <ul class="collapsible popout" data-collapsible="accordion">
+    <li>
+      <div class="collapsible-header">
+          <div><i class="material-icons">chevron_right</i>Red Ale</div>
+      </div>
+      <div class="collapsible-body">
+        <div class="row">
+          <div class="s12 m6 col">
+            <ul>
+              <li><span class="bold">{% trans "Initialized at:" %}</span> 5 de dezembro de 2015</li>
+              <li><span class="bold">{% trans "Finalized at:" %}</span> ---</li>
+              <li><span class="bold">{% trans "Recipe description:" %}</span> 5.84% teor de álcool</li>
+              <li><span class="bold">{% trans "Malt:" %}</span> 75% Pilsen, 10% Malte de trigo, 10% CaraAmber, 5% CaraAroma</li>
+              <li><span class="bold">{% trans "Yeast:" %}</span> BRY-97</li>
+            </ul>
+          </div>
+          <div class="s12 m6 col center">
+            <a href="{% url 'monitoring' %}" class="btn">{% trans "Real-time monitoring" %}</a>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
+    </li>
 
-{% endblock main_content %}
+    <li>
+      <div class="collapsible-header">
+          <div><i class="material-icons">check</i>Red Ale</div>
+      </div>
+      <div class="collapsible-body">
+        <div class="row">
+          <div class="s12 m6 col">
+            <ul>
+              <li><span class="bold">{% trans "Initialized at:" %}</span> 5 de dezembro de 2015</li>
+              <li><span class="bold">{% trans "Finalized at:" %}</span> 24 de dezembro de 2015</li>
+              <li><span class="bold">{% trans "Recipe description:" %}</span> 5.84% teor de álcool</li>
+              <li><span class="bold">{% trans "Malt:" %}</span> 75% Pilsen, 10% Malte de trigo, 10% CaraAmber, 5% CaraAroma</li>
+              <li><span class="bold">{% trans "Yeast:" %}</span> BRY-97</li>
+            </ul>
+          </div>
+          <div class="s12 m6 col center">
 
-{% block footer_scripts %}
-  {% load staticfiles %}
-  <script src="{% static 'js//highcharts.js' %}"></script>
-  {% include "realtime_chart_js" %}
-  {% include "static_chart_js" %}
-{% endblock footer_scripts %}
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+{% endblock main_content %}
diff --git a/FGABreja/monitoring/templates/monitoring.html b/FGABreja/monitoring/templates/monitoring.html
@@ -0,0 +1,52 @@
+{% extends "base.html" %}
+{% load i18n %}
+
+{% block title %}Home{% endblock title %}
+
+{% block main_content %}
+  <div id="real-time" class="container">
+    <div class="row">
+      <div class="s12 m9 col">
+        <div class="home-card">
+          <div class="card-content">
+            <span class="card-title brown-text">{% trans "Brewery" %}.</span>
+            <span>Actual state</span>
+            <div id="realtime-chart" class="graph"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="s12 m3 col">
+        <div class="process-info">
+          <h5>Process Info</h5>
+          <div class="row">
+            <div class="s2 col"><i class="material-icons">today</i></div>
+            <div class="s10 col">10 de dezembro de 2015</div>
+          </div>
+
+          <div class="row">
+            <div class="s2 col"><i class="material-icons">check_box_outline</i></div>
+            <div class="s10 col">Malt</div>
+          </div>
+
+          <div class="row">
+            <div class="s2 col"><i class="material-icons">check_box_outline_blank</i></div>
+            <div class="s10 col">Iodine test</div>
+          </div>
+
+          <div class="row">
+            <div class="s2 col"><i class="material-icons">timer</i></div>
+            <div class="s10 col">01:23:40:40</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+{% endblock main_content %}
+
+{% block footer_scripts %}
+  {% load staticfiles %}
+  <script src="{% static 'js//highcharts.js' %}"></script>
+  {% include "realtime_chart_js" %}
+{% endblock footer_scripts %}
diff --git a/FGABreja/monitoring/templates/new_process.html b/FGABreja/monitoring/templates/new_process.html
@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+{% load i18n %}
+
+{% block title %}{% trans "New Process" %}{% endblock title %}
+
+{% block main_content %}
+<div class="container">
+  <div class="row">
+    <div class="s12 m12 col">
+      <h3 class="center-align">{% trans "New Process" %}</h3>
+    </div>
+  </div>
+</div>
+
+<div class="container">
+  <div class="row">
+    <div class="s12 m6 col">
+      <div class="card">
+        <div class="card-content">
+          <span class="card-title brown-text">Red Ale</span>
+
+          <p class="recipe-item"><span class="bold">{% trans "Recipe description:" %}</span><br> 5.84% teor de álcool</p>
+
+          <p class="recipe-item"><span class="bold">{% trans "Malt:" %}</span> 5kg <br> 75% Pilsen, 10% Malte de trigo, 10% CaraAmber, 5% CaraAroma</p>
+
+          <p class="recipe-item"><span class="bold">{% trans "Yeast:" %}</span><br> BRY-97</p>
+
+          <p class="recipe-item"><span class="bold">{% trans "Hops:" %}</span><br>
+          <ul>
+            <li>Hop1</li>
+            <li>Hop2</li>
+          </ul></p>
+
+          <div class="center">
+            <a href="" class="btn">Start Process</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="s12 m6 col">
+      <div class="card">
+        <div class="card-content">
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock main_content %}
diff --git a/FGABreja/monitoring/templates/static_chart_js b/FGABreja/monitoring/templates/static_chart_js
diff --git a/FGABreja/monitoring/urls.py b/FGABreja/monitoring/urls.py
@@ -1,9 +1,12 @@
 from django.conf.urls import url
-from monitoring.views import get_temperature_average, HomeView
+from monitoring.views import (get_temperature_average, HomeView,
+                              NewProcessView, MonitoringView)
 
 
 urlpatterns = [
     url(r'^temperature/average/$', get_temperature_average,
         name='temperature_average'),
     url(r'^$', HomeView.as_view(), name='home'),
+    url(r'^monitoring/$', MonitoringView.as_view(), name='monitoring'),
+    url(r'^process/new$', NewProcessView.as_view(), name='new_process'),
 ]
diff --git a/FGABreja/monitoring/views.py b/FGABreja/monitoring/views.py
@@ -1,5 +1,4 @@
 from django.http import HttpResponse
-from monitoring.models import ThermalSensor
 from django.shortcuts import render_to_response
 from django.template import RequestContext
 from defaults.views import FGABrejaView
@@ -16,7 +15,19 @@ def get_temperature_average(request):
 class HomeView(FGABrejaView):
 
     def get(self, request):
-        sensor_data = ThermalSensor.objects.filter(
-            identifier=1).order_by('date', 'time')
         return render_to_response('home.html', locals(),
                                   context_instance=RequestContext(request))
+
+
+class MonitoringView(FGABrejaView):
+
+    def get(self, request):
+        return render_to_response('monitoring.html', locals(),
+                                  context_instance=RequestContext(request))
+
+
+class NewProcessView(FGABrejaView):
+
+    def get(self, request):
+        return render_to_response('new_process.html', locals(),
+                                  context_instance=RequestContext(request))
diff --git a/FGABreja/settings/api.py b/FGABreja/settings/api.py
@@ -1 +1 @@
-API_URL = 'http://localhost:5000'
+API_URL = 'http://localhost:5000/api/'
diff --git a/FGABreja/static/sass/components/_fgabreja.scss b/FGABreja/static/sass/components/_fgabreja.scss
@@ -16,4 +16,21 @@
 .graph {
     width: 100%;
     height: 25rem;
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.collapsible-body{
+    padding: 1rem 2rem 1rem;
+    background-color: darken(white, 4%);
+}
+
+.recipe-item {
+  margin: 1rem 0rem !important;
+}
+
+.process-info {
+  padding-top: 3rem;
 }
diff --git a/FGABreja/static/sass/components/_variables.scss b/FGABreja/static/sass/components/_variables.scss
@@ -30,7 +30,7 @@ $card-link-color: color("orange", "accent-2") !default;
 $card-link-color-light: lighten($card-link-color, 20%) !default;
 
 /*** Collapsible ***/
-$collapsible-height: 3rem !default;
+$collapsible-height: 5rem !default;
 $collapsible-header-color: #fff !default;
 $collapsible-border-color: #ddd !default;