cv_database/flask_app/app/templates/index.html

{% extends base %}
{% block head_extra %}
<style>
.label {
font-weight: bold;
}
</style>
{% endblock %}

{% block content %}
{% import "macros/action_icons_static.html" as icons with context %}
<span class="title"><h2>{% block title %}Landing page{% endblock %}</h2></span>
<div class="content-container content">
<div id="div_filter" class="div_data_filtering">
<h3>Filtering/Searching options</h3>
<form action="{{ url_for("main.index") }}" method="post" id="frm_filters">
{{ filter_form.csrf_token }}
{{ filter_form.hid_page }}
<!-- Buttons -->
<div style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
<button type="submit" name="btn_filter" value="Apply Filters" style="background-color: rgb(39, 37, 92); color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer;">
{{ icons.search_svg(s_label="apply filters") }}
Search
</button>
<button type="button" id="btn_clear_filter" name="btn_clear_filter" value="Clear Filters" style="background-color: rgb(39, 37, 92); color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer;">
{{ icons.delete_svg(s_label="remove filters") }}
Clear
</button>
<label for="chk_case_sensitive" style="font-size: 12px; margin-left: 15px;">
{{ filter_form.chk_case_sensitive }}
Case-sensitive search
</label>
</div>
<!-- end of div for buttons -->

<!-- div containing filter Rows -->
<div class="div_filter_row" style="margin-bottom: 20px;">

<!-- Department and Role -->
<div style="flex: 1 1 200px;">
{{ filter_form.sel_role_department.label }}
{{ filter_form.sel_role_department(style="width: 100%; padding: 6px;") }}
{{ filter_form.sel_role.label(style="margin-top: 10px;") }}
{{ filter_form.sel_role(style="width: 100%; padding: 6px;") }}
</div>

<!-- Name -->
<div style="flex: 1 1 200px;">
{{ filter_form.txt_name.label }}
{{ filter_form.txt_name(style="width: 100%; padding: 6px;") }}
</div>

<!-- Surname -->
<div style="flex: 1 1 200px;">
{{ filter_form.txt_surname.label }}
{{ filter_form.txt_surname(style="width: 100%; padding: 6px;") }}
</div>

<!-- ID/Passport -->
<div style="flex: 1 1 200px;">
{{ filter_form.txt_id_number.label }}
{{ filter_form.txt_id_number(style="width: 100%; padding: 6px;") }}
</div>

<!-- Language -->
<div style="flex: 1 1 200px;">
{{ filter_form.sel_language.label }}
{{ filter_form.sel_language(style="width: 100%; padding: 6px;") }}
</div>
</div>
<!-- end of first div.div_filter_row containing filter rows -->

<!-- Second Filter Row -->
<div class="div_filter_row">
<!-- SAP K-Level -->
<div style="flex: 1 1 200px;">
{{ filter_form.sel_sap_k_level.label }}
{{ filter_form.sel_sap_k_level(style="width: 100%; padding: 6px;") }}
</div>

<!-- Qualification Type 1 & Qualification 1 -->
<div style="flex: 1 1 200px;">
{{ filter_form.sel_qualification_type_1.label }}
{{ filter_form.sel_qualification_type_1(style="width: 100%; padding: 6px;") }}

{{ filter_form.sel_qualification_1.label }}
{{ filter_form.sel_qualification_1(style="width: 100%; padding: 6px;") }}
</div>

<!-- Qualification Type 2 & Qualification 2 -->
<div style="flex: 1 1 200px;">
{{ filter_form.sel_qualification_type_2.label }}
{{ filter_form.sel_qualification_type_2(style="width: 100%; padding: 6px;") }}

{{ filter_form.sel_qualification_2.label }}
{{ filter_form.sel_qualification_2(style="width: 100%; padding: 6px;") }}
</div>
</div>
<!-- end of div.div_filter_row containing filter rows -->
</form>
</div>
<!-- end of div.div_data_filtering -->

