From be7257f42e218a4584ae692b979e14f211a33efc Mon Sep 17 00:00:00 2001 From: ianlofs Date: Wed, 11 May 2016 15:05:30 -0700 Subject: [PATCH 1/4] working on datepicker buttons --- seadssite/models.py | 5 +- seadssite/static/js/graph.js | 40 +++-- seadssite/templates/graph.html | 297 +++++++++++++++++---------------- 3 files changed, 180 insertions(+), 162 deletions(-) diff --git a/seadssite/models.py b/seadssite/models.py index 5db435f..80e6094 100644 --- a/seadssite/models.py +++ b/seadssite/models.py @@ -72,11 +72,12 @@ def reactivate_device(self, user): self.is_active = True self.save() + + + ''' model for Images displayed on the site ''' - - # Required Fields # - docfile (file) corrensponds to a file upload path class Document(models.Model): diff --git a/seadssite/static/js/graph.js b/seadssite/static/js/graph.js index 8935d91..359f6c7 100644 --- a/seadssite/static/js/graph.js +++ b/seadssite/static/js/graph.js @@ -416,10 +416,10 @@ function generate_chart(responses, gran, panels) { $('#myModal').modal('show'); $("#start-date").datetimepicker({ - format: 'MM/DD/YYYY HH:mm' + format: 'dddd, MM/DD/YYYY HH:mm' }); $("#end-date").datetimepicker({ - format: 'MM/DD/YYYY HH:mm' + format: 'dddd, MM/DD/YYYY HH:mm' }); $('#start-date').data('DateTimePicker').setDate(start); @@ -446,6 +446,8 @@ function generate_appliance_chart() { $(document).ready(function() { //onload + var dailyDate = $("#daily-date input"); + $(".list-group button").click(function(e) { if( $(this).hasClass( "active" ) ) { $(this).removeClass("active"); @@ -474,7 +476,7 @@ $(document).ready(function() { panels[i]= $(this).attr('id'); i++; }); - var date = $("#daily-date").data("DateTimePicker").getDate(); + var date = dailyDate.data("DateTimePicker").getDate(); var start = Math.floor(date / 1000); var end = start + DAY_SECONDS; pick_date(panels, start, end); @@ -484,7 +486,7 @@ $(document).ready(function() { panels[i]= $(this).attr('id'); i++; }); - var date = $("#daily-date").data("DateTimePicker").getDate(); + var date = dailyDate.data("DateTimePicker").getDate(); var start = Math.floor(date / 1000); var end = start + DAY_SECONDS; pick_date(panels, start, end); @@ -496,7 +498,7 @@ $(document).ready(function() { panels[i]= $(this).attr('id'); i++; }); - var date = $("#daily-date").data("DateTimePicker").getDate(); + var date = dailyDate.data("DateTimePicker").getDate(); var start = Math.floor(date / 1000); var end = start + DAY_SECONDS; pick_date(panels, start, end); @@ -524,18 +526,32 @@ $(document).ready(function() { $("#label-name").val(''); }); - $("#daily-date").datetimepicker({ - format: 'MM/DD/YYYY' + $('#next_day').click(function() { + var date = dailyDate.data("DateTimePicker").getDate(); + date.setDate(date.getDate() + 1); + dailyDate.trigger("dp.change"); + }); + + $('#prev_day').click(function() { + var date = dailyDate.data("DateTimePicker").getDate(); + console.log(dailyDate.data("DateTimePicker")); + date.setDate(date.get() - 1); + dailyDate.trigger("dp.change"); }); - $("#daily-date").on("dp.change", function(){ + + dailyDate.datetimepicker({ + format: 'dddd, MM/DD/YYYY' + }); + + dailyDate.on("dp.change", function(){ var panels = []; var i = 0; $('#panels .active').each(function(){ - panels[i]= $(this).attr('id'); + panels[i]= $(this).attr('id'); i++; }); - var date = $("#daily-date").data("DateTimePicker").getDate(); + var date = dailyDate.data("DateTimePicker").getDate(); var start = Math.floor(date / 1000); var end = start + DAY_SECONDS; pick_date(panels, start, end); @@ -601,7 +617,7 @@ $(document).ready(function() { }); - var date = $("#daily-date").data("DateTimePicker").getDate(); + var date = dailyDate.data("DateTimePicker").getDate(); var start = Math.floor(date / 1000); var end = start + DAY_SECONDS; pick_date(['Panel1', 'Panel2', 'Panel3'], start, end); @@ -642,7 +658,5 @@ $(document).ready(function() { create_url(start, end, gran, "Panel3")], generate_bar_graph); - generate_appliance_chart(); - }); diff --git a/seadssite/templates/graph.html b/seadssite/templates/graph.html index 423617c..23d77ef 100644 --- a/seadssite/templates/graph.html +++ b/seadssite/templates/graph.html @@ -1,174 +1,177 @@ {% extends "base.html" %} {% load static from staticfiles %} {% block content %} - - - - - - - + + + + + + +
-
-

