Sindbad~EG File Manager

{% extends "users/layout.html" %}
{% block title %}Program Sheet{% endblock %}
{% block content %}
<style type="text/css">
    table
    {
       width: 100%;
      border-collapse: collapse;
       border: 1px solid #ccc;
    }
  
    th {
        /*color: #fff;*/
        /*background: #000;*/
    }

    table th,table td
    {
      border-collapse: collapse;
      border: 1px solid #ccc;
      padding: 15px;
      height: 2px;
      text-align: center;
      max-width: 150px;
      word-wrap: break-word;
    }
    
    .time-key
    {
        font-size:0px !important;
        width:1px !important;
        /*display:block;*/
        /*position: absolute;*/
        
    }
  
    .uncell{
      border-bottom: 0px;
      border-top: 0px;
      padding: 0px;
      /*height: 0px;*/
      background-color:#ccc;
    }
    
    
    td.ps_header {
      height: 100px !important;
      width:20% !important;
     font-family: open sans, sans-serif;
    font-size: 1rem;
    font-weight: lighter;
    position: sticky;
    left: 0;
  }

.--randombg
  {
    font-family: open sans, sans-serif;
    font-size: 1.3rem;
    font-weight: lighter;
    line-height: normal;
  }    
    
@media only screen and (max-width: 600px) {
  td.ps_header {
    width:20% !important;
  }
}


    
{% if conf_id|int == 61 %}    
td.ps_header {
      height: 100px !important;
      width:20% !important;
      background-color:#109374;
      color:#fff !important;
      /*color: #ccc;*/
      font-family: open sans, sans-serif;
    font-size: 1rem;
    font-weight: lighter;
  }
  
  
  .--randombg
  {
      background-color:#505661 !important;
      color:#fff !important;
      font-family: open sans, sans-serif;
    font-size: 1.3rem;
    font-weight: lighter;
    line-height: normal;
  }
  
  .--randombg a
  {
      color:#fff !important;
  }
  
  
  .nav-tabs .nav-link {
    background: #109374;
    color: #fff;
}
  
 {% endif %} 
   </style>
<div class="row">
    <div class="col">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            {% if confe_date %}
            {% for i in confe_date %}
            <li class="nav-item p-2">
                {% set date_str = i.strftime('%Y-%m-%d') %}
                <button type="button" class="nav-link date_btn" id="select_date_{{ date_str }}"  value="1" onclick="get_program_sheet('{{date_str}}')" data-val="{{date_str}}"  aria-selected="true">{{ i.strftime("%d/%m/%Y (%a)") }}</button>
            </li>
            {% endfor %}
            {% endif %}
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active p-2 rounded shadow-lg  p-3 mb-5 bg-light"  role="tabpanel" id="programcontent" >
                <div id="ProgramSheet" class="table-responsive"></div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="conf_id" name="conf_id" value="{{ conf_id }}">
