redesigned

employee_module/static/css/employee_module_base.css

@@ -1,32 +1,39 @@
 
 #hr_module_main_container {
-    padding: 1%;
+    padding-top: 10px;
+    padding-left: 10px;
     float: left;
-    width: 80%;
+    width: 78%;
     height: 100%;
     background-color: whitesmoke;
     text-align: center;
 }
-
-.sidebar {
-    background-color: #8b0000;
+#sidebar {
+    background-color: #202831;
     width: 18%;
     height: 100%;
     float: left;
+    padding: 10px;
 }
 
 .sidebar_item {
-    background-color: navajowhite;
-    margin-right: 6px;
-    margin-left: 6px;
-    margin-top: 6px;
+    background-color: #202831;
     padding: 10px;
     font-size: 20px;
+    color: #7F8B94;
+}
 
+.sidebar_item_active {
+    background-color: #191E24;
+    color: #53B6FF;
+}
+
+a {
+    text-decoration: none;
 }
 
 .sidebar_item:hover {
-    background-color: white;
+    background-color: #43505e;
     cursor: pointer;
 }
 

employee_module/static/js/employee_module_base.js

@@ -0,0 +1,12 @@
+
+window.addEventListener('load', function(){
+    var sidebarItems = document.getElementById('sidebar').getElementsByTagName('a')
+    var pathName = window.location.pathname
+    for (var i = 0; i < sidebarItems.length; i++){
+        var pathLink = sidebarItems[i].getAttribute('href')
+        if (pathName == pathLink){
+            sidebarItems[i].firstElementChild.classList.add('sidebar_item_active')
+        }
+    }
+})
+

employee_module/static/js/employee_module_show_schedule.js

