Sindbad~EG File Manager

{% extends "neuro_backoffice/bo_layout.html" %} {% block title %}video{% endblock %} {% block content %}
<Style>
    /* Parent Wrapper Element */

figure {
  position: relative;
  width: 100%;
  height: 480px;
  /* For responsive video */
  /* padding-bottom: 56.25%;*/
  /* padding-top: 25px; */
  /* height: 0; */
}


/* Sibling Overlay Element */

figcaption {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

object {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

label {
    display: inline-block;
    margin-bottom: 0rem !important;
}


h6 {
    margin-bottom: 0.2rem;
    font-weight: 500;
    line-height: 1.2;
}

figure {
    /* position: relative; */
    /* width: 100%; */
    /* height: 480px; */
    padding-bottom: 56.25%;
    /* padding-top: 25px; */
    /* height: 0; */
}
</Style>
<header>
    <div class="container bg-white">
      <div class="row">
        <div class="col-md-8">
          <img src="..static/images/tricon_logo.JPG" alt="TNOA 2023">
        </div>
        <div class="col-md-4 d-flex align-items-center">
          <h5 class="text-right">Video recording of the live program</h5>
        </div>
      </div>
    </div>
  </header>
  <!--    <div class="row mb-3">-->
  <!--      <div class="col-lg-1 col-sm-12 text-md-right text-center">-->
  <!--        @if(isset(Society::getSociety()->session_time))-->
           <p class="d-inline "> Session Time : <span class="h5"><span id="countdown" class="badge badge-danger">00:00</span></span> </p>
  <!--        @endif-->
  <!--    </div>-->
  <!--</div>-->
<div class="container sub"> 
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-12 text-left">
      <label class="h5">Welcome {{data.prefix or ''}}{{data.full_name or ''}}</label>
        {% set session_end_at = data.session_end_time %}
        <input type="hidden" value="{{session_end_at}}" id="session_end_at" />
    </div>
    <div class="col-lg-5 col-sm-12 col-md-5 text-md-right text-center">
      <div class="counter">
        <span class='e-m-days' style="display:none;">0</span>  Session logs off in 
        0<span class='e-m-hours'>{{diff_hour}}</span>:
        <span class='e-m-minutes'>{{diff_minutes}}</span>:
        <span class='e-m-seconds'>{{diff_seconds}}</span>
        <span class='e-m-txt'></span> hours
      </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-12 text-right">
      <a href="{{url_for('user.Logout')}}" class="btn btn-danger">Logout</a>
    </div>
  </div>
</div>
<div class="container bg-white">
  
  <div class="row">
    <div class="col-12  mt-3" style="padding: 0px 40px !important;">
      <table class="table table-striped table-hover">
        <thead class="table-dark">
          <tr>
            <th>Number</th>
            <th>Title</th>
            <!-- <th>Speaker</th> -->

          </tr>
        </thead>
        <tbody>
          {% if video_link : %}
              {% for row in video_link : %}
                <tr>
                  <td data-label = "Number" style="text-align: center;">{{loop.index}}</td>
                  <td data-label = "Title"> <a href="{{url_for('user.ViewVideo', user_id=enc_user_id,video_id = row.video_id)}}">{{row.video_name | safe}}</a> </td>
                  <!-- <td data-label = "Speaker"><a href="{{url_for('user.ViewVideo', user_id=enc_user_id,video_id = row.video_id)}}">{{row.speaker_name or ''  | safe}}</a></td> -->
                </tr>
              {% endfor %}
          {% else : %}
            <tr>
              <td colspan="3"><span class="red;">Records does not exist.</span> </td>
            </tr>
          {% endif %}

        </tbody>
      </table>
      
      <br/>
      
      <!-- <a href="https://forms.gle/SEYyfAcXUAxsG5Y59" target="_blank"><h4><span style="color:#000000 !important;">Please take a moment to attempt this self-assessment quiz,</span><span style="color:#950d3c !important;"> by clicking here</span> </h4></a>
 -->
    </div>
  </div>    


  {% if video_link :%}
  {% for row in video_link : %}
  <!-- <div class="row">
    <div class="col-12 p-2 mt-3">
      <h4> {{row.video_name | safe}}</h4>
      <h6 class="text-dark"> {{row.speaker_name or ''  | safe}}</h6>
    </div>
  </div> -->
  <div class="row mt-1 text-center">       
    {% for mesg in get_flashed_messages(category_filter=["successMsg"]) %}
       <div class="alert alert-success text-align-center successMessage alert-dismissible" >
         <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
         <h6>{{ mesg|safe }}</h6>
       </div>
    {% endfor %}
    {% for mesg in get_flashed_messages(category_filter=["errorMsg"]) %}
      <div class="alert alert-danger text-align-center successMessage" id="successMessage">
         <p class="close" data-dismiss="alert" aria-label="close">&times;</p>
         <h6>{{ mesg|safe }}</h6>  
      </div>
    {% endfor %}       
    <input type="hidden" name="user_id" id="user_id" value="{{data.user_id}}" />
    <input type="hidden" name="auto_login_id" id="auto_login_id" value="{{data.auto_login_id}}" />
      
  </div>

  {% endfor %}
  {% else %}
    <div class="row mt-1">
      <input type="hidden" name="user_id" id="user_id" value="{{data.user_id}}" />
      <input type="hidden" name="auto_login_id" id="auto_login_id" value="{{data.auto_login_id}}" />
      No Videos
    </div>      
  {% endif %}
    <!-- <br />
    <div class="row my-3 p-2">
        <div class="col text-center">
            <a href="{{url_for('user.Logout')}}" class="btn btn-danger">Logout</a>
        </div>
    </div> -->
</div>
{% endblock %}

{% block script %}
<script type="text/javascript" language="javascript">
  var BaseUrl = document.location.origin;

$(document).ready(function()
{



    $(function() {
             function getCounterData(obj) {
              var days = parseInt($('.e-m-days', obj).text());
              var hours = parseInt($('.e-m-hours', obj).text());
              var minutes = parseInt($('.e-m-minutes', obj).text());
              var seconds = parseInt($('.e-m-seconds', obj).text());

              return seconds + (minutes * 60) + (hours * 3600) + (days * 3600 * 24);
            }

            function setCounterData(s, obj) {
              var days = Math.floor(s / (3600 * 24));
              var hours = Math.floor((s % (60 * 60 * 24)) / (3600));
              var minutes = Math.floor((s % (60 * 60)) / 60);
              var seconds = Math.floor(s % 60);

            //   console.log(days, hours, minutes, seconds);
            if(minutes < 10)
              {
                 minutes =  ('0' + minutes).slice(-2);
                 // alert(minutes);
                 // minutes = "0"+minutes;
              }
              if(seconds < 10)
              {
                 // alert(seconds);
                  seconds = ('0' + seconds).slice(-2);
                  // seconds = "0"+seconds;
              }

              $('.e-m-hours', obj).html(hours);
              $('.e-m-minutes', obj).html(minutes);
              $('.e-m-seconds', obj).html(seconds);
            }

            var count = getCounterData($(".counter"));

            var timer = setInterval(function() {
              count--;
              if (count == 0) {
               url_1 = BaseUrl+"/logout";

              window.location = url_1;


                // clearInterval(timer);
                return;
              }
              setCounterData(count, $(".counter"));
            }, 1000);
          });

});

        
</script>

{% endblock %}