<input type="hidden" id="conf_key" name="conf_key" value="{{ conf_key }}">
{% endblock %}
{% block script %}
<script src="https://cdn.numerotech.com/static/js/nt-loader.js"></script>
<script>
    var conf_date = "{{ confe_date }}";
    if(conf_date){
        var start_date = "{{ confe_date[0].strftime('%Y-%m-%d') }}";
        if (start_date){
            $("[data-val='"+start_date+"']").addClass('active')
            get_program_sheet(start_date);
        }
    }


    function get_program_sheet(conf_date){
        // $("#ProgramSheet").loader("show")
        $(".date_btn").removeClass('active')
        $("[data-val='"+conf_date+"']").addClass('active')
        var conf_id = $("#conf_id").val();
        var conf_key = $("#conf_key").val();
        $.ajax({
                type: "GET",
                url: BaseUrl +"/get_programsheet_data/"+ conf_id + "/" + conf_key,
                data: {
                    'conf_date': conf_date,                    
                },
                dataType: "json",
                success: function (data) {
                    // alert("success")
                    // alert(data)
                    // $("#programcontent").html(data);

                    jsonData = {'data' : data} 
                    var htmlTable = generateTableFromJSON(jsonData);
                    $("#ProgramSheet").html(htmlTable)
                    randomBgColor()
                    // $("#ProgramSheet").loader("close")
                    // $(".date_btn").css("background-color", "#ff5751")
                    // $("#select_date_"+conf_date).css("background-color", "#213363")
                    return true;
                },
            });
    }

    
    function generateTableFromJSON(jsonData) {



            var data =  jsonData.data;
            var halls = [];
            var data_sess = [];
            var time_duraction = 20;


            //1. Get Halls from data
            for (var i = 0; i < data.length; i++) {
                // check = jQuery.inArray(data[i].sHall,halls)
                // if( check == -1 ){
                //     halls.push(data[i].sHall) 
                // } 
                halls[data[i].hall_order_no]= {'sHall':data[i].sHall,'bg_color':data[i].hall_bg_color,'ps_head_1':data[i].ps_head_1,'ps_head_2':data[i].ps_head_2};
                
            } 
            
            console.log(halls)
            

            var minTime = null;
            var maxTime = null;

            //2. Get min max times from data 
            jsonData.data.forEach(function(item) {
            if (minTime === null || item.sTime < minTime) {
                minTime = item.sTime;
            }
            if (maxTime === null || item.eTime > maxTime) {
                maxTime = item.eTime;
            }
            });

            minTime = ConvertStartTime(minTime) 
            
            //3. get minutes from start time 
            var startMinutes = convertToMinutes(minTime); 
            //4. get minutes from end time and - time duraction  
            var endMinutes = convertToMinutes(maxTime) - time_duraction ;   
            //5. set rows interval 
            var interval = 1; // 1 minutes

            //6. set row_span from sessions start and end between times 
            for (var i = 0; i < data.length; i++) {
                data[i].sTM = convertToMinutes(data[i].sTime)
                data[i].eTM = convertToMinutes(data[i].eTime)
                data[i].row_span = (data[i].eTM - data[i].sTM)
            }  

            //7. generate sessions from custom time keys 
            for (var i = 0; i < data.length; i++) {
            data_sess[data[i].sTM + '_' + data[i].sHall] =  data[i]
            }

            var tableHtml = '<table >';

            // Generate table headers
            tableHtml += '<thead>';
            // header 1
            var is_head =  check_extra_header(halls,'ps_head_1')
            if (is_head > 0){
                tableHtml += '<tr>';
                tableHtml += '<th colspan="2"></th>';
                old_head_1 = ""
                for (var key in halls) {
                    if(old_head_1 != halls[key].ps_head_1) {
                        old_head_1  = halls[key].ps_head_1
                        var count   =  get_head_col_span(halls,halls[key].ps_head_1,'ps_head_1')
                        tableHtml   += '<th colspan="'+count+'">' + (halls[key].ps_head_1==null? '':halls[key].ps_head_1)   + '</th>';
                    }
                }
                tableHtml += '</tr>';
            }  
            // end // header 1
            
            // header halls name
            tableHtml += '<tr>';
            tableHtml += '<th colspan="2"></th>';
            for (var key in halls) {
                tableHtml += '<th style="background-color:'+ halls[key].bg_color +'">' + halls[key].sHall + '</th>';
            }
            tableHtml += '</tr>';
            // header 2
            var is_head =  check_extra_header(halls,'ps_head_2')
            if (is_head > 0) {
                tableHtml += '<tr>';
                tableHtml += '<th colspan="2"></th>';
                old_head_2 = ""
                for (var key in halls) {
                    if(old_head_2 != halls[key].ps_head_2) {
                        old_head_2  = halls[key].ps_head_2
                        var count   =  get_head_col_span(halls,halls[key].ps_head_2,'ps_head_2')
                        tableHtml += '<th style="background-color:'+ halls[key].bg_color +'" colspan="'+count+'">' + (halls[key].ps_head_2==null? '':halls[key].ps_head_2)  + '</th>';
                    }
                }
                tableHtml += '</tr>';
            }
            // end header 2

            tableHtml += '</thead>';

            // tbody 
            tableHtml += '<tbody>';
            sn = 0;
            last_rowspan  = [];
            hall_sno = [];
            last_session = [];
            var j = startMinutes
            var app_url = '{{ request.host_url }}';
            for (var i = startMinutes; i <= endMinutes; i += interval) {
                var startTime = formatTime(i);
                tableHtml += '<tr>';
                // tableHtml += '<td class="time-key" style="/*display:nonefont-size:8px;*/padding:0px;">'+ sn++ + ' - '+ startTime +'</td>';
                tableHtml += '<td class="time-key" style="/*display:nonefont-size:8px;*/padding:0px;"></td>';
                
                if(j == i) {
                j = i+time_duraction;  
                
                
                var endTime = formatTime(i+time_duraction);
                tableHtml += '<td  class="ps_header" rowspan="'+(time_duraction)+'">'+ startTime + ' - ' + endTime  +'</td>';
                }

                for (var key in halls) {

                s_key = i + '_'+ halls[key].sHall;
                s_hall  = halls[key].sHall.toUpperCase();
                if(hall_sno[s_hall] === undefined)
                {
                    hall_sno[s_hall] = 1; 
                }
                else
                {
                    hall_sno[s_hall] = hall_sno[s_hall]+1;
                }

                if(data_sess[s_key] === undefined)
                {


                    if(last_session[s_hall] === undefined)
                    {
                        tableHtml += '<td class="uncell"> </td>';     
                    }
                    else
                    {

                        if(i > last_session[s_hall].sTM && i < last_session[s_hall].eTM)
                        {

                        } 
                        else
                        {
                    
                        tableHtml += '<td  class="uncell"> </td>';    

                        }
                    }



                
                    
                }
                else{
                        view_url = app_url+data_sess[s_key].view_url
                    tableHtml += '<td '+ (data_sess[s_key].bgColor?'':'class="--randombg"') + ' style="background-color:'+ data_sess[s_key].session_bg_color +';color:'+data_sess[s_key].color+'"  rowspan='+data_sess[s_key].row_span+'> <a href="'+view_url+'"  target="_blank">' +  data_sess[s_key].sTitle  + '</a></td>';
                    // tableHtml += '<td '+ (data_sess[s_key].bgColor?'':'class="randombg"') + ' style="background-color:'+ data_sess[s_key].bgColor +';color:'+data_sess[s_key].color+'"  rowspan='+data_sess[s_key].row_span+'>' +  data_sess[s_key].sTitle + '<br/><br/>' + data_sess[s_key].sTime +' - '+ data_sess[s_key].eTime + '</td>';
                    // last_rowspan[halls[key]] = data_sess[s_key].row_span; 
                    last_session[s_hall] = data_sess[s_key]

                }      
                }
                
                tableHtml += '</tr>';
            }



            tableHtml += '</tbody>';

            tableHtml += '</table>';
            return tableHtml;
    }
    function formatTime(minutes) {
        var hours = Math.floor(minutes / 60);
        var mins = minutes % 60;

        var period = "AM";
        if (hours >= 12) {
          period = "PM";
          hours = hours % 12;
        }

        if (hours === 0) {
          hours = 12;
        }

        return hours + ':' + (mins < 10 ? '0' + mins : mins) + ' ' + period;
    }

    function convertToMinutes(time) {
        var splitTime = time.split(':');
        var hours = parseInt(splitTime[0], 10);
        var minutes = parseInt(splitTime[1], 10);
        var totalMinutes = (hours * 60) + minutes;
        return totalMinutes;
    }

    function ConvertStartTime(time) {
        var splitTime = time.split(':');
        var hours = parseInt(splitTime[0]);
        var minutes = parseInt(splitTime[1]);
        console.log(minutes)
        minutes = (minutes < 30) ? 0 : (minutes > 30)? 30 : minutes;    
        return hours+":"+minutes
    }
    
    function randomBgColor()
    {
        var divsArray = document.getElementsByClassName('randombg');
        var uniqueColorIndex = 0;

        for(var i=0; i < divsArray.length; i++){
        uniqueColorIndex  = 'rgb(' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ',' + (Math.floor((256-199)*Math.random()) + 200) + ')';
        divsArray[i].style['background-color'] = uniqueColorIndex;
        // divsArray[i].style['color'] = '#fff'
        };
    }

    function get_head_col_span(lst,h_val,h_key) {
        var count =  0;
        for (var key in lst) {
             if(h_val ==  lst[key][h_key])
            {
                count++
            }
        }
            
        return count;
    }
    
    function check_extra_header(lst,h_key) {
        var count =  0;
        for (var key in lst) {
            console.log(lst[key][h_key])
            if(lst[key][h_key])
            { 
                count++
            }
        }
        console.log("count"  + count)
        return count;
    }
</script>
{% endblock %}