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="projectQuotaTpl" type="text/template">

  {% verbatim %}

  <div class="resource-bar project clearfix project-{{id}} {{ usage.cls }}"

      data-project="{{ id }}">

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

        <h3>{{ name }}</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>

  </div>

  {% endverbatim %}

</script>

<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="summary resource-bar clearfix {{ usage.cls }}">

      <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>

          <!--<span class="resource-extend">details</span>-->

      </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>

  </div>

  <div class="projects">

  </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 %}',

    'projects_url': '{% url astakos.api.projects.projects %}',

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

    'dataType': 'json',

    'container': '#quota-container',

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

    'meta': {

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

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

      'projects_details': {{ projects_details|safe }},

      'resources_order': {{ resources_order|safe }}

    }

  });

  window.usageView = usageView;

  window.setInterval(function(){

    window.usageView.updateQuotas();

  }, {{ usage_update_interval }});

})

</script>

{% endblock %}