Daily Usage


-
-
- - - - -
+
+

Daily Usage

-
-
-
-
-
-
-
-

24hr Energy Usage

-
- - - - +
+
+
+ + + +
-
-
-

Start

-
- - - +
+
+ + + + + +
-
-

End

-
- - - - -
-
-
-

- -
-
-

- +
+
+
+
+
+
+

Start

+
+ + + + +
+
+
+

End

+
+ + + + +
+
+
+

+ +
+
+

+ +
+
-
-
-
-
-
-
-

- Real-time usage

-
-
-
-
-
-
-
-
-
-

- Usage per panel

-
-
-
+
+
+
+
+

+ Real-time usage

+
+
+
+
+
-
-
-
-
-
-

- Weekly usage

+
+
+
+

+ Usage per panel

+
+
+
+
+
-
-
+
+
+
+

+ Weekly usage

+
+
+
+
+
-
-
-
-
-
-
-

- Appliances (template)

-
-
- - - - - - - - - - +
+
+
+
+

+ Appliances (template)

+
+
+ + + + + + + + + + +
+
-
-
-
-
-
-

- Appliance graph (template)

+
+
+
+

+ Appliance graph (template)

+
+
+
-
-
-
- Success! - You have added a new label + Success! + You have added a new label
- @@ -177,4 +181,4 @@
Entries not valid
-{% endblock %} \ No newline at end of file +{% endblock %} From 5aa1100f5c8733eb44cdf9e7e22f9a1833c6a955 Mon Sep 17 00:00:00 2001 From: ram Date: Fri, 13 May 2016 13:41:41 -0700 Subject: [PATCH 3/4] changed look of date picker and reformatted it --- seadssite/static/css/graph.css | 28 +++- seadssite/static/js/graph.js | 1 + seadssite/templates/graph.html | 280 +++++++++++++++++---------------- 3 files changed, 167 insertions(+), 142 deletions(-) diff --git a/seadssite/static/css/graph.css b/seadssite/static/css/graph.css index 5d86919..782017a 100644 --- a/seadssite/static/css/graph.css +++ b/seadssite/static/css/graph.css @@ -3,10 +3,6 @@ height: 370px; } -/*-- Radio button formatting --*/ -input[type="radio"] { - margin: 0 15px 0 7px; -} /*-- Error text --*/ #bad { @@ -43,6 +39,30 @@ h5 { margin-top: 5px; } +#daily-date{ +height: 30px !important; +width: 150px !important; + +} + +#prev_day, #next_day{ + height: 30px !important; +} + +.input-group-btn { + width: 0%; +} + +.right { + float: right; +} + +#panels{ + float:left; + padding-left: 50px; +} + + /*-- Chart --*/ .c3 svg { diff --git a/seadssite/static/js/graph.js b/seadssite/static/js/graph.js index 0a76148..854cd2f 100644 --- a/seadssite/static/js/graph.js +++ b/seadssite/static/js/graph.js @@ -599,6 +599,7 @@ $(document).ready(function() { }); dailyDate.datetimepicker({ + defaultDate: new Date(), format: 'MM/DD/YYYY' }); diff --git a/seadssite/templates/graph.html b/seadssite/templates/graph.html index 2aa9a14..55e3002 100644 --- a/seadssite/templates/graph.html +++ b/seadssite/templates/graph.html @@ -1,184 +1,188 @@ {% extends "base.html" %} {% load static from staticfiles %} {% block content %} - + -
-
-

Daily Usage

-
-
-
-
- - - - +
+
+
+

Daily Usage

+
-
-
+
+
- - - + + +
+
+ + + + +
-
-
-
-
-
-
-

Start

-
- - - - +
+
+
+
+
+

Start

+
+ + + + +
-
-
-

End

-
- - - - +
+

End

+
+ + + + +
+
+
+

+ +
+
+

+
-
-
-

- -
-
-

-
-
-
-
-
-
-
-

- Real-time usage

-
-
-
+
+
+
+
+
+

+ Real-time usage +

+
+
+
+
-
-
-
-
-

- Usage per panel

+
+
+
+

+ Usage per panel +

+
+
+
+
-
-
+
+
+
+
+

+ Weekly usage +

+
+
+
+
-
-
-
-

- Weekly usage

+
+
+
+
+

+ Appliances (template) +

+
+
+ + + + + + + + + + +
-
-
+
+
+
+
+

+ Appliance graph (template) +

+
+
-
-
-
-
-

- Appliances (template)

+
+ Success! + You have added a new label +
+