django-musician/musician/templates/musician/dashboard.html

{% extends "musician/base.html" %}
{% load i18n %}

{% block content %}

<h2>{% trans "Welcome back" %} <strong>{{ profile.username }}</strong></h2>
<p>{% blocktrans with last_login=profile.last_login|default:"N/A" %}Last time you logged in was: {{ last_login }}{% endblocktrans %}</p>

<div class="card-deck">
  {% for resource, usage in resource_usage.items %}
  <div class="card resource-usage resource-{{ resource }}">
    <div class="card-body">
      <h5 class="card-title">{{ usage.verbose_name }}</h5>
      {% include "musician/components/usage_progress_bar.html" with detail=usage %}
    </div>
  </div>
  {% endfor %}
  <div class="card resource-usage resource-notifications">
    <div class="card-body">
      <h5 class="card-title">{% trans "Notifications" %}</h5>
      {% for message in notifications %}
      <p class="card-text">{{ message }}</p>
      {% empty %}
      <p class="card-text">{% trans "There is no notifications at this time." %}</p>
      {% endfor %}
    </div>
  </div>
</div>


<h1 class="service-name">{% trans "Your domains and websites" %}</h1>
<p class="service-description">Little description of what to be expected...</p>

{% for domain in domains %}
<div class="card service-card">
  <div class="card-header">
    <div class="row">
      <div class="col-md">
        <strong>{{ domain.name }}</strong>
      </div>
      <div class="col-md-8">
        <button type="button" class="btn text-secondary" data-toggle="modal" data-target="#configDetailsModal"
          data-domain="{{ domain.name }}" data-username="john" data-password="s3cre3t" data-root="/domainname/"
          data-url="{% url 'musician:domain-detail' domain.id %}">
            {% trans "view configuration" %} <strong class="fas fa-tools"></strong>
        </button>
      </div>
      <div class="col-md text-right">
          {% trans "Expiration date" %}: <strong>{{ domain.expiration_date|date:"SHORT_DATE_FORMAT" }}</strong>
      </div>
    </div>
  </div><!-- /card-header-->
  <div class="card-body row text-center">
      <div class="col-md-2 border-right">
          <h4>{% trans "Mail" %}</h4>
          <p class="card-text"><i class="fas fa-envelope fa-3x"></i></p>
          <p class="card-text text-dark">
            {{ domain.mails|length }} {% trans "mail addresses created" %}
            {% if domain.address_left.alert %}
            <br/>
            <span class="text-{{ domain.address_left.alert }}">{{ domain.address_left.count }} mail address left</span>
            {% endif %}
          </p>
          <a class="stretched-link" href="{% url 'musician:mails' %}?domain={{ domain.id }}"></a>
      </div>
      <div class="col-md-2 border-right">
          <h4>{% trans "Mail list" %}</h4>
          <p class="card-text"><i class="fas fa-mail-bulk fa-3x"></i></p>
          <a class="stretched-link" href="{% url 'musician:mailing-lists' %}?domain={{ domain.id }}"></a>
      </div>
      <div class="col-md-2 border-right">
          <h4>{% trans "Databases" %}</h4>
          <p class="card-text"><i class="fas fa-database fa-3x"></i></p>
          <p class="card-text text-dark">
            0 {% trans "databases created" %}
            {% comment %}
            <!-- TODO databases related to a domain and resource usage
            {{ domain.databases|length }} {% trans "databases created" %}<br/>
            20 MB of 45MB
            -->
            {% endcomment %}
          </p>
          <a class="stretched-link" href="{% url 'musician:databases' %}?domain={{ domain.id }}"></a>
      </div>
      <div class="col-md-2 border-right">
          <h4>{% trans "Software as a Service" %}</h4>
          <p class="card-text"><i class="fas fa-fire fa-3x"></i></p>
          <p class="card-text text-dark">Nothing installed</p>
          <a class="stretched-link" href="{% url 'musician:saas' %}?domain={{ domain.id }}"></a>
      </div>
      <div class="col-md-4">
          <h4>{% trans "Disk usage" %}</h4>
          <p class="card-text"><i class="fas fa-hdd fa-3x"></i></p>
          <div class="w-75 m-auto">
          {% include "musician/components/usage_progress_bar.html" with detail=domain.usage %}
          </div>
      </div>
  </div>
</div>

{% endfor %}

<!-- configuration details modal -->
<div class="modal fade" id="configDetailsModal" tabindex="-1" role="dialog" aria-labelledby="configDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title text-secondary" id="configDetailsModalLabel">Configuration details</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <h6 class="pl-4 mb-4">{% trans "FTP access:" %}</h6>
          <div class="">
            <p>
              <label>{% trans "Username" %}:</label> <span id="config-username" class="font-weight-bold">username</span><br/>
              <label>{% trans "Password:" %}</label> <span id="config-password" class="font-weight-bold">password</span>
            </p>
            <p class="border-top pt-3"><label>Root directory:</label> <span id="config-root" class="font-weight-bold">root directory</span></p>
          </div>
        </div>
        <div class="modal-footer">
          <a href="#domain-detail" class="btn btn-primary">{% trans "View DNS records" %}</a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
{% block extrascript %}
<script>
$('#configDetailsModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var modal = $(this);

  // Extract info from data-* attributes
  modal.find('.modal-title').text(button.data('domain'));
  modal.find('.modal-body #config-username').text(button.data('username'));
  modal.find('.modal-body #config-password').text(button.data('password'));
  modal.find('.modal-body #config-root').text(button.data('root'));
  modal.find('.modal-footer .btn').attr('href', button.data('url'));
})
</script>
{% endblock %}