more js

hr_module/static/css/hr_module_base.css

@@ -1,5 +1,5 @@
 
-.hr_module_main_container {
+#hr_module_main_container {
     padding: 1%;
     float: left;
     width: 80%;

hr_module/static/css/hr_module_show_schedule.css

@@ -0,0 +1,9 @@
+
+input {
+    border: solid thin black;
+}
+
+input[readonly] {
+    color: black;
+    background-color: lightgray;
+}

hr_module/static/js/calendar.js

@@ -2,148 +2,94 @@
 const monthsStrings = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
 var today = new Date()
 
-function addCalendar(parent, monthsAhead = 1, currentMonth = new Date().getMonth() + 1, currentYear= new Date().getFullYear()){
-    parent.innerHTML = ''
+function addCalendar(monthsAhead = 1, currentMonth = new Date().getMonth() + 1, currentYear= new Date().getFullYear(), weekStart=1){
 
-    var calendar = renderCalendarFor(currentYear, currentMonth, monthsAhead, 1)
+    var calendarContainer = document.createElement('div')
+    calendarContainer.id = 'calendar_container'
 
-    var container = document.createElement('div')
-    container.id = 'calendar_container'
 
+    var monthsBlock = document.createElement('div')
+    monthsBlock.id = 'months_block'
+
+    renderCalendarFor(calendarContainer, monthsBlock, currentYear, currentMonth, monthsAhead, weekStart)
+
+    calendarContainer.appendChild(createButtonBack(calendarContainer, monthsBlock, monthsAhead, weekStart))
+    calendarContainer.appendChild(monthsBlock)
+    calendarContainer.appendChild(createButtonForwards(calendarContainer, monthsBlock, monthsAhead, weekStart))
+    calendarContainer.appendChild(createDateSelector(calendarContainer, monthsBlock, monthsAhead, weekStart))
+
+    return calendarContainer
+}
+
+function createButtonBack(calendarContainer, monthsBlock, monthsAhead, weekStart){
     var buttonBack = createButton('calendar_button_back', 'calendar_button', '<')
     buttonBack.addEventListener('click', function(){
+        var currentMonth = parseInt(calendarContainer.getAttribute('month_shown'))
+        var currentYear = parseInt(calendarContainer.getAttribute('year_shown'))
+
         if (currentMonth == 1){
-            currentMonth = 11
+            currentMonth = 12
             currentYear = currentYear - 1
+        } else {
+            currentMonth = currentMonth - 1
         }
-        addCalendar(parent, monthsAhead, currentMonth - 1, currentYear)
+        renderCalendarFor(calendarContainer, monthsBlock, currentYear, currentMonth, monthsAhead, weekStart)
     })
-    container.appendChild(buttonBack)
-    container.appendChild(calendar)
+    return buttonBack
+}
+
+function createButtonForwards(calendarContainer, monthsBlock, monthsAhead, weekStart){
+    var buttonForwards = createButton('calendar_button_forwards', 'calendar_button', '>')
+    buttonForwards.addEventListener('click', function(){
+        var currentMonth = parseInt(calendarContainer.getAttribute('month_shown'))
+        var currentYear = parseInt(calendarContainer.getAttribute('year_shown'))
 
-    var buttonForward = createButton('calendar_button_forwards', 'calendar_button', '>')
-    buttonForward.addEventListener('click', function(){
         if (currentMonth == 12){
-            currentMonth = 0
+            currentMonth = 1
             currentYear = currentYear + 1
+        } else {
+            currentMonth = currentMonth + 1
         }
-        addCalendar(parent, monthsAhead, currentMonth + 1, currentYear)
+        console.log(currentYear, currentMonth, monthsAhead)
+        renderCalendarFor(calendarContainer,monthsBlock, currentYear, currentMonth, monthsAhead, weekStart)
     })
+    return buttonForwards
+}
 
-    container.appendChild(buttonForward)
-    container.appendChild(createDateSelection())
+function createDateSelector(calendarContainer, monthsBlock, monthsAhead, weekStart){
+    var dateSelector = createDateSelectionHTML()
 
-    parent.appendChild(container)
-
-    var buttonGoToDate = document.getElementById('button_load_selected_months')
+    var buttonGoToDate = dateSelector.querySelector('#button_load_selected_months')
     buttonGoToDate.addEventListener('click', function(){
-        var currentYear = parseInt(document.getElementById('year_selector').value)
-        var currentMonth = parseInt(document.getElementById('month_selector').value)
-        addCalendar(parent, monthsAhead, currentMonth + 1, currentYear)
+        var currentYear = parseInt(dateSelector.querySelector('#year_selector').value)
+        var currentMonth = parseInt(dateSelector.querySelector('#month_selector').value) + 1
+        console.log(currentMonth, currentYear)
+        renderCalendarFor(calendarContainer,monthsBlock, currentYear, currentMonth, monthsAhead, weekStart)
     })
-
-    formatContainerSize()
-
+    return dateSelector
 }
 
 
-function formatContainerSize(){
-
-    var container = document.getElementById('calendar_container')
-
-    var monthsBlock = document.getElementById('months_block')
-    var calendarButton = document.getElementById('calendar_button_back')
-    var dateSelector = document.getElementById('date_selector')
-
-    var widthMonths = monthsBlock.offsetWidth
-    var heightMonths = monthsBlock.offsetHeight
-    var heightDateSelector = dateSelector.offsetHeight
-    var widthCalendarButton = calendarButton.offsetWidth * 2
-
-    var widthTotal = widthMonths + widthCalendarButton
-    var heightTotal = heightMonths + heightDateSelector
-
-    container.setAttribute('style','height:' + heightTotal +'px; width:' + widthTotal + 'px');
-
-}
-
-
-function createDateSelection(){
-
-    var container = document.createElement('div')
-    container.id = 'date_selector'
-
-    var goButton = document.createElement('button')
-    goButton.innerText = 'Go'
-    goButton.id = 'button_load_selected_months'
-
-    var label = document.createElement('label')
-    label.setAttribute('for', 'years')
-    label.innerText = 'Go to: '
-
-    var selectYear = document.createElement('select')
-    selectYear.name='years'
-    selectYear.id = 'year_selector'
-
-    spanBegin = 1990
-    spanEnd = 2030
-    yearsSpan = spanEnd - spanBegin
-    for (var i = 0; i < yearsSpan; i++){
-        var option = document.createElement('option')
-        option.value = spanBegin + i
-        option.innerText = option.value
-        selectYear.appendChild(option)
-    }
-    selectYear.value = today.getFullYear()
-
-    var selectMonth = document.createElement('select')
-    selectMonth.name='months'
-    selectMonth.id = 'month_selector'
-    for (var i = 0; i < 12; i++){
-        var option = document.createElement('option')
-        option.value = i;
-        option.innerText = monthsStrings[i]
-        selectMonth.appendChild(option)
-    }
-
-    selectMonth.value = today.getMonth()
-
-    container.appendChild(label)
-    container.appendChild(selectYear)
-    container.appendChild(selectMonth)
-    container.appendChild(goButton)
-    return container
-}
-
-
-function createButton(id, className, innerText){
-    var button = document.createElement('div')
-    button.id =  id
-    button.className = className
-    button.innerText = innerText
-    return button
-}
-
-function renderCalendarFor(year, month, nMonths, weekStart){
-    var parent = document.createElement('div')
-    parent.id = 'months_block'
+function renderCalendarFor(calendarContainer, monthsBlock, year, month, nMonths, weekStart){
 
+    monthsBlock.innerHTML = ''
+    calendarContainer.setAttribute('month_shown',  month.toString())
+    calendarContainer.setAttribute('year_shown',  year.toString())
     var monthToCreate = month - 1
     for (var i = 0; i < nMonths; i++){
         monthToCreate = monthToCreate + 1
         if (monthToCreate == 13){
             monthToCreate = 1;
             year = year + 1;
-            console.log(monthToCreate)
+            // console.log(monthToCreate, month, year, nMonths)
         }
 
         var monthContainer = document.createElement('div')
         monthContainer.className = 'month_container'
 
         monthContainer.appendChild(renderMonth(year, monthToCreate, weekStart))
-        parent.appendChild(monthContainer)
+        monthsBlock.appendChild(monthContainer)
     }
-    return parent
 }
 
 
@@ -201,10 +147,10 @@ function createDates(table, year, month, daysOfWeekNumeric){
         var dateContainer = document.createElement('div')
         dateContainer.innerText = dayNr
         dateContainer.className = 'days_of_month'
-        dateContainer.id = 'date_' + dateString
 
         if (month - 1 == date.getMonth()){
             dateContainer.classList.add('days_of_month_current')
+            dateContainer.id = 'date_' + dateString
             today.setHours(0, 0, 0, 0)
             if(today.getTime()==date.getTime()){
                 dateContainer.classList.add('days_of_month_today')
@@ -261,4 +207,61 @@ function daysArray(year, month, daysOfWeekNumeric) {
 
 function daysInMonth (year, month) {
     return new Date(year, month, 0).getDate();
+}
+
+
+function createDateSelectionHTML(){
+
+    var container = document.createElement('div')
+    container.id = 'date_selector'
+
+    var goButton = document.createElement('button')
+    goButton.innerText = 'Go'
+    goButton.id = 'button_load_selected_months'
+
+    var label = document.createElement('label')
+    label.setAttribute('for', 'years')
+    label.innerText = 'Go to: '
+
+    var selectYear = document.createElement('select')
+    selectYear.name='years'
+    selectYear.id = 'year_selector'
+
+    spanBegin = 1990
+    spanEnd = 2030
+    yearsSpan = spanEnd - spanBegin
+    for (var i = 0; i < yearsSpan; i++){
+        var option = document.createElement('option')
+        option.value = spanBegin + i
+        option.innerText = option.value
+        selectYear.appendChild(option)
+    }
+    selectYear.value = today.getFullYear()
+
+    var selectMonth = document.createElement('select')
+    selectMonth.name='months'
+    selectMonth.id = 'month_selector'
+    for (var i = 0; i < 12; i++){
+        var option = document.createElement('option')
+        option.value = i;
+        option.innerText = monthsStrings[i]
+        selectMonth.appendChild(option)
+    }
+
+    selectMonth.value = today.getMonth()
+
+    container.appendChild(label)
+    container.appendChild(selectYear)
+    container.appendChild(selectMonth)
+    container.appendChild(goButton)
+    return container
+}
+
+
+function createButton(id, className, innerText){
+    var button = document.createElement('div')
+    button.id =  id
+    button.className = className
+    button.innerText = innerText
+    return button
 }

hr_module/static/js/hr_module_show_schedule.js

@@ -1,7 +1,9 @@
 const csrftoken = getCookie('csrftoken');
 
 var parent = document.getElementById('calendar_box')
-document.onload = addCalendar(parent, 3)
+document.onload = parent.appendChild(addCalendar(monthsAhead=3))
+formatContainerSize(document.getElementById('calendar_container'))
+
 
 document.getElementById('load_schedule_button').addEventListener('click', function(){
     fetchDays()
@@ -42,12 +44,23 @@ function fetchDays(){
         return response.json();
     }).then((data) => {
         console.log(data);
-        adjustCalendar(data);
+        addClassToWorkingDays(data);
+
+        var parent = document.getElementById('hr_module_main_container')
+
+        var listContainer = document.getElementById('list_container')
+        if (listContainer == null){
+            var listContainer = document.createElement('div')
+            listContainer.id = 'list_container'
+        } else {
+            listContainer.innerHTML = ''
+        }
+        listContainer.appendChild(createDetailedCalendarRecords(data))
+        parent.appendChild(listContainer)
     });
 }
 
-function adjustCalendar(data){
-
+function addClassToWorkingDays(data){
     for (var i = 0; i < data.length; i++){
         var processedDate = data[i]['date']
         var processedActivityType = data[i]['activity_type']
@@ -56,6 +69,162 @@ function adjustCalendar(data){
     }
 }
 
+function createDetailedCalendarRecords(data){
+    var table = createDetailedHeaders()
+
+    for (var i = 0; i < data.length; i++){
+        var index = data[i]['id']
+        var username = data[i]['username_id']
+        var processedDate = data[i]['date']
+        var processedActivityType = data[i]['activity_type']
+        var processedBeginTime = data[i]['begin_time']
+        var processedEndTime = data[i]['end_time']
+
+        var row = table.insertRow(-1)
+        row.id = 'database_id_' + index.toString()
+
+        var cell = row.insertCell(0)
+        var dateInput = document.createElement('input')
+        dateInput.type = 'date'
+        dateInput.readOnly = true
+        dateInput.value = processedDate
+        dateInput.name = 'date'
+        cell.appendChild(dateInput)
+
+        var cell = row.insertCell(1)
+        var timeInput = document.createElement('input')
+        timeInput.type = 'time'
+        timeInput.readOnly = true
+        timeInput.value = processedBeginTime
+        timeInput.name = 'begin_time'
+        cell.appendChild(timeInput)
+
+        var cell = row.insertCell(2)
+        var timeInput = document.createElement('input')
+        timeInput.type = 'time'
+        timeInput.readOnly = true
+        timeInput.value = processedEndTime
+        timeInput.name = 'end_time'
+        cell.appendChild(timeInput)
+
+        var cell = row.insertCell(3)
+        var activityType = document.createElement('div')
+        activityType.innerText = processedActivityType
+        cell.appendChild(activityType)
+
+        var cell = row.insertCell(4)
+        var buttonContainer = document.createElement('div')
+        buttonContainer.className = 'buttons_cell'
+        var button = document.createElement('button')
+        button.innerText = 'Edit'
+        button.value = index
+        button.addEventListener('click', unlockRecordsForEditing)
+        buttonContainer.appendChild(button)
+        cell.appendChild(buttonContainer)
+
+        var cell = row.insertCell(5)
+        var checkboxContainer = document.createElement('checkbox')
+        checkboxContainer.className = 'copy_over_checkbox_cell'
+        checkboxContainer.style.display = 'none'
+        var checkbox = document.createElement('input')
+        checkbox.type = 'checkbox'
+        checkbox.checked = false
+        checkboxContainer.appendChild(checkbox)
+        cell.appendChild(checkboxContainer)
+    }
+    return table
+}
+
+function unlockRecordsForEditing(event){
+    var databaseId = event.target.value
+    var parent = event.target.parentElement
+    var row = document.getElementById('database_id_' + databaseId.toString())
+    var children = row.getElementsByTagName('input')
+    for (var i = 0; i < children.length; i++){
+        children[i].readOnly = false;
+    }
+
+    removeEditButtons(databaseId)
+
+    parent.appendChild(addSaveButton(databaseId))
+    parent.appendChild(addDeleteButton(databaseId))
+    parent.appendChild(addCancelButton(databaseId))
+
+    unhideCheckboxes()
+}
+
+function unhideCheckboxes(){
+    var checkboxes = document.getElementsByClassName('copy_over_checkbox_cell')
+    for (var i = 0; i < checkboxes.length; i++){
+        checkboxes[i].style.display = 'initial'
+    }
+}
+
+function removeEditButtons(id){
+    var elements = document.getElementsByClassName('buttons_cell')
+    for (var i = 0; i < elements.length; i++){
+        elements[i].innerHTML = ''
+    }
+}
+
+function addSaveButton(databaseId){
+    var button = document.createElement('button')
+    button.innerHTML = 'Save'
+    button.name = 'save'
+    button.value = databaseId
+    return button
+}
+
+function addDeleteButton(databaseId){
+    var button = document.createElement('button')
+    button.innerHTML = 'Delete'
+    button.name = 'delete'
+    button.value = databaseId
+    return button
+}
+
+function addCancelButton(databaseId){
+    var button = document.createElement('button')
+    button.innerHTML = 'Cancel'
+    button.name = 'cancel'
+    button.value = databaseId
+    button.addEventListener('click', fetchDays)
+    return button
+}
+
+function createDetailedHeaders(){
+    var table = document.createElement('table')
+    let headerRow = document.createElement('tr')
+    let columns = ['Date', 'Start time', 'End time', 'Activity type', '', '']
+    for (let i = 0; i < columns.length; i++){
+        var headerCell = document.createElement('th')
+        var headerText = document.createElement('div')
+        headerText.innerText = columns[i]
+        headerCell.appendChild(headerText)
+        headerRow.appendChild(headerCell)
+    }
+    table.appendChild(headerRow)
+    table.id = 'detailed_plan_records'
+    return table
+}
+
+function formatContainerSize(calendarContainer){
+
+    var monthsBlock = calendarContainer.querySelector('#months_block')
+    var calendarButton = calendarContainer.querySelector('#calendar_button_back')
+    var dateSelector = calendarContainer.querySelector('#date_selector')
+
+    var widthMonths = monthsBlock.offsetWidth
+    var heightMonths = monthsBlock.offsetHeight
+    var heightDateSelector = dateSelector.offsetHeight
+    var widthCalendarButton = calendarButton.offsetWidth * 2
+
+    var widthTotal = widthMonths + widthCalendarButton
+    var heightTotal = heightMonths + heightDateSelector
+
+    calendarContainer.setAttribute('style','height:' + heightTotal +'px; width:' + widthTotal + 'px');
+
+}
 
 function searchedDateRange(){
     var dates = document.getElementsByClassName('days_of_month_current')
@@ -69,6 +238,7 @@ function searchedDateRange(){
     var maxDate = new Date(Math.max.apply(null, datesArray))
     var out = {'min' : minDate,
             'max': maxDate}
+    console.log(out)
     return out
 }
 

hr_module/static/js/tmp.js

@@ -0,0 +1,42 @@
+var container = document.createElement('div')
+    container.id = 'calendar_container'
+
+    var monthsBlock = document.createElement('div')
+    monthsBlock.id = 'months_block'
+
+    renderCalendarFor(monthsBlock, currentYear, currentMonth, monthsAhead, 1)
+
+    var buttonBack = createButton('calendar_button_back', 'calendar_button', '<')
+    buttonBack.addEventListener('click', function(){
+        if (currentMonth == 1){
+            currentMonth = 11
+            currentYear = currentYear - 1
+        }
+        renderCalendarFor(monthsBlock, currentYear, currentMonth, monthsAhead, 1)
+    })
+
+
+    container.appendChild(buttonBack)
+    container.appendChild(monthsBlock)
+
+    var buttonForward = createButton('calendar_button_forwards', 'calendar_button', '>')
+    buttonForward.addEventListener('click', function(){
+        if (currentMonth == 12){
+            currentMonth = 0
+            currentYear = currentYear + 1
+        }
+        renderCalendarFor(monthsBlock, currentYear, currentMonth, monthsAhead, 1)
+    })
+
+    container.appendChild(buttonForward)
+
+
+
+    var buttonGoToDate = document.getElementById('button_load_selected_months')
+    buttonGoToDate.addEventListener('click', function(){
+        var currentYear = parseInt(document.getElementById('year_selector').value)
+        var currentMonth = parseInt(document.getElementById('month_selector').value)
+        addCalendar(container, monthsAhead, currentMonth + 1, currentYear)
+    })
+
+    formatContainerSize()

hr_module/templates/hr_module_base.html

@@ -24,7 +24,7 @@
 
 </div>
 
-<div class="hr_module_main_container">
+<div id="hr_module_main_container">
 {% block action_panel %}
 {% endblock %}
 </div>

hr_module/templates/hr_module_show_schedule.html

@@ -5,10 +5,11 @@
 {% 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' %}">
 
     <div>
         <label for="username_input">Person username: </label>
-        <input id="username_input" type="text">
+        <input id="username_input" type="text" value="kowalskija">
         <button type="button" id="load_schedule_button">Load Schedule</button>
     </div>
     <div id="calendar_box"></div>