{% if records %}
<h3>Records</h3>
<div class="table-container">
<table class="data-table" id="tbl_records">
<thead>
<tr>
<th>Surname</th><th>First name</th><th>Years experience</th><th>Contact number</th><th>E-mail</th><th>Qualifications</th><th style="font-size: smaller;">[actions]</th>
</tr>
</thead>
{% for record in records %}
<tr>
<td>{{ record.v_surname }}</td><td>{{ record.v_name_1 }}</td><td>{{ record.si_years_experience }}</td><td>{{ record.v_contact_number }}</td><td>{{ record.v_email }}</td><td>
{% if record.record_qualifications %}
<ul>
{% for qualification in record.record_qualifications %}
<li>
{{ qualification.v_qualification_type }} - {{ qualification.v_qualification_name}} - {{ qualification.d_acquired|date_format }}
</li>
{% endfor %}{# end of looping through qualifications #}
</ul>
{% else %}
&nbsp;
{% endif %}{# end of checking if there are qualifications per record #}
</td>
<td>
<ul>
<li><a href="#{{ record.id }}" class="a_view_details">{{ icons.view_svg() }}</a></li>
{% if current_user.bl_admin %}
<li><a href="{{ url_for("main.capture_record", i_record=record.id) }}">{{ icons.edit_svg() }}</a></li>
{% endif %}
</ul>
</td>
</tr>
{% endfor %}{# end of looping through records #}
</table><!-- end of tbl_records -->
</div><!-- end of div.table-container -->
<div class="paging">
<div>Paging...</div>

{#
{% if paging.has_prev %}
<!-- prev_num --><span><a class="a_page_number" href="#{{ paging.prev_num }}"{{ "<<" }}</a></span>
{% endif %}
#}

{% for number in paging.iter_pages() %}
{% if paging.page != number %}
<!-- page_num --><span><a class="a_page_number" href="#{{ number }}">{{ number }}</a></span>&nbsp;&nbsp;
{% else %}
<!-- current_num --><span class="current-page-number">{{ number }}</span>&nbsp;&nbsp;
{% endif %}
{% endfor %}

{#
{% if paging.has_next %}
<span>
<!-- next_num --><a class="a_page_number" href="#{{ paging.next_num }}">{{ ">>" }}</a></span>
{% endif %}
#}

</div><!-- end of div.paging -->
{% endif %}{# end of checking if records existed #}
</div><!-- end of div.content -->
{% from "macros/dialog.html" import dlg_prep with context %}
{{ dlg_prep(["dlg_details"]) }}
{# dlg divs below #}
<div id="dlg_details" aria-labeledby="spn_details">
<span id="spn_details">Record details</span><br>
<a href="#" id="a_full_screen" style="font-size: smaller;">(view full-screen)</a><br>
<div id="div_details">
<h4>Details</h4>
<ul id="ul_details"></ul>
<span id="spn_languages">
<h4>Languages</h4>
<ul id="ul_languages"></ul>
</span>
<span id="spn_qualifications">
<h4>Qualifications</h4>
<ul id="ul_qualifications"></ul>
</span>
</div><!-- end of div_details -->
<div id="div_uploads">
<h4>Uploads</h4>
<ul id="ul_uploads"></ul>
</div>
<span id="spn_tenders">
<h4>Prior Tenders</h4>
<ul id="ul_tenders"></ul>
</span>
</div><!-- end of dlg_details -->
<script type="text/javascript">
$(document).ready( function() {

try {

var s_dlg_details = $("#dlg_details").html();

$("#sel_role_department").change( function(event) {
    var s_id = String($(this).val());
    // roles_list(i_department_id)
    // id, v_role_name
    $("#sel_role").empty();
    var s_html = "<option value=\"0\" selected>---</option>\n";
    var s_url = "{{ url_for("main.roles_list", i_department_id=99999) }}".replace("99999", s_id);
    $.get(s_url, function(o_roles) {
        if (typeof(o_roles)=="object") {
            $.each(o_roles, function(ix, o_role) {
                s_html = s_html + "<option value=\"" + String(o_role.id) + "\">" + String(o_role.v_role_name) + "</option>\n";
            });// end of .each against o_roles
            $("#sel_role").html(s_html);
            $("#sel_role").redraw();
        }// end of typeof check against o_roles
    });// end of .get
    do_alert("Roles listing updated");
});// end of sel_department change event

$("#sel_qualification_type_1").change( function(event) {
    var s_id = String($(this).val());
    // qualifications_list(i_type_id)
    // id, v_qualification_name
    $("#sel_qualification_1").empty();
    var s_html = "<option value=\"0\" selected>---</option>\n";
    var s_url = "{{ url_for("main.qualifications_list", i_type_id=99999) }}".replace("99999", s_id);
    $.get(s_url, function(o_qualifications) {
        if (typeof(o_qualifications)=="object") {
            $.each(o_qualifications, function(ix, o_qualification) {
                s_html = s_html + "<option value=\"" + String(o_qualification.id) + "\">" + String(o_qualification.v_qualification_name) + "</option>\n";
            });// end of .each against o_qualifications
            $("#sel_qualification_1").html(s_html);
            $("#sel_qualification_1").redraw();
        }// end of typeof check against o_qualifications
    });// end of .get
    do_alert("Roles listing 1 updated");
});// end of sel_qualification_type_1 change event

$("#sel_qualification_type_2").change( function(event) {
    var s_id = String($(this).val());
    // qualifications_list(i_type_id)
    // // id, v_qualification_name
    $("#sel_qualification_2").empty();
    var s_html = "<option value=\"0\" selected>---</option>\n";
    var s_url = "{{ url_for("main.qualifications_list", i_type_id=99999) }}".replace("99999", s_id);
    $.get(s_url, function(o_qualifications) {
        if (typeof(o_qualifications)=="object") {
            $.each(o_qualifications, function(ix, o_qualification) {
                s_html = s_html + "<option value=\"" + String(o_qualification.id) + "\">" + String(o_qualification.v_qualification_name) + "</option>\n";
            });// end of .each against o_qualifications
            $("#sel_qualification_2").html(s_html);
            $("#sel_qualification_2").redraw();
        }// end of typeof check against o_qualifications
    });// end of .get
    do_alert("Roles listing 2 updated");
});// end of sel_qualification_type_2 change event

$("#btn_clear_filter").click( function(event) {
    event.preventDefault();
    // checkbox
    $("#chk_case_sensitive").prop("checked", false);
    // text boxes
    $.each(["#txt_name", "#txt_surname", "#txt_id_number"], function(ix, ss) { $(ss).val(""); });
    // dependant selects first
    $.each(["#sel_role", "#sel_qualification_1", "#sel_qualification_2"], function(ix, ss) { $(ss).prop("selectedIndex", 0); });
    // categorical selects
    $.each(["#sel_role_department", "#sel_language", "#sel_sap_k_level", "#sel_qualification_type_1", "#sel_qualification_type_2"], function(ix, ss) { $(ss).prop("selectedIndex", 0); });
    document.getElementById("frm_filters").submit();
});// end of btn_clear_filter click event

$(".a_view_details").click( function(event) {
try {
    event.preventDefault();
    $("#dlg_details").html(s_dlg_details);
    $("#dlg_details").redraw();
    var s_id = String($(this).attr("href")).replace("#", "");
    var s_url = "{{ url_for("main.record_details", i_record_id=99999) }}".replace("99999", s_id);
    $.get(s_url, function(o_data) {
        if (typeof(o_data)=="object") {
            var s_html = "";
            if (typeof(o_data.record)=="object") {
                s_html = "<li><span class=\"label\">Surname:</span>&nbsp;" + String(o_data.record["v_surname"]) + "</li></li>\n";
                var s_names = [o_data.record["v_name_1"], o_data.record["v_name_2"], o_data.record["v_name_3"]].join(" ").trim();
                s_html = s_html + "<li><span class=\"label\">Name(s):</span>&nbsp;" + s_names + "</li>\n";
                s_html = s_html + "<li><span class=\"label\">I.D./Passport Number:</label>&nbsp;" + String(o_data.record["v_id_number"]) + "</li>\n";
                s_html = s_html + "<li><span class=\"label\">Gender:</label>&nbsp;" + String(o_data.record["c_gender"]).toUpperCase() + "</li>\n";
                s_html = s_html + "<li><span class=\"label\">Years Experience:</label>&nbsp;" + String(o_data.record["si_years_experience"]) + "</li>\n";
                s_html = s_html + "<li><span class=\"label\">SAP K-Level:</label>&nbsp;" + String(o_data.record["v_sap_k_level"]) + "</li>\n";
                s_html = s_html + "<li><span class=\"label\">Contact Number:</label>&nbsp;" + String(o_data.record["v_contact_number"]) + "</li>\n";
                s_html = s_html + "<li><span class=\"label\">E-Mail Address:</label>&nbsp;" + String(o_data.record["v_email"]) + "</li>\n";
                s_html = s_html + "<li><span class=\"label\">Employment Department/Division:</label>&nbsp;" + String(o_data.record["v_department_name"]) + "</li>\n";
                s_html = s_html + "<li><span class=\"label\">Employment Position/Role:</label>&nbsp;" + String(o_data.record["v_role_name"]) + "</li>\n";
                $("#ul_details").append(s_html);
            }// end of typeof check against basic details
            // languagess
            s_html = "";
            if (typeof(o_data.languages)=="object") {
            if (o_data.languages.length>0) {
                $.each(o_data.languages, function(ix, l) {
                    s_html = s_html + "<li><ul>";
                    s_html = s_html + "<li><span class=\"label\">Language:</span>&nbsp;" + String(l.v_language_name) + " (" + String(l.v_language_abbreviation) + ")</li>\n";
                    s_html = s_html + "<li><span class=\"label\">Level:</span>&nbsp;" + String(l.level) + "</li>\n";
                    s_html = s_html + "</ul></li>\n";
                });// end of looping through languages
                $("#ul_languages").append(s_html);
            } else {
                $("#spn_languages").hide();
            }// end of .length check against languages
            } else {
                $("#spn_languages").hide();
            }// end of typeof check against language data
            // tenders
            s_html = "";
            if (typeof(o_data.tenders)=="object") {
            if (o_data.tenders.length>0) {
                $.each(o_data.tenders, function(ix, t) {
                    s_html = s_html + "<li><span class=\"label\">Reference no.:</span>&nbsp;" + String(t.v_reference_number) + "</li>\n";
                    s_html = s_html + "</ul>\n";
                });// end of looping through tenders
                $("#ul_tenders").append(s_html);
            } else {
                $("#spn_tenders").hide();
            }// end of .length check against languages
            } else {
                $("#spn_tenders").hide();
            }// end of typeof check against prior tender data
            // qualifications
            if (typeof(o_data.qualifications)=="object") {
            if (o_data.qualifications.length>0) {
                $.each(o_data.qualifications, function(ix, q) {
                    s_html = s_html + "<li><ul>";
                    s_html = s_html + "<li><span class=\"label\">Qualification Type:</span>&nbsp;" + String(q.v_qualification_type) + "</li>\n";
                    s_html = s_html + "<li><span class=\"label\">Qualification Name:</span>&nbsp;" + String(q.v_qualification_name) + "</li>\n";
                    s_html = s_html + "<li><span class=\"label\">Acquired Date:</span>&nbsp;" + String(q["d_acquired"]) + "</li>\n";
                    s_html = s_html + "</ul></li>\n";
                });// end of looping through qualifications
                $("#ul_qualifications").append(s_html);
            } else {
                $("#spn_qualifications").hide();
            }// end of .length check against qualifications
            } else {
                $("#spn_qualifications").hide();
            }// end of typeof check against qualifications
            if (typeof(o_data.uploads)=="object") {
            if (o_data.uploads.length>0) {
                // uploaded documents
                s_html = "";
                $.each(o_data.uploads, function(ix, u) {
                    s_html = s_html + "<li><ul>";
                    s_html = s_html + "<li><span class=\"label\">Document Type:</span>&nbsp;" + String(u.si_upload_type) + "</li>\n";
                    s_url_download = "{{ url_for("main.download_upload", i_upload=99999, bl_download=True) }}".replace("99999", String(u["id"]));
                    s_url_view = "{{ url_for("main.download_upload", i_upload=99999, bl_download=False) }}".replace("99999", String(u["id"]));
                    s_html = s_html + "<li><span class=\"label\">File Name:</span>&nbsp;<a href=\"" + s_url_download + "\" target=\"_blank\"> download - " + String(u["v_filename"]) + "</a>&nbsp;<a href=\"" + s_url_view + "\" target=\"_blank\"> view - " + String(u["v_filename"]) + "</a></li>\n";
                    s_html = s_html + "<li><span class=\"label\">Description:</span>&nbsp;" + String(u["v_description"]) + "</li>\n";
                    if (String(u["v_qualification_name"])!="null") { s_html = s_html + "<li><span class=\"label\">Matching Qualification:</span>&nbsp;" + String(u["v_qualification_name"]) + "</li>\n"; }
                    s_html = s_html + "</ul></li>\n";
                });// end of looping through uploads
                $("#ul_uploads").append(s_html);
            } else {
                $("#div_uploads").hide();
            }// end of length check against o_data.uploads
            } else {
                $("#div_uploads").hide();
            }// end of typeof check against uploads
            $("#dlg_details").redraw();
            $("#dlg_details").dialog("open");
        } else {
            do_alert(String(o_data));
        }// end of typeof check against o_data
    });// end of .get
} catch(e) {
    var s_err = String(e.name) + "\nmessage:" + String(e.message);
    s_err = (typeof(e.lineNumber)!="undefined") ? s_err + "\nline:" + String(e.lineNumber) : s_err;
    alert("Error! " + s_err);
}//end of catch
});// end of .a_view_details click event

function jump_page(i_page) {
    i_page = (isNaN(i_page)) ? 1 : Number(i_page);
    $("#hid_page").val(i_page);
    document.getElementById("frm_filters").submit();
}// end of jump_page function

$(".a_page_number").click( function(event) {
    event.preventDefault();
    var s_page = String($(this).attr("href")).replace("#", "");
    i_page = (isNaN(s_page)) ? 1 : Number(s_page);
    jump_page(i_page);
});// end of .a_page_number function

$("#dlg_details").on("click", "#a_full_screen", function(event) {
    event.preventDefault();
try {
    var s_html = "<!doctype html>\n<html lang=\"en\">\n<head>\n<title>C.V. details</title>\n</head>\n<body>\n<a href=\"#\" onclick=\"window.close();\">(close)</a><br>\n";
    s_html = s_html + $("#div_details").html();
    s_html = s_html + "</body>\n</html>";
    var w = window.open();
    w.document.write(s_html);
    //w.close();
} catch(e) {
    var s_err = String(e.name) + "\nmessage:" + String(e.message);
    s_err = (typeof(e.lineNumber)!="undefined") ? s_err + "\nline:" + String(e.lineNumber) : s_err;
    alert("Error! " + s_err);
}//end of catch
});// end of a_full_screen click event

window.setTimeout( function() {
    var s_nada = ""; //alert("hello world");
}, 300);
var s = "nada"; // do_alert("hello world");

} catch(e) {
    var s_err = String(e.name) + "\nmessage:" + String(e.message);
    s_err = (typeof(e.lineNumber)!="undefined") ? s_err + "\nline:" + String(e.lineNumber) : s_err;
    alert("Error! " + s_err);
}//end of catch

});// end of secondary document ready
</script>
{% endblock %}