@@ -7,6 +7,7 @@ const csrftoken = getCookie('csrftoken');
 window.addEventListener('load', function(){
     var parent = document.getElementById('calendar_box')
     parent.appendChild(addCalendar(monthsAhead=3))
+    appendLegend()
     fetchDays()
     formatCalendarContainerSize(document.getElementById('calendar_container'))
     document.getElementById('calendar_button_back').addEventListener('click', function(){
@@ -120,14 +121,16 @@ function formatCalendarContainerSize(calendarContainer){
     var monthsBlock = calendarContainer.querySelector('#months_block')
     var calendarButton = calendarContainer.querySelector('#calendar_button_back')
     var dateSelector = calendarContainer.querySelector('#date_selector')
+    var legendSelector = calendarContainer.querySelector('#legend_container')
 
     var widthMonths = monthsBlock.offsetWidth
     var heightMonths = monthsBlock.offsetHeight
     var heightDateSelector = dateSelector.offsetHeight
+    var heightLegend = legendSelector.offsetHeight
     var widthCalendarButton = calendarButton.offsetWidth * 2
 
     var widthTotal = widthMonths + widthCalendarButton
-    var heightTotal = heightMonths + heightDateSelector
+    var heightTotal = heightMonths + heightDateSelector + heightLegend
 
     calendarContainer.setAttribute('style','height:' + heightTotal +'px; width:' + widthTotal + 'px');
 }
@@ -172,3 +175,27 @@ function getCookie(name) {
     }
     return cookieValue;
 }
+
+
+function appendLegend(){
+    var calendar = document.getElementById('calendar_container')
+    var container = document.createElement('div')
+    container.id = 'legend_container'
+    var activityTypes = ['work', 'vacation', 'sickness', 'parental_leave']
+    for(var i = 0; i < activityTypes.length; i++){
+        var legendElementContainer = document.createElement('div')
+        legendElementContainer.className = 'legend_element_container'
+
+        var legendDivText = document.createElement('div')
+        legendDivText.innerText = activityTypes[i]
+        legendDivText.className = 'legend_label'
+
+        var legendDivBox = document.createElement('div')
+        legendDivBox.classList.add('legend_cube')
+        legendDivBox.classList.add('days_of_month_' + activityTypes[i])
+        legendElementContainer.appendChild(legendDivText)
+        legendElementContainer.appendChild(legendDivBox)
+        container.appendChild(legendElementContainer)
+    }
+    calendar.appendChild(container)
+}

employee_module/static/js/employee_module_show_timelog.js

@@ -7,6 +7,7 @@ const csrftoken = getCookie('csrftoken');
 window.addEventListener('load', function(){
     var parent = document.getElementById('calendar_box')
     parent.appendChild(addCalendar(monthsAhead=3))
+    appendLegend()
     fetchDays()
     formatCalendarContainerSize(document.getElementById('calendar_container'))
     document.getElementById('calendar_button_back').addEventListener('click', function(){
@@ -121,14 +122,16 @@ function formatCalendarContainerSize(calendarContainer){
     var monthsBlock = calendarContainer.querySelector('#months_block')
     var calendarButton = calendarContainer.querySelector('#calendar_button_back')
     var dateSelector = calendarContainer.querySelector('#date_selector')
+    var legendSelector = calendarContainer.querySelector('#legend_container')
 
     var widthMonths = monthsBlock.offsetWidth
     var heightMonths = monthsBlock.offsetHeight
     var heightDateSelector = dateSelector.offsetHeight
+    var heightLegend = legendSelector.offsetHeight
     var widthCalendarButton = calendarButton.offsetWidth * 2
 
     var widthTotal = widthMonths + widthCalendarButton
-    var heightTotal = heightMonths + heightDateSelector
+    var heightTotal = heightMonths + heightDateSelector + heightLegend
 
     calendarContainer.setAttribute('style','height:' + heightTotal +'px; width:' + widthTotal + 'px');
 }
@@ -173,3 +176,26 @@ function getCookie(name) {
     }
     return cookieValue;
 }
+
+function appendLegend(){
+    var calendar = document.getElementById('calendar_container')
+    var container = document.createElement('div')
+    container.id = 'legend_container'
+    var activityTypes = ['work', 'vacation', 'sickness', 'parental_leave']
+    for(var i = 0; i < activityTypes.length; i++){
+        var legendElementContainer = document.createElement('div')
+        legendElementContainer.className = 'legend_element_container'
+
+        var legendDivText = document.createElement('div')
+        legendDivText.innerText = activityTypes[i]
+        legendDivText.className = 'legend_label'
+
+        var legendDivBox = document.createElement('div')
+        legendDivBox.classList.add('legend_cube')
+        legendDivBox.classList.add('days_of_month_' + activityTypes[i])
+        legendElementContainer.appendChild(legendDivText)
+        legendElementContainer.appendChild(legendDivBox)
+        container.appendChild(legendElementContainer)
+    }
+    calendar.appendChild(container)
+}

employee_module/templates/employee_module_base.html

@@ -10,7 +10,7 @@
 {% block core_content %}
 <script src="{% static '/js/csrf_token.js' %}"></script>
 
-<div class="sidebar">
+<div id="sidebar">
 
 <a href="{%  url 'employee_module:homepage' %}">
     <div class="sidebar_item">Home
@@ -42,6 +42,8 @@
 <div id="hr_module_main_container">
 {% block action_panel %}
 {% endblock %}
+
+<script src="{% static '/js/employee_module_base.js' %}"></script>
 </div>
 
 

hr_module/handling_functions/insert_to_plan.py

@@ -1,6 +1,6 @@
 
 import datetime as dt
-from hr_module.models import Plan, Employee
+from hr_module.models import Plan, Employee, TimeLog
 from django.conf import settings
 import pandas as pd
 
@@ -62,6 +62,27 @@ class UpdatePlan:
                         activity_type=self.activity_type)
             plan.save()
 
+        if self.activity_type != 'work':
+            if not self.check_overnight_shift():
+                timelog = TimeLog(username=employee,
+                            date=date_to_add,
+                            begin_time=self.start_time,
+                            end_time=self.end_time,
+                            activity_type=self.activity_type)
+                timelog.save()
+            else:
+                timelog = TimeLog(username=employee,
+                            date=date_to_add,
+                            begin_time=self.start_time,
+                            end_time=dt.time(23, 59, 59),
+                            activity_type=self.activity_type)
+                timelog.save()
+                timelog = TimeLog(username=employee,
+                            date=date_to_add + dt.timedelta(days=1),
+                            begin_time=dt.time(0, 0, 0),
+                            end_time=self.end_time,
+                            activity_type=self.activity_type)
+                timelog.save()
 
 
 

hr_module/static/css/calendar.css

@@ -10,7 +10,7 @@ div.month_container td {
 }
 
 th {
-    background-color: darkred;
+    background-color: #202831;
     color: white;
     border: solid 1px white;
     border-width: thin;
@@ -86,7 +86,7 @@ th {
 }
 
 .days_of_month_today{
-    background-color: darkred;
+    background-color: #202831;
 }
 
 .month_header {

hr_module/static/css/calendar_local.css

@@ -2,4 +2,41 @@
 
 .days_of_month_work {
     background-color: darkslateblue;
-}
+}
+
+.days_of_month_vacation {
+    background-color: lightgreen;
+}
+
+.days_of_month_sickness {
+    background-color: #4f4f4f;
+}
+
+.days_of_month_parental_leave {
+    background-color: #609ab6;
+}
+
+.legend_element_container {
+    display: inline-block;
+    border-right: 1px solid black;
+    padding-left: 15px;
+    padding-top: 7px;
+}
+
+#legend_container {
+    margin-top: 10px;
+}
+
+.legend_label {
+    float: left;
+    margin-right: 15px;
+    padding-top: 7px;
+    height: 30px;
+}
+
+.legend_cube {
+    height: 30px;
+    width: 30px;
+    margin-right: 15px;
+    float: left;
+}

hr_module/static/css/hr_module_base.css

@@ -1,31 +1,39 @@
 
 #hr_module_main_container {
-    padding: 1%;
+    padding-top: 10px;
+    padding-left: 10px;
     float: left;
-    width: 80%;
+    width: 78%;
     height: 100%;
     background-color: whitesmoke;
     text-align: center;
 }
-.sidebar {
-    background-color: #8b0000;
+#sidebar {
+    background-color: #202831;
     width: 18%;
     height: 100%;
     float: left;
+    padding: 10px;
 }
 
 .sidebar_item {
-    background-color: navajowhite;
-    margin-right: 6px;
-    margin-left: 6px;
-    margin-top: 6px;
+    background-color: #202831;
     padding: 10px;
     font-size: 20px;
+    color: #7F8B94;
+}
 
+.sidebar_item_active {
+    background-color: #191E24;
+    color: #53B6FF;
+}
+
+a {
+    text-decoration: none;
 }
 
 .sidebar_item:hover {
-    background-color: white;
+    background-color: #43505e;
     cursor: pointer;
 }
 

hr_module/static/css/hr_module_create_schedule.css

@@ -1,12 +1,14 @@
 
 .scheduleSearchRow {
-    height: 35px;
-
+    height: 20px;
+    display: block;
+    margin-bottom: 15px;
 }
 
 .search_element {
+    width: auto;
     float: left;
-    width: 20%;
+    margin-right: 15px;
 }
 
 #schedule_filter_category {
@@ -32,7 +34,14 @@ table, th, td {
     border-width: thin;
 }
 
+th {
+    background-color: #202831;
+    color: #9ea9b5;
+}
+
 .date_select_row {
-    margin-top: 10px;
-    margin-bottom: 10px;
+    display: block;
+    height: auto;
+    width: auto;
+    margin-top: 15px;
 }

hr_module/static/css/hr_module_import.css

@@ -3,10 +3,16 @@
 label {
     width: 40%;
     display:inline-block;
+    text-align: left;
+}
+
+input {
+    width: 40%;
 }
 
 table {
     margin-top: 10px;
+    margin-left: 20px;
 }
 
 table, th, td {
@@ -20,19 +26,30 @@ table, th, td {
 
 .import_container {
     float: left;
-    width: 40%;
+    width: 48%;
     height: 70%;
+    display: block;
 }
 
 
 .form_element, .import_text {
     height: 30px;
+    display: block;
+}
+
+.import_text {
+    font-weight: bold;
+    background-color: #202831;
+    width: 100%;
+    color: #7F8B94;
+    padding-top: 10px;
+    margin-bottom: 10px;
 }
 
 .separator {
     position: relative;
     float: left;
-    width: 10%;
+    width: 30px;
     height: 70%;
 }
 

hr_module/static/css/hr_module_schedule_creation_log.css

@@ -0,0 +1 @@
+

hr_module/static/css/hr_module_show_schedule.css

@@ -5,6 +5,7 @@ input[readonly] {
 }
 
 table#detailed_plan_records {
+    margin-top: 15px;
     width: 100%;
     font-size: 15px;
     vertical-align:middle;
@@ -22,7 +23,7 @@ table#detailed_plan_records  td {
     padding: 0px;
 }
 
-tr:nth-child(even) {
+table#detailed_plan_records tr:nth-child(even) {
     background-color: #6DDCBD;
 }
 

hr_module/static/css/hr_module_show_timelog.css

@@ -0,0 +1,44 @@
+
+input[readonly] {
+    color: black;
+    background-color: lightgray;
+}
+
+table#detailed_plan_records {
+    width: 100%;
+    font-size: 15px;
+    vertical-align:middle;
+    font-weight: lighter;
+}
+
+table#detailed_plan_records th {
+    height: 25px;
+    font-weight: lighter;
+    padding: 0px;
+}
+
+table#detailed_plan_records  td {
+    text-align: center;
+    padding: 0px;
+}
+
+tr:nth-child(even) {
+    background-color: #6DDCBD;
+}
+
+div#detailed_plan_records input {
+    width: 97%;
+    display: block;
+    border: solid thin black;
+}
+
+.detailed_plan_records {
+    text-align: center;
+    border-collapse: collapse;
+    border-width: thin;
+    font-weight: lighter;
+}
+
+.begin_time, .end_time {
+    display: block;
+}

hr_module/static/js/hr_module_base.js

@@ -0,0 +1,12 @@
+
+window.addEventListener('load', function(){
+    var sidebarItems = document.getElementById('sidebar').getElementsByTagName('a')
+    var pathName = window.location.pathname
+    for (var i = 0; i < sidebarItems.length; i++){
+        var pathLink = sidebarItems[i].getAttribute('href')
+        if (pathName == pathLink){
+            sidebarItems[i].firstElementChild.classList.add('sidebar_item_active')
+        }
+    }
+})
+

hr_module/static/js/hr_module_create_schedule.js

@@ -1,13 +1,18 @@
 const csrftoken = getCookie('csrftoken');
 
-var searchInput = document.getElementById('searched_string');
-searchInput.addEventListener("click", fetchSearchOptions);
 
-var fetchEmployeesButton = document.getElementById('load_employees');
-fetchEmployeesButton.addEventListener('click', fetchEmployees);
+window.addEventListener('load', function (){
+    fetchSearchOptions()
 
-var submitToDb = document.getElementById('run_planning');
-submitToDb.addEventListener('click', postPlanToDb);
+    var filterType = document.getElementById('schedule_filter_category')
+    filterType.addEventListener('change', fetchSearchOptions)
+
+    var fetchEmployeesButton = document.getElementById('load_employees');
+    fetchEmployeesButton.addEventListener('click', fetchEmployees);
+
+    var submitToDb = document.getElementById('run_planning');
+    submitToDb.addEventListener('click', postPlanToDb);
+})
 
 function fetchSearchOptions() {
     var host = 'http://' + window.location.host;
@@ -30,22 +35,18 @@ function fetchSearchOptions() {
         }).then((response) => {
         return response.json();
     }).then((data) => {
-        console.log(data);
         appendFoundFilterOptions(data);
     });
 }
 
 
 function appendFoundFilterOptions(data){
-    console.log(data)
     var parent = document.getElementById('schedule_filter_search');
     parent.innerHTML = '';
     for (var i = 0; i < data.length; i++) {
 
         var caption = data[i]['caption'];
         var value = data[i]['column_value'];
-        console.log(caption)
-        console.log(value)
 
         innerHTML = '<option value="' + value + '">' + caption + '</option>'
 
@@ -59,7 +60,7 @@ function appendFoundFilterOptions(data){
 
 function fetchEmployees() {
     var host = 'http://' + window.location.host;
-    var fetch_url = host + '/hr_module/loeademployees'
+    var fetch_url = host + '/hr_module/loademployees'
 
     var searched_field = document.getElementById('schedule_filter_category').value
     var searched_string = document.getElementById('searched_string').value
@@ -78,13 +79,12 @@ function fetchEmployees() {
         }).then((response) => {
         return response.json();
     }).then((data) => {
-        console.log(data);
         appendFoundEmployees(data);
+        addDeleteEventListener();
     });
 }
 
 function appendFoundEmployees(data){
-
     var parentTable = document.getElementById('scheduling_list');
     parent.innerHTML = '';
     for (var i = 0; i < data.length; i++) {
@@ -98,7 +98,6 @@ function appendFoundEmployees(data){
             var manager_name = data[i]['manager_name'];
             var daily_hours = data[i]['daily_hours'];
 
-
             var newRow = parentTable.insertRow(-1)
             newRow.className = 'employee_row'
             newRow.id = 'employee_row_' + username
@@ -111,12 +110,8 @@ function appendFoundEmployees(data){
             workingDays(cellDays, data[i])
 
             addCell(newRow, addActivityType(), 5)
-
-            addCell(newRow, '<td><input type="time" class="schedule_time_input"></td>', 6)
-            var cellButton = addCell(newRow, addDeleteButton(username), 7)
-            cellButton.firstChild.addEventListener('click', function () {
-                deleteRow(username)
-            })
+            addCell(newRow, '<td><input type="time" class="schedule_time_input" required></td>', 6)
+            addCell(newRow, addDeleteButton(username), 7)
         }
     }
 }
@@ -125,6 +120,8 @@ function addDeleteButton(username){
     var cell = document.createElement('td')
     var submit = document.createElement('button')
     submit.innerHTML = 'Delete'
+    submit.className = 'delete_button'
+    submit.value = username
     cell.appendChild(submit)
     return cell.outerHTML
 }
@@ -164,24 +161,42 @@ function workingDays(parent, data){
                     'sat',
                     'sun',]
     days.forEach(function (item) {
-        if (data[item] === true) {
-            var tag = '<label for="' + item + '">'+ item + '</label><input class="working_days" type="checkbox" id="' + item + '" value="' + item + '" checked>'
+        var inputLabel = document.createElement('label')
+        inputLabel.setAttribute('for', item)
+        inputLabel.innerHTML = item
 
-        } else {
-            var tag = '<label for="' + item + '">'+ item + '</label><input class="working_days" type="checkbox" id="' + item + '" value="' + item + '" >'
+        var input = document.createElement('input')
+        input.className = 'working_days'
+        input.type = 'checkbox'
+        input.value = item
+
+        if (data[item] === true) {
+            input.checked = true
         }
+
         var wrapper = document.createElement('div');
         wrapper.className = 'day_of_week_checkbox'
-        wrapper.innerHTML = tag;
+        wrapper.appendChild(inputLabel)
+        wrapper.appendChild(input)
         parent.appendChild(wrapper)
     });
 }
 
 function deleteRow(username){
+    console.log(username)
     var row = document.getElementById('employee_row_' + username)
     row.outerHTML = ''
 }
 
+function addDeleteEventListener(){
+    var buttons = document.getElementsByClassName('delete_button')
+    for (let i = 0; i < buttons.length; i++){
+        buttons[i].addEventListener('click', function (){
+            deleteRow(buttons[i].value)
+        })
+    }
+}
+
 function buildPlanJson(){
     var listJsons = []
     var employees = document.getElementsByClassName('employee_row')

hr_module/static/js/hr_module_show_schedule.js

@@ -5,6 +5,7 @@ const csrftoken = getCookie('csrftoken');
 window.addEventListener('load', function(){
     var parent = document.getElementById('calendar_box')
     parent.appendChild(addCalendar(monthsAhead=3))
+    appendLegend()
     formatCalendarContainerSize(document.getElementById('calendar_container'))
     formatCalendarSize()
     document.getElementById('load_schedule_button').addEventListener('click', function(){
@@ -26,7 +27,7 @@ window.addEventListener('load', function(){
 
 function fetchDays(){
     var host = 'http://' + window.location.host;
-    var fetch_url = host + '/hr_module/show_employee_timelog_api'
+    var fetch_url = host + '/hr_module/show_employee_plan_api'
 
     var range = searchedDateRange()
     var startDate = range['min']
@@ -186,7 +187,7 @@ function getCheckedRecords(event){
 
 function updateCheckedRecords(recordsArray, action){
     var host = 'http://' + window.location.host;
-    var fetch_url = host + '/hr_module/update_timelog_api'
+    var fetch_url = host + '/hr_module/update_plan_api'
 
     fetch(fetch_url,
         {
@@ -292,14 +293,16 @@ function formatCalendarContainerSize(calendarContainer){
     var monthsBlock = calendarContainer.querySelector('#months_block')
     var calendarButton = calendarContainer.querySelector('#calendar_button_back')
     var dateSelector = calendarContainer.querySelector('#date_selector')
+    var legendSelector = calendarContainer.querySelector('#legend_container')
 
     var widthMonths = monthsBlock.offsetWidth
     var heightMonths = monthsBlock.offsetHeight
     var heightDateSelector = dateSelector.offsetHeight
+    var heightLegend = legendSelector.offsetHeight
     var widthCalendarButton = calendarButton.offsetWidth * 2
 
     var widthTotal = widthMonths + widthCalendarButton
-    var heightTotal = heightMonths + heightDateSelector
+    var heightTotal = heightMonths + heightDateSelector + heightLegend
 
     calendarContainer.setAttribute('style','height:' + heightTotal +'px; width:' + widthTotal + 'px');
 }
@@ -349,3 +352,26 @@ function getCookie(name) {
     }
     return cookieValue;
 }
+
+function appendLegend(){
+    var calendar = document.getElementById('calendar_container')
+    var container = document.createElement('div')
+    container.id = 'legend_container'
+    var activityTypes = ['work', 'vacation', 'sickness', 'parental_leave']
+    for(var i = 0; i < activityTypes.length; i++){
+        var legendElementContainer = document.createElement('div')
+        legendElementContainer.className = 'legend_element_container'
+
+        var legendDivText = document.createElement('div')
+        legendDivText.innerText = activityTypes[i]
+        legendDivText.className = 'legend_label'
+
+        var legendDivBox = document.createElement('div')
+        legendDivBox.classList.add('legend_cube')
+        legendDivBox.classList.add('days_of_month_' + activityTypes[i])
+        legendElementContainer.appendChild(legendDivText)
+        legendElementContainer.appendChild(legendDivBox)
+        container.appendChild(legendElementContainer)
+    }
+    calendar.appendChild(container)
+}

hr_module/static/js/hr_module_show_timelog.js

@@ -28,7 +28,7 @@ window.addEventListener('load', function(){
 
 function fetchDays(){
     var host = 'http://' + window.location.host;
-    var fetch_url = host + '/hr_module/show_employee_plan_api'
+    var fetch_url = host + '/hr_module/show_employee_timelog_api'
 
     var range = searchedDateRange()
     var startDate = range['min']
@@ -188,7 +188,7 @@ function getCheckedRecords(event){
 
 function updateCheckedRecords(recordsArray, action){
     var host = 'http://' + window.location.host;
-    var fetch_url = host + '/hr_module/update_plan_api'
+    var fetch_url = host + '/hr_module/update_timelog_api'
 
     fetch(fetch_url,
         {
@@ -360,10 +360,19 @@ function appendLegend(){
     container.id = 'legend_container'
     var activityTypes = ['work', 'vacation', 'sickness', 'parental_leave']
     for(var i = 0; i < activityTypes.length; i++){
-        var legendDiv = document.createElement('div')
-        legendDiv.classList.add('legend_cube')
-        legendDiv.classList.add('days_of_month_' + activityTypes[i])
-        container.appendChild(legendDiv)
+        var legendElementContainer = document.createElement('div')
+        legendElementContainer.className = 'legend_element_container'
+
+        var legendDivText = document.createElement('div')
+        legendDivText.innerText = activityTypes[i]
+        legendDivText.className = 'legend_label'
+
+        var legendDivBox = document.createElement('div')
+        legendDivBox.classList.add('legend_cube')
+        legendDivBox.classList.add('days_of_month_' + activityTypes[i])
+        legendElementContainer.appendChild(legendDivText)
+        legendElementContainer.appendChild(legendDivBox)
+        container.appendChild(legendElementContainer)
     }
     calendar.appendChild(container)
 }

hr_module/templates/hr_module_base.html

@@ -10,7 +10,7 @@
 {% block core_content %}
 <script src="{% static '/js/csrf_token.js' %}"></script>
 
-<div class="sidebar">
+<div id="sidebar">
 
 <a href="{%  url 'hr_module:homepage' %}">
     <div class="sidebar_item">Home
@@ -19,55 +19,58 @@
 
 
 <a href="{%  url 'hr_module:create_schedule' %}">
-    <div class="sidebar_item">Create schedule
+    <div class="sidebar_item" >Create schedule
     </div>
 </a>
 
 <a href="{%  url 'hr_module:plan_creation_log' %}">
-    <div class="sidebar_item">Schedule creating logs
+    <div class="sidebar_item" >Schedule creating logs
     </div>
 </a>
 
 
 <a href="{%  url 'hr_module:manage_schedule' %}">
-    <div class="sidebar_item">Manage employee schedule
+    <div class="sidebar_item" >Manage employee schedule
     </div>
 </a>
 
 <a href="{%  url 'hr_module:manage_timelog' %}">
-    <div class="sidebar_item">Manage employee timelog
+    <div class="sidebar_item" >Manage employee timelog
     </div>
 </a>
 
 <a href="{%  url 'hr_module:change_employee_data' %}">
-    <div class="sidebar_item">Manage employee data
+    <div class="sidebar_item" >Manage employee data
     </div>
 </a>
 
 {% if request.user.is_superuser %}
 <a href="{%  url 'hr_module:create_employees' %}">
-    <div class="sidebar_item">Create new employees
+    <div class="sidebar_item" >Create new employees
     </div>
 </a>
 
 
 <a href="{%  url 'hr_module:create_schedule' %}">
-    <div class="sidebar_item">Export Data
+    <div class="sidebar_item" >Export data
     </div>
 </a>
 
 {% endif %}
 
 <a href="{%  url 'employee_module:homepage' %}">
-    <div class="sidebar_item">Go to employee section
+    <div class="sidebar_item" >Go to employee section
     </div>
 </a>
 
 </div>
 
 <div id="hr_module_main_container">
+
 {% block action_panel %}
 {% endblock %}
+
+<script src="{% static '/js/hr_module_base.js' %}"></script>
 </div>
 
 

hr_module/templates/hr_module_create_schedule.html

@@ -15,7 +15,7 @@
         </div>
 
         <div  class="search_element">
-        <input list="schedule_filter_search" id="searched_string">
+        <input list="schedule_filter_search" id="searched_string" autocomplete="off" >
             <datalist id="schedule_filter_search">
             </datalist>
         </div>

hr_module/templates/hr_module_creation_log.html

@@ -4,6 +4,8 @@
 
 {% block action_panel %}
 
+    <link rel="stylesheet" href="{% static '/css/hr_module_schedule_creation_log.css' %}">
+
     {% if creation_log.count > 0 %}
         <div class="link_to_report_download">Links with scheduling import are below: </div>
         {% for item in creation_log %}

hr_module/templates/hr_module_home.html

@@ -4,6 +4,6 @@
 
 {% block action_panel %}
 
-    <h2>Welcome to Timefall - time tracking application</h2>
+    <h2>Welcome to Timefall - time tracking app, admin site</h2>
 
 {% endblock %}

hr_module/templates/hr_module_show_timelog.html

@@ -5,7 +5,7 @@
 {% block action_panel %}
     <link rel="stylesheet" href="{% static '/css/calendar.css' %}">
     <link rel="stylesheet" href="{% static '/css/calendar_local.css' %}">
-    <link rel="stylesheet" href="{% static '/css/hr_module_show_schedule.css' %}">
+    <link rel="stylesheet" href="{% static '/css/hr_module_show_timelog.css' %}">
 
     <div>
         <label for="username_input">Person username: </label>

hr_module/urls.py

@@ -13,7 +13,7 @@ urlpatterns = [
     path('create_schedule', views.create_schedule, name='create_schedule'),
     path('create_employees', views.create_employees, name='create_employees'),
     path('search_api', views.search_users_api, name='search_users_api'),
-    path('loeademployees', views.load_employees_api, name='load_employees'),
+    path('loademployees', views.load_employees_api, name='load_employees'),
     path('new_plan_api', views.new_plan_api, name='new_plan_api'),
     path('manage_schedule', views.manage_schedule, name='manage_schedule'),
     path('show_employee_plan_api', views.show_employee_plan_api, name='show_employee_plan_api'),

hr_module/views.py

@@ -258,7 +258,7 @@ def show_employee_plan_api(request):
 
         user_obj = Employee.objects.get(pk=username)
 
-        query_result = Plan.objects.filter(username=user_obj, date__range= [start_date, end_date])
+        query_result = Plan.objects.filter(username=user_obj, date__range=[start_date, end_date]).order_by('date', 'begin_time')
         response = list(query_result.values())
         return JsonResponse(response, safe=False)
 
@@ -307,7 +307,7 @@ def show_employee_timelog_api(request):
 
         user_obj = Employee.objects.get(pk=username)
 
-        query_result = TimeLog.objects.filter(username=user_obj, date__range= [start_date, end_date])
+        query_result = TimeLog.objects.filter(username=user_obj, date__range= [start_date, end_date]).order_by('date', 'begin_time')
         response = list(query_result.values())
         return JsonResponse(response, safe=False)
 

static/css/base.css

@@ -11,7 +11,7 @@ html, body {
 }
 .main_container {
     background-color: whitesmoke;
-    width: 70%;
+    width: 100%;
     height: 100%;
     margin: auto;
 }