digitaleagenturnc/news/templates/news/news_management.html

{% extends "users/base.html" %}
{% block content %}
{% if request.user.profile.agency.module_news %}
<div class="content-section col-12">
  <h3>News&nbsp;<small><i data-toggle="tooltip" data-placement="top" title="Hier können aktuelle Nachrichten für die Agentur erstellt und verwaltet werden." class="far fa-question-circle"></i></small>

      {% if perms.users.modulenews %}
      <a class="btn btn-sm btn-primary" href="{% url 'news-add' %} " style="float: right" data-toggle="tooltip" data-placement="top" title="Neue News für Ihre Agentur erstellen"><i class="fas fa-plus"></i>&nbsp;News</a>
      {% endif %}
    <small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
  </h3>
  <hr>

  <div class="row">
    <div class="col-12">
    <ul class="nav nav-tabs" id="news_tabs" role="tablist">
     {% if perms.users.modulenews %}
      <li class="nav-item">
          <a class="nav-link" id="act" data-toggle="tab" href="#t_act" role="tab" aria-controls="news" aria-selected="false">Aktuelle</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" id="coming" data-toggle="tab" href="#t_coming" role="tab" aria-controls="coming" aria-selected="false">Ausstehende</a>
      </li>
      {% endif %}

      <li class="nav-item">
          <a class="nav-link" id="archiv" data-toggle="tab" href="#t_archiv" role="tab" aria-controls="archiv" aria-selected="false">Archiv</a>
      </li>

    </ul>
  </div>
    <div class="col">
    <div class="tab-content" id="tab_contents">
      {% if perms.users.modulenews %}
        <div class="tab-pane fade" id="t_act" role="tabpanel" aria-labelledby="act">
            <h5 class="mt-3"><a href="" style="color: #000000;">Aktuelle News</a></h5>
            <hr>
            <div class="row">
            <div class="table-responsive">
            <table class="table table-hover"  id="activenews" >
                  <thead>
                  <tr>
                    <th scope="col">Titel</th>
                    <th scope="col">Erstellt von</th>
                    <th scope="col">Erstellt am</th>
                    <th scope="col">Sichtbar von/bis</th>
                    <th scope="col">&nbsp;</th>
                  </tr>
                </thead>
                <tbody id="tableresults">
                 {% for news_single in news %}
                  <tr>
                      <td><a href="{% url 'news-single' news_single.pk %}">{{news_single.name }}</a></td>
                      <td>{{ news_single.created_by.first_name }} {{ news_single.created_by.last_name }}</td>
                      <td data-sort='{{ news_single.created_date|date:"U" }}'>{{ news_single.created_date }}</td>
                      <td data-sort='{{ news_single.go_online_on|date:"U" }}'>{{ news_single.go_online_on|date:"d.m.Y, H:i"}} {% if news_single.go_offline_on != None %} bis {% endif %} {{ news_single.go_offline_on|date:"d.m.Y, H:i"}}</td>
                       <td>
                        {% if news_single.created_by == request.user or perms.users.news_management %}
                          <a style="float: right" class="btn btn-secondary btn-sm ml-2" href="{% url 'news-delete' news_single.pk %}">
                            <small><i class="fas fa-trash"></i></small>
                          </a>
                          &nbsp;
                          <a style="float: right" class="btn btn-secondary btn-sm ml-2" href="{% url 'news-gotoarchiv' news_single.pk %}">
                            <small><i class="fas fa-archive"></i></small>
                          </a>
                          &nbsp;
                          <a style="float: right" class="btn btn-secondary btn-sm " href="{% url 'news-update' news_single.pk %}">
                            <small><i class="fas fa-pen"></i></small>
                          </a>
                        {% endif %}
                        </div>
                      </td>
                  </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
       </div>
       {% endif %}
       {% if perms.users.modulenews %}
      <div class="tab-pane fade" id="t_coming" role="tabpanel" aria-labelledby="coming">
            <h5 class="mt-3"><a href="" style="color: #000000;">Ausstehende News</a></h5>
            <hr>
            <div class="row">
                <div class="table-responsive">
                <table class="table table-hover" id="comingnews">
                      <thead>
                      <tr>
                        <th scope="col">Titel</th>
                        <th scope="col">Erstellt von</th>
                        <th scope="col">Erstellt am</th>
                        <th scope="col">Sichtbar von/bis</th>
                        <th scope="col">&nbsp;</th>
                      </tr>
                    </thead>
                    <tbody id="tableresults_arch">
                     {% for news_single in news_coming %}
                      <tr>
                          <td><a href="{% url 'news-single' news_single.pk %}">{{news_single.name }}</a></td>
                          <td>{{ news_single.created_by.first_name }} {{ news_single.created_by.last_name }}</td>
                          <td data-sort='{{ news_single.created_date|date:"U" }}'>{{ news_single.created_date }}</td>
                          <td data-sort='{{ news_single.go_online_on|date:"U" }}'>{{ news_single.go_online_on|date:"d.m.Y, H:i"}} bis {{ news_single.go_offline_on|date:"d.m.Y, H:i"}}</td>
                           <td>
                            {% if news_single.created_by == request.user or perms.users.news_management %}
                              <a style="float: right" class="btn btn-secondary btn-sm ml-2" href="{% url 'news-delete' news_single.pk %}">
                                <small><i class="fas fa-trash"></i></small>
                              </a>
                              &nbsp;
                              <a style="float: right" class="btn btn-secondary btn-sm " href="{% url 'news-update' news_single.pk %}">
                                <small><i class="fas fa-pen"></i></small>
                              </a>
                            {% endif %}
                          </td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
       </div>
       {% endif %}






       <div class="tab-pane fade" id="t_archiv" role="tabpanel" aria-labelledby="act">
            <h5 class="mt-3"><a href="" style="color: #000000;">Archivierte News</a></h5>
            <hr>
            <div class="row">
                <div class="table-responsive">
                <table class="table table-hover" id="archnews">
                      <thead>
                      <tr>
                        <th scope="col">Titel</th>
                        <th scope="col">Erstellt von</th>
                        <th scope="col">Erstellt am</th>
                        <th scope="col">Sichtbar von/bis</th>
                        <th scope="col">&nbsp;</th>
                      </tr>
                    </thead>
                    <tbody id="tableresults_arch">
                     {% for news_single in news_arch %}
                      <tr>
                          <td><a href="{% url 'news-single' news_single.pk %}">{{news_single.name }}</a></td>
                          <td>{{ news_single.created_by.first_name }} {{ news_single.created_by.last_name }}</td>
                          <td data-sort='{{ news_single.created_date|date:"U" }}'>{{ news_single.created_date }}</td>
                          <td data-sort='{{ news_single.go_online_on|date:"U" }}'>{{ news_single.go_online_on|date:"d.m.Y, H:i"}} bis {{ news_single.go_offline_on|date:"d.m.Y, H:i"}}</td>
                           <td>
                            {% if news_single.created_by == request.user or perms.users.news_management %}
                              <a style="float: right" class="btn btn-secondary btn-sm ml-2" href="{% url 'news-delete' news_single.pk %}">
                                <small><i class="fas fa-trash"></i></small>
                              </a>
                              &nbsp;
                              <a style="float: right" class="btn btn-secondary btn-sm " href="{% url 'news-update' news_single.pk %}">
                                <small><i class="fas fa-pen"></i></small>
                              </a>
                            {% endif %}
                          </td>
                      </tr>
                    {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
       </div>
     </div>
    </div>

    <style>
  /* DATATABLES */
.paginate_button {
  padding: 0px !important;
  border: 0px !important;
}
  </style>
<script>
$(document).ready(function(){

  $('#activenews').DataTable({
     order: [2, 'desc'], 
      "language": {
        "search" : "Suche",
        "info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
        "lengthMenu":     "Zeige _MENU_ Einträge",
        "zeroRecords": "Nichts gefunden",
        "infoEmpty": "Keine Einträge",
        "paginate": {
            "first":      "Erste",
            "last":       "Letzte",
            "next":       "Nächste",
            "previous":   "Zurück"
        },
      },
      "pageLength": 50,
      "buttons" : {
        "className" : "btn-danger"
      }
    });

  $('#archnews').DataTable({
     order: [2, 'desc'],
      "language": {
        "search" : "Suche",
        "info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
        "lengthMenu":     "Zeige _MENU_ Einträge",
        "zeroRecords": "Nichts gefunden",
        "infoEmpty": "Keine Einträge",
        "paginate": {
            "first":      "Erste",
            "last":       "Letzte",
            "next":       "Nächste",
            "previous":   "Zurück"
        },
      },
      "pageLength": 50,
      "buttons" : {
        "className" : "btn-danger"
      }
    });

    $('#comingnews').DataTable({
      order: [2, 'desc'],
      "language": {
        "search" : "Suche",
        "info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
        "lengthMenu":     "Zeige _MENU_ Einträge",
        "zeroRecords": "Nichts gefunden",
        "infoEmpty": "Keine Einträge",
        "paginate": {
            "first":      "Erste",
            "last":       "Letzte",
            "next":       "Nächste",
            "previous":   "Zurück"
        },
      },
      "pageLength": 50,
      "buttons" : {
        "className" : "btn-danger"
      }
    });



  $('#news_tabs li:first-child a').tab('show');

  $("#tableSearch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#tableresults tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

  $("#tableSearch_arch").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#tableresults_arch tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

});

$('#news_tabs a').on('click', function (e) {
      e.preventDefault()
      $(this).tab('show')
    });

</script>
{% else %}
<h3>Das Modul News wurde in ihrer Agentur deaktiviert.</h3>
{% endif %}

<!-- YOUTUBE PART START -->
<!--
//COPY THAT
<small><i onclick="javascript:$('#youtubevideoinformation').modal('toggle');" class="far fa-play-circle"></i></small>
-->
<script type="text/javascript">

//CHANGE
var VIDEOURL = "ZKruAgmtZCk"
var MODALNAME = "#youtubevideoinformation"
var VIDEOTITLE = "Informationsvideo News"

$(document).ready(function(){

    $("#modaltitle_video").html(VIDEOTITLE);

    //VIDEOCONTROLS
    $( MODALNAME ).on('shown.bs.modal', function(e){
      player.playVideo();
    });

    $( MODALNAME ).on('hidden.bs.modal', function(e){
      player.pauseVideo();
    });
});
   //VIDEOPLAYER
  var player;

  function onYouTubeIframeAPIReady() {
      player = new YT.Player('video-placeholder', {
          width: 760,
          height: 500,
          videoId: VIDEOURL,
      });
  }

</script>
<script src="https://www.youtube.com/iframe_api"></script>
<!-- VIDEOMODAL -->
<div class="modal fade" id="youtubevideoinformation" tabindex="-1"  role="dialog" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modaltitle_video"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="min-height: 500px;">
        <div id="video-placeholder"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>
<!-- YOUTUBE PART ENDE -->

{% endblock content %}