PyRIGS/users/templates/profile_detail.html

{% extends is_ajax|yesno:"base_ajax.html,base_rigs.html" %}

{% load static %}
{% load linkornone from filters %}

{% block js %}
    <script src="{% static 'js/clipboard.min.js' %}"></script>
    <script>
        ready(function() {
            var form = document.getElementById('urlParamForm');
            if (!form) { return; }
            function updateUrls() {
                var calUrl = document.getElementById('cal-url');
                if (!calUrl) { return; }
                var url = "?";
                form.querySelectorAll('input, select, textarea').forEach(function(input){
                    var defaultVal = input.dataset.default;
                    // jQuery used to parse data-default into a boolean
                    if (defaultVal === 'true') { defaultVal = true; } else if (defaultVal === 'false') { defaultVal = false; }
                    var param = input.value;
                    var val = input.checked;
                    if(val !== defaultVal){
                        url = url+param+"="+val+"&";
                    }
                });
                var ics_url = document.getElementById('cal-url').dataset.url + url.substring(0, url.length - 1);
                document.getElementById('cal-url').textContent = ics_url;
                var gcal_url = document.getElementById('gcal-link').dataset.url + encodeURIComponent(url.substring(0, url.length - 1));
                document.getElementById('gcal-link').setAttribute('href', gcal_url);
            }
            form.addEventListener('change', updateUrls);
            updateUrls(); //Do the initial setting
        });
        var clipboard = new ClipboardJS('.btn');
        clipboard.on('success', function(e) {
            var popover = bootstrap.Popover.getOrCreateInstance(e.trigger, {trigger: 'manual'});
            popover.show();
            window.setTimeout(function () {popover.hide()}, 3000);
            e.clearSelection();
        });
    </script>
{% endblock %}

{% block content %}
    {% if not is_ajax and object.pk == user.pk %}
        <div class="row py-3">
            <div class="col text-end">
                <div class="btn-group">
                    <a href="{% url 'profile_update_self' %}" class="btn btn-warning">
                        Edit Profile <span class="fas fa-edit"></span>
                    </a>
                    <a href="{% url 'password_change' %}" class="btn btn-light">
                        Change Password <span class="fas fa-lock"></span>
                    </a>
                </div>
            </div>
        </div>
    {% endif %}
    <div class="row">
        <div class="col-lg-4 col-12 mb-2">
            <div class="card">
                <img src="{{object.profile_picture}}" class="card-img img-fluid" />
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-5">First Name</dt>
                        <dd class="col-7">{{object.first_name}}</dd>

                        <dt class="col-5">Last Name</dt>
                        <dd class="col-7">{{object.last_name}}</dd>

                        <dt class="col-5">Email</dt>
                        <dd class="col-7">{{object.email}}</dd>

                        <dt class="col-5">Last Login</dt>
                        <dd class="col-7">{{object.last_login|date:"d/m/Y H:i"}}</dd>

                        <dt class="col-5">Date Joined</dt>
                        <dd class="col-7">{{object.date_joined|date:"d/m/Y H:i"}}</dd>

                        <dt class="col-5">Initials</dt>
                        <dd class="col-7">{{object.initials}}</dd>

                        <dt class="col-5">Phone</dt>
                        <dd class="col-7">{{object.phone|linkornone:'tel'}}</dd>
                    </dl>
                </div>
             </div>
        </div>
        {% if not is_ajax and object.pk == user.pk %}
            <div class="col-lg-8 col-12">
                <div class="card">
                    <div class="card-header">Personal iCal Details</div>
                    <div class="card-body">
                        <dl class="row">
                            <dt class="col-4">API Key</dt>
                            <dd class="col-8">
                                {% if user.api_key %}
                                    <code id="api-key">{{user.api_key}}</code>
                                    <button class="btn btn-secondary align-middle pe-1 btn-sm" data-clipboard-target="#api-key" data-bs-content="Copied to clipboard!"><span class="fas fa-clipboard"></span></button>
                                {% else %}
                                    <span id="api-key">No API Key Generated</span>
                                {% endif %}
                                <a href="{% url 'reset_api_key' %}" class="btn btn-secondary align-middle pe-1">
                                    {% if user.api_key %}Reset API Key{% else %}Generate API Key{% endif %}
                                    <span class="fas fa-redo"></span>
                                </a>
                            </dd>
                            <dt class="col-4">Calendar Options</dt>
                            <dd class="col-8">
                                <form id="urlParamForm">
                                    <div class="mb-3 d-flex flex-column flex-lg-row">
                                        <label class="checkbox-inline me-lg-2">
                                            <input type="checkbox" value="rig" data-default="true" checked> Rigs
                                        </label>
                                        <label class="checkbox-inline mx-lg-2">
                                            <input type="checkbox" value="non-rig" data-default="true" checked> Non-Rigs
                                        </label>
                                        <label class="checkbox-inline mx-lg-2">
                                            <input type="checkbox" value="dry-hire" data-default="true" checked> Dry-Hires
                                        </label>
                                        <label class="checkbox-inline mx-lg-2">
                                            <input type="checkbox" value="cancelled" data-default="false" > Cancelled
                                        </label>
                                        <label class="checkbox-inline mx-lg-2">
                                            <input type="checkbox" value="provisional" data-default="true" checked> Provisional
                                        </label>
                                        <label class="checkbox-inline ms-lg-2">
                                            <input type="checkbox" value="confirmed" data-default="true" checked> Confirmed/Booked
                                        </label>
                                        <label class="checkbox-inline ms-lg-2">
                                            <input type="checkbox" value="only_mic" data-default="false" > Only MIC
                                        </label>
                                    </div>
                                </form>
                            </dd>
                            <dt class="col-4">Calendar URL</dt>
                            <dd class="col-8">
                                {% if user.api_key %}
                                    <code id="cal-url" data-url="http{{ request.is_secure|yesno:"s,"}}://{{ request.get_host }}{% url 'ics_calendar' api_pk=user.pk api_key=user.api_key %}"></code>
                                    <button class="btn btn-secondary align-middle btn-sm pe-1" data-clipboard-target="#cal-url" data-bs-content="Copied to clipboard!"><span class="fas fa-clipboard"></span></button>
                                    <br>
                                    <small><a id="gcal-link" data-url="https://support.google.com/calendar/answer/37100" href="">Click here</a> for instructions on adding to google calendar.<br/>
                                        To sync from Google Calendar to mobile device, visit <a href="https://www.google.com/calendar/syncselect" target="_blank">this page</a> on your device and tick "RIGS Calendar".</small>
                                {% else %}
                                    <pre>No API Key Generated</pre>
                                {% endif %}
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        {% endif %}

    </div>
    <div class="row">
        <div class="col col-lg-6 mb-2">
            <div class="card">
                <div class="card-header">Training Record</div>
                <div class="card-body">
                    <a href="{% url 'trainee_detail' object.pk %}" class="btn btn-primary"><span class="fas fa-eye"></span> View Training Record</a>
                    {% include 'partials/add_qualification.html' %}
                    <ul class="list-group pt-3">
                        <li class="list-group-item active">Achieved Levels:</li>
                        {% for qual in completed_levels %}
                        <a href="{% url 'level_detail' qual.level.pk %}"class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">{{ qual.level }}{{ qual.get_icon }}</a>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">Events</div>
                <div style="container-type: size; height: 30vh; overflow-y: scroll;">
                {% with object.latest_events as events %}
                    {% include 'partials/event_table.html' %}
                {% endwith %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}