diff --git a/context/global_vars.py b/context/global_vars.py index 7324eff529d33edf52ffeb7754605b45373fff9f..a0ecff6997f5324a24dcf53642f0a2db0209ef03 100644 --- a/context/global_vars.py +++ b/context/global_vars.py @@ -25,5 +25,6 @@ def settings_vars(context): # you may add multiple values in there. return { 'VERSION': settings.SW_VERSION, - 'BRANDING': settings.BRANDING + 'BRANDING': settings.BRANDING, + 'INSTALLED_APPS': settings.INSTALLED_APPS, } diff --git a/templates/flowspy/route_details.html b/templates/flowspy/route_details.html index 049a428a840066717d1670a7cd5f27d780e270b8..22794f4ab8246e5b86a41b21dd105c843a530fa7 100644 --- a/templates/flowspy/route_details.html +++ b/templates/flowspy/route_details.html @@ -67,28 +67,84 @@ {% endif %} </div> </div> -</div> + {% comment %}check if graphs plugin in installed apps{% endcomment %} + {% if 'graphs' in INSTALLED_APPS %} + <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> + <div class="col-md-12 graphs-wrapper" style="display: none"> + <h3>{% trans 'Graphs' %}</h3> + <div class="col-md-3"> + <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;"> + <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> + <span></span> <b class="caret"></b> + </div> + </div> + <div class="graphs col-md-12" data-url="{% url graphs route.name %}" > + loading... + </div> + </div> + {% endif %} +</div> {% endblock %} + {% block pagejsbottom %} + +{% if 'graphs' in INSTALLED_APPS %} +<script src="https://cdn.jsdelivr.net/momentjs/2.9.0/moment.min.js"></script> +<script src="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> <script type="text/javascript"> + $(document).ready(function () { + + var url = $('.graphs').data('url'); + var start = moment().subtract(1, 'days').format('X') + var end = moment().format('X') + function cb(start, end) { + $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); + $('.graphs').load(url + '?start=' + start.format('X') + '&end=' + end.format('X'), function () { + $('.graphs-wrapper').show(); + }); + } + cb(moment().subtract(29, 'days'), moment()); - $('body').on('click', ".del_button", function(){ - last_element = false; - var my = $(this); - my.html('Deactivating...') - var routename = $(this).data("routename"); - var delurl = "{% url delete-route 'route_placeholder'%}".replace('route_placeholder', routename.toString()); - $.ajax({ - type: 'POST', - url: delurl, - cache: false, - success: function(data) { - $('.del_button').addClass('disabled').text('Done'); - } + $('#reportrange').daterangepicker({ + ranges: { + 'Today': [moment().subtract(1, 'days'), moment()], + 'Yesterday': [moment().subtract(2, 'days'), moment().subtract(1, 'days')], + 'Last 7 Days': [moment().subtract(6, 'days'), moment()], + 'Last 30 Days': [moment().subtract(29, 'days'), moment()], + 'This Month': [moment().startOf('month'), moment().endOf('month')], + 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] + } + }, cb(moment().subtract(1, 'days'), moment())); + + $('body').on('apply.daterangepicker', '#reportrange', function(ev, picker) { + cb(picker.startDate, picker.endDate); + }); + + + }); +</script> +{% endif %} + +<script type="text/javascript"> + $(document).ready(function () { + $('body').on('click', ".del_button", function(){ + last_element = false; + var my = $(this); + my.html('Deactivating...') + var routename = $(this).data("routename"); + var delurl = "{% url delete-route 'route_placeholder'%}".replace('route_placeholder', routename.toString()); + $.ajax({ + type: 'POST', + url: delurl, + cache: false, + success: function(data) { + $('.del_button').addClass('disabled').text('Done'); + } + }); + return false; }); - return false; }); </script> {% endblock %}