Synnefo

{% extends "im/account_base.html" %}

{% load filters astakos_tags %}

{% block headjs %}

{{ block.super }}

<script src="{{ IM_STATIC_URL }}js/usage.js"></script>        

{% endblock %}

{% block page.title %}Usage{% endblock %}

{% block page.body %}

<script id="quotaTpl" type="text/template">

  {% verbatim %}

  {{#resources}}

  <li class="clearfix {{ resource_name }} {{ usage.cls }}" 

      data-resource="{{ name }}">

  <div class="img-wrap">&nbsp;</div>

  <div class="info" data-currvalue="" data-maxvalue="">

    <h3>{{ report_desc }}</h3>

    <p>

      <span class="currValue">{{ usage.curr }}</span> out of 

      <span class="maxValue">{{ usage.max }}</span> {{ report_desc }}

    </p>

  </div>

  <div class="bar">

    <div>

        <span style="width:{{ usage.perc }}%"></span>

        <em 

            class="value" 

            style="left: {{ usage.label_left }}%; color: {{ usage.label_color }}">

            {{ usage.perc }}%

        </em>

    </div>

  </div>

  </li>

  {{/resources}}

  {% endverbatim %}

</script>

<div class="maincol {% block innerpage.class %}{% endblock %}"> 

    <h2>RESOURCE USAGE</h2>

    <div id="quota-container">

    </div>

</div>

<script>

$(document).ready(function(){

  var usageView = new UsageView({

    'url': '{% url astakos-api-quotas %}',

    'cookie_name': '{{ token_cookie_name|safe }}',

    'dataType': 'json',

    'container': '#quota-container',

    'quotas': {{ current_usage|safe }},

    'meta': {

      'resources': {{ resource_catalog|safe }},

      'groups': {{ resource_groups|safe }},

      'resources_order': {{ resources_order|safe }}

    }

  });

  window.usageView = usageView;

  window.setInterval(function(){

    window.usageView.updateQuotas();

  }, {{ usage_update_interval }});

})

</script>

{% endblock %}