ihrm/project/templates/cbv/projects/projects.html

{% extends "index.html" %}
{% load i18n static %}

{% block content %}
<style>
    .expired--dot{
        background-color:gray;
    }
    .cancelled--dot{
        background-color:red;
    }
    .on-hold--dot{
        background-color:orange;
    }
    .completed--dot{
        background-color:yellowgreen;
    }
    .in-progress--dot{
        background-color: rgb(103, 171, 238);
    }
    .new--dot{
        background-color: cyan;
    }
    .status-completed{
        border-left: 3.4px solid yellowgreen !important;
        border-radius: 4px 0 0 4px;

    }
    .status-cancelled {

        border-left: 3.4px solid red !important;
        border-radius: 4px 0 0 4px;

    }
    .status-expired {

        border-left: 3.4px solid gray !important;
        border-radius: 4px 0 0 4px;

    }
    .status-on_hold {

        border-left: 3.4px solid orange !important;
        border-radius: 4px 0 0 4px;

    }
    .status-in_progress {

        border-left: 3.4px solid rgb(103, 171, 238); !important;
        border-radius: 4px 0 0 4px;

    }
    .status-new {

        border-left: 3.4px solid cyan !important;
        border-radius: 4px 0 0 4px;

    }
    .oh-badge {
        display: inline-block;
        padding: 0.25rem;
        text-align: center;
    }
    .oh-badge--small {
        margin-top: 0px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        display: flex !important;
        font-size: 0.7rem !important;
        align-items: center !important;
        width: fit-content;
        justify-content: center !important;
        padding: 0.1rem 0.5rem;
        height: fit-content;
        border-radius: 30px;
    }

    .oh-badge--round {
        display: flex;
        justify-content: center;
    }

    .oh-badge--secondary {
        background-color: hsl(8, 77%, 56%);
        color: hsl(0, 0%, 100%);
    }
</style>

<div
    hx-get="{% url 'project-nav-view' %}?{{request.GET.urlencode}}"
    hx-trigger="load"
></div>

<div
    class="oh-checkpoint-badge mb-2"
    id="selectedInstances"
    data-ids="[]"
    data-clicked=""
    style="display: none"
></div>

<div class="oh-wrapper" id="listContainer">
    <div class="animated-background"></div>
</div>

<div
    class="oh-modal"
    id="projectImport"
    role="dialog"
    aria-labelledby="projectImport"
    aria-hidden="true"
>
    <div class="oh-modal__dialog">
        <div class="oh-modal__dialog-header">
            <h2 class="oh-modal__dialog-title" id="projectImportLavel">
                {% trans "Import Project" %}
            </h2>
            <button class="oh-modal__close" aria-label="Close">
                <ion-icon name="close-outline"></ion-icon>
            </button>
            <div
                class="oh-modal__dialog-body p-0 pt-2"
                id="projectImportModalBody"
            >
                <form id="projectImportForm" enctype="multipart/form-data">
                    <div id="loading" style="display: none">
                        <div id="progress">
                            <div
                                class="progress-bar"
                                role="progressbar"
                                style="width: 0%"
                                aria-valuenow="0"
                                aria-valuemin="0"
                                aria-valuemax="100"
                            ></div>
                        </div>
                        <p id="progress-text">{% trans "Uploading..." %}</p>
                    </div>

                    <div id="error-container" style="color: red"></div>

                    <div class="modal-body">
                        {% csrf_token %}

                        <div class="oh-dropdown__import-form">
                            <label
                                class="oh-dropdown__import-label"
                                for="uploadFile"
                            >
                                <ion-icon
                                    name="cloud-upload"
                                    class="oh-dropdown__import-form-icon md hydrated"
                                    role="img"
                                    aria-label="cloud upload"
                                ></ion-icon>
                                <span class="oh-dropdown__import-form-title"
                                    >{% trans "Upload a File" %}</span
                                >
                                <span class="oh-dropdown__import-form-text"
                                    >{% trans "Drag and drop files here" %}</span
                                >
                            </label>
                            <input
                                type="file"
                                name="file"
                                id="projectImportFile"
                            />
                        </div>
                    </div>
                    <div class="modal-footer d-flex flex-row-reverse">
                        <input
                            type="submit"
                            class="oh-btn oh-btn--secondary"
                            value="{% trans 'Upload' %}"
                        />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="{% static 'cbv/deleteFunc.js' %}"></script>
<script src="{% static '/project/import.js' %}"></script>
<script src="{% static '/project/project_action.js' %}"></script>

{% endblock %}