Sindbad~EG File Manager

{% extends 'current_session/user/layout.html' %}
{% block title %}Session{% endblock %}
{% block content %}
<style type="text/css">
  .active
  {
    background-color: #0c7080;
    color: white
  }
  .btn-session
  {
    height: 100%;
    white-space:break-spaces;
    font-weight: bold;
    margin: 0px !important;
  }
</style>
<div class="container">
<form>
  <div class="row">
    <div class="col-md-8 offset-md-2 mt-4 text-center">
      <a href="{{url_for('currentsession.getHalls',conf_id=conf_id,conf_key=conf_key)}}" class="btn btn-danger"><i class="fa fa-arrow-circle-left" style="font-size: 1.5em;">Back</i></a>
    </div>
    <div class="col-md-12 text-center mt-3">
      <div id="msg_div" style="min-height: 60px;max-height:250px;background-color: #ECE9E9;text-align: center;color:#155724;vertical-align: middle; font-weight:bold;font-size: 18px;padding: 10px; display: none;">
        <label id="msg_label"></label>
      </div>
    </div>
    {% if getSessionName: %}
    <div class="col-md-12 text-center mt-3">
      <h4 class="text-dark font-weight-bold">{{getSessionName[0].dt.strftime('%d-%m-%Y')}} [{{getSessionName[0].hall}}]</h4>
    </div>
    <div class="col-md-8 text-center offset-md-2 mt-2">
     <!--   <div class="card bg-warning" id="card_noactive">
          <div class="card-body" style="cursor: pointer;" onclick="setNoActive('{{getSessionName[0].dt}}','{{getSessionName[0].hall_id}}')">
              <span class="font-weight-bold">Click here to deactivate the active session</span>
          </div>
        </div>  -->
          {% set is_active_session = namespace(val=0) %} 
          {% set active_style = namespace(val=0) %} 

       {% for session_data in getSessionName %}
        {% if session_data.is_active|int == 1 : %}
          {% set is_active_session.val = 1 %}
        {% endif %}
       {% endfor %}  

      {% for session_data in getSessionName %}
        {% if session_data.is_active|int == 1 : %}
          {% set active_style.val = "active" %}
        {% else %}  
          {% set active_style.val = "" %}
        {% endif %}
        <div class="card {{active_style.val}} my-2" id="card_{{session_data.asession_id}}">
          <div class="card-body p-0" style="cursor: pointer;"   id="{{session_data.asession_id}}" 
          >
            <div class="row">
              <div class="col-md-10 col-lg-10 col-8 p-3"> 
                <span class="font-weight-bold" style="text-transform: uppercase;white-space: normal;">{{session_data.session_name}}</span><br>
                <span class="text-danger">
                {%if session_data.session_name != 'No Active Session' %} 
                [{{session_data.starts_by.strftime('%H:%M')}} - 
                   {{session_data.ends_by.strftime('%H:%M')}} ]{% endif %} </span>

                      <input type="hidden" name="hall_id" id="hall_id" value="{{session_data.hall_id}}">
                      <input type="hidden" name="session_name" id="session_name_{{session_data.asession_id}}" value="{{session_data.session_name}}">
              </div>
              <div class="col-md-2 col-lg-2 col-4"> 
                          
                        <button type="button" id="btn-start-{{session_data.asession_id}}"  onclick="getactive('{{session_data.asession_id}}',1)" class="btn btn-warning btn-block btn-session btn-start"
                        style="{{ 'display:none;' if is_active_session.val|int == 1 }}"    >Start Session</button>
                      
                        <button type="button" id="btn-stop-{{session_data.asession_id}}" onclick="getactive('{{session_data.asession_id}}',0)" class="btn btn-danger btn-block btn-session btn-stop"  style="{{ 'display:none' if active_style.val != 'active' }}"  >Stop Session</button>
                      
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
 <!--      <div class="card bg-warning" id="card_noactive">
          <div class="card-body" style="cursor: pointer;" onclick="setNoActive('{{getSessionName[0].dt}}','{{getSessionName[0].hall_id}}')">
              <span class="font-weight-bold">Click here to deactivate the active session</span>
          </div>
      </div>     -->
    </div>

    <div class="col-md-8 offset-md-2 mt-4 text-center">
      <a href="{{url_for('currentsession.getHalls',conf_id=conf_id,conf_key=conf_key)}}" class="btn btn-danger"><i class="fa fa-arrow-circle-left" style="font-size: 1.5em;">Back</i></a>
     
    </div>
    {% endif %}
  </div>
</form>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript">

var BaseUrl = document.location.origin     
var conf_id = "{{conf_id}}"
var conf_key = "{{conf_key}}"

function getactive(asession_id,is_active) {
  var hall_id      = $("#hall_id").val();
  var session_name = $("#session_name_"+asession_id).val();

  
  
  
  
  if (is_active==0) {
     $('.card').removeClass('active');

     $(".btn-stop").attr('disabled','disabled')
  } 
  else {
    $('.card').removeClass('active');
    $('#card_'+asession_id).addClass('active');

    $(".btn-start").attr('disabled','disabled')
  }
  
  $.ajax({
            type: 'POST', 
            url: BaseUrl+"/"+conf_id+"/"+conf_key+"/save_active_session",
            data: {
                'is_active':is_active,
                'hall_id'  : hall_id,
                'asession_id':asession_id
            },
            dataType: 'json',
            success: function(data)
                {
                    var status= data.status;
                    var msg = data.msg;
                    session_name += msg
                    if (status ==1) 
                    {
                      
                      $("#msg_div").show();
                      $("#msg_label").html(session_name);
                      $("#msg_div").css("background" ,"#d4edda" );

                      if (is_active==1) {
                        $(".btn-start").hide()
                        $("#btn-stop-"+asession_id).show()
                        $(".btn-stop").removeAttr('disabled')

                      }
                      else
                      {
                        $(".btn-stop").hide()
                        $(".btn-start").show() 
                        $(".btn-start").removeAttr('disabled')
                      }

                    }
                    else 
                    {
                      $("#msg_div").show();
                      $("#msg_label").html(msg);
                      $("#msg_div").css("background" ,"red" );
                      $("#msg_div").css("color" ,"white" );
                    }

                },
            error: function(XMLHttpRequest, textStatus, errorThrown) 
                {
                   // alert(textStatus)
                   alert("Server error, please refresh this page and try again")
                } 
        });         
}

function setNoActive(current_date,abs_hall_id) {

  
  $.ajax({
            type: 'POST', 
            url: BaseUrl+"/"+conf_id+"/"+conf_key+"/set_no_active_session",
            data: {
                'is_active':0,
                'abs_hall_id'  : abs_hall_id,
                'current_date':current_date
            },
            dataType: 'json',
            success: function(data)
                {
                    var status= data.status;
                    var msg = data.msg;
                    
                    $('.card').removeClass('active');
                    if (status ==1) 
                    {
                      
                      $("#msg_div").show();
                      $("#msg_label").html(msg);
                      $("#msg_div").css("background" ,"#d4edda" );
                    }
                    else 
                    {
                      $("#msg_div").show();
                      $("#msg_label").html(msg);
                      $("#msg_div").css("background" ,"red" );
                      $("#msg_div").css("color" ,"white" );
                    }              
                },
            error: function(XMLHttpRequest, textStatus, errorThrown) 
                {

                } 
        });         
}
      

</script>
{% endblock %}