crafty-4/app/frontend/templates/panel/panel_config.html

{% extends ../base.html %}

{% block meta %}
{% end %}

{% block title %}Crafty Controller - {{ translate('panelConfig', 'pageTitle', data['lang']) }}{% end %}

{% block content %}

<div class="content-wrapper">
  {% if data['superuser'] %}
  <ul class="nav nav-tabs col-md-12 tab-simple-styled " role="tablist">
    <li class="nav-item term-nav-item">
      <a class="nav-link active" href="/panel/panel_config" role="tab" aria-selected="false">
        <i class="fas fa-file-signature"></i>Panel Config</a>
    </li>
    <li class="nav-item term-nav-item">
      <a class="nav-link" href="/panel/config_json" role="tab" aria-selected="false">
        <i class="fas fa-file-signature"></i>Config.json</a>
    </li>
  </ul>
  {% end %}

  <!-- Page Title Header Starts-->
  <div class="row page-title-header">
    <div class="col-12">
      <div class="page-header">
        <!-- TODO: Translate the following -->
        <h4 class="page-title">{{ translate('panelConfig', 'pageTitle', data['lang']) }}</h4>
      </div>
    </div>

  </div>
  <!-- Page Title Header Ends-->

  <div class="row">
    <div class="col-md-12 grid-margin">
      <div class="card">
        <div class="card-body">

          <div class="row">
            <div class="col-md-12 col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-header header-sm d-flex justify-content-between align-items-center">
                  <h4 class="card-title"><i class="fas fa-users"></i> {{ translate('panelConfig', 'users', data['lang'])
                    }}</h4>
                  {% if data['user_data']['hints'] %}
                  <span class="too_small" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}" ,
                    data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
                    data-placement="top"></span>
                  {% end %}
                  <!-- TODO: Translate the following -->
                  <div><a class="nav-link" href="/panel/add_user"><i class="fas fa-plus-circle"></i> &nbsp; {{
                      translate('panelConfig', 'newUser', data['lang']) }}</a></div>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <!-- TODO: Translate the following -->
                        <tr class="rounded">
                          <th>{{ translate('panelConfig', 'user', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'enabled', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'allowedServers', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'assignedRoles', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'edit', data['lang']) }}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for user in data['users'] %}
                        <tr>
                          <td><i class="fas fa-user"></i> {{ user.username }}</td>
                          <td>
                            {% if user.enabled %}
                            <span class="text-success">
                              <i class="fas fa-check-square"></i> Yes
                            </span>
                            {% else %}
                            <span class="text-danger">
                              <i class="far fa-times-square"></i> No
                            </span>

                            {% end %}
                          </td>
                          <td id="server_list_{{user.user_id}}">
                            <ul id="{{user.user_id}}">
                              {% for item in data['auth-servers'][user.user_id] %}
                              <li>{{item}}</li>
                              {% end %}
                            </ul>
                          </td>
                          <td id="role_list_{{user.user_id}}">
                            <ul>
                              {% for item in data['user-roles'][user.user_id] %}
                              <li data-toggle="tooltip" title="{{ item }}">{{item}}</li>
                              {% end %}
                            </ul>
                          </td>
                          <td><a href="/panel/edit_user?id={{user.user_id}}"><i class="fas fa-pencil-alt"></i></a></td>
                        </tr>
                        {% end %}
                        {% for user in data['managed_users'] %}
                        <tr>
                          <td><i class="fas fa-user"></i> {{ user.username }}</td>
                          <td>
                            {% if user.enabled %}
                            <span class="text-success">
                              <i class="fas fa-check-square"></i> Yes
                            </span>
                            {% else %}
                            <span class="text-danger">
                              <i class="far fa-times-square"></i> No
                            </span>

                            {% end %}
                          </td>
                          <td id="server_list_{{user.user_id}}">
                            <ul id="{{user.user_id}}">
                              {% for item in data['auth-servers'][user.user_id] %}
                              <li>{{item}}</li>
                              {% end %}
                            </ul>
                          </td>
                          <td id="role_list_{{user.user_id}}">
                            <ul>
                              {% for item in data['user-roles'][user.user_id] %}
                              <li data-toggle="tooltip" title="{{ item }}">{{item}}</li>
                              {% end %}
                            </ul>
                          </td>
                          <td><a href="/panel/edit_user?id={{user.user_id}}"><i class="fas fa-pencil-alt"></i></a></td>
                        </tr>
                        {% end %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12 col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-header header-sm d-flex justify-content-between align-items-center">
                  <h4 class="card-title"><i class="fas fa-user-tag"></i> {{ translate('panelConfig', 'roles',
                    data['lang']) }}</h4>
                  {% if data['user_data']['hints'] %}
                  <span class="too_small2" title="{{ translate('dashboard', 'cannotSee', data['lang']) }}" ,
                    data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
                    data-placement="top"></span>
                  {% end %}
                  <div><a class="nav-link" href="/panel/add_role"><i class="fas fa-plus-circle"></i> &nbsp; {{
                      translate('panelConfig', 'newRole', data['lang']) }}</a></div>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <!-- TODO: Translate the following -->
                        <tr class="rounded">
                          <th>{{ translate('panelConfig', 'role', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'allowedServers', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'roleUsers', data['lang']) }}</th>
                          <th>{{ translate('panelConfig', 'edit', data['lang']) }}</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for role in data['roles'] %}
                        <tr>
                          <td>{{ role.role_name }}</td>
                          <td id="role_list_{{role.role_id}}">
                            <ul id="{{role.role_id}}">
                              {% for item in data['role-servers'][role.role_id] %}
                              <li>{{item}}</li>
                              {% end %}
                            </ul>
                          </td>
                          <td>
                            <ul>
                              {% for user in data['users'] %}
                              {% for ruser in data['user-roles'][user.user_id] %}
                              {% if ruser == role.role_name %}
                              <li>{{ user.username }}</li>
                              {% end %}
                              {% end %}
                              {% end %}
                            </ul>
                          </td>
                          <td><a href="/panel/edit_role?id={{role.role_id}}"><i class="fas fa-pencil-alt"></i></a></td>
                        </tr>
                        {% end %}

                        {% if not data['superuser'] %}
                        {% for role in data['managed_roles'] %}
                        {% if role.role_id not in data['assigned_roles'] %}
                        <tr>
                          <td>{{ role.role_name }}</td>
                          <td id="role_list_{{role.role_id}}">
                            <ul id="{{role.role_id}}">
                              {% for item in data['role-servers'][role.role_id] %}
                              <li>{{item}}</li>
                              {% end %}
                            </ul>
                          </td>
                          <td>
                            <ul>
                              {% for user in data['users'] %}
                              {% for ruser in data['user-roles'][user.user_id] %}
                              {% if ruser == role.role_name %}
                              <li>{{ user.username }}</li>
                              {% end %}
                              {% end %}
                              {% end %}
                            </ul>
                          </td>
                          <td><a href="/panel/edit_role?id={{role.role_id}}"><i class="fas fa-pencil-alt"></i></a></td>
                        </tr>
                        {% end %}
                        {% end %}
                        {% end %}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          {% if data['superuser'] %}
          <div class="row">
            <div class="col-md-12 col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-header header-sm d-flex justify-content-between align-items-center">
                  <h4 class="card-title"><i class="fas fa-user-tag"></i> {{ translate('panelConfig', 'adminControls',
                    data['lang']) }}</h4>
                </div>
                <div class="card-body">
                  <button type="button" class="btn btn-outline-danger clear-comm">{{ translate('panelConfig',
                    'clearComms', data['lang']) }}</button>

                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-6 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">

                  <h4>{{ translate('panelConfig', 'loginImage', data['lang']) }}</h4>
                  <br />
                  <p class="card-description">

                  <form name="zip" method="post" class="server-wizard" onSubmit="wait_msg(true)">
                    {% raw xsrf_form_html() %}
                    <input type="hidden" value="import_zip" name="create_type">

                    <div class="row">
                      <div class="col-sm-12">

                        <div class="col-sm-12">
                          <div class="form-group">
                            <label for="server">{{ translate('panelConfig', 'backgroundUpload', data['lang'])
                              }}</label><br>
                            <span id="upload_input">
                              <input type="file" multiple="false" class="form-control" id="file" name="file" required
                                style="width: 70%;">
                              <button type="button" class="btn btn-info" id="upload-button" onclick="sendFile()"
                                disabled>UPLOAD</button>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                </form>
                </p>
              </div>
            </div>
            <div class="col-sm-6 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <h4>{{ translate('panelConfig', 'loginBackground', data['lang']) }}</h4><br /><br><br />
                  <form id="photo_form">
                    <select class="form-select form-control form-control-lg select-css" id="photo" name="photo"
                      form="photo_form">
                      {% for image in data["backgrounds"] %}
                      <option value="{{image}}">{{image}}</option>
                      {% end %}
                    </select>
                    <div>
                      <br>
                      <h6>{{ translate('panelConfig', 'preview', data['lang']) }}:</h6>
                      <img style="width: 200px; height: 113px;"
                        src="../../static/assets/images/auth/{{ data['background'] }}">
                    </div>
                    <br />
                    <br />
                    <button class="btn btn-outline-success select-photo" type="button">{{ translate('panelConfig',
                      'select', data['lang']) }}</button>
                    <button class="btn btn-outline-danger delete-photo" type="button">{{ translate('panelConfig',
                      'delete', data['lang']) }}</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
          {% end %}
        </div>
      </div>
    </div>
  </div>


</div>

<style>
  .popover-body {
    color: white !important;
    ;
  }
</style>
<!-- content-wrapper ends -->

{% end %}

{% block js %}
<script>
  $(document).ready(function () {
    $('[data-toggle="popover"]').popover();
    if ($(window).width() < 1000) {
      $('.too_small').popover("show");
      $('.too_small2').popover("show");
    }

  });
  $(window).ready(function () {
    $('body').click(function () {
      $('.too_small').popover("hide");
      $('.too_small2').popover("hide");
    });
  });
  $(window).resize(function () {
    // This will execute whenever the window is resized
    if ($(window).width() < 1000) {
      $('.too_small').popover("show");
    }
    else {
      $('.too_small').popover("hide");
    } // New width
    if ($(window).width() < 1000) {
      $('.too_small2').popover("show");
    }
    else {
      $('.too_small2').popover("hide");
    } // New width
  });
  $('#file').change(function () {
    console.log("File changed");
    if ($('#file').val()) {
      $('#upload-button').prop("disabled", false);
      console.log("File changed good");
    }
  });
</script>
<script>

  $(document).ready(function () {
    console.log('ready for JS!')

  });

  $(".show_button").click(function () {
    console.log("showing key");
    api_key = $(this).attr("data-id");
    bootbox.alert({
      backdrop: true,
      title: '',
      message: api_key,
    });
  });

  $('.clear-comm').click(function () {
    var token = getCookie("_xsrf")
    $.ajax({
      type: "POST",
      headers: { 'X-XSRFToken': token },
      url: '/ajax/clear_comm',
      success: function (data) {
      },
    });
  })

  $('.delete-photo').click(function () {
    var token = getCookie("_xsrf")
    let photo = $('#photo').find(":selected").val();
    $.ajax({
      type: "POST",
      headers: { 'X-XSRFToken': token },
      url: '/ajax/delete_photo?photo=' + photo,
      success: function (data) {
        location.reload();
      },
    });
  })

  $('.select-photo').click(function () {
    var token = getCookie("_xsrf")
    let photo = $('#photo').find(":selected").val();
    $.ajax({
      type: "POST",
      headers: { 'X-XSRFToken': token },
      url: '/ajax/select_photo?photo=' + photo,
      success: function (data) {
        window.location.reload();
      },
    });
  })

  var file;
  function sendFile() {
    file = $("#file")[0].files[0]
    document.getElementById("upload_input").innerHTML = '<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">&nbsp;<i class="fa-solid fa-spinner"></i></div></div>'
    let xmlHttpRequest = new XMLHttpRequest();
    let token = getCookie("_xsrf")
    let fileName = file.name
    let target = '/upload'
    let mimeType = file.type
    let size = file.size
    let type = 'background'

    xmlHttpRequest.open('POST', target, true);
    xmlHttpRequest.setRequestHeader('X-Content-Type', mimeType);
    xmlHttpRequest.setRequestHeader('X-XSRFToken', token);
    xmlHttpRequest.setRequestHeader('X-Content-Length', size);
    xmlHttpRequest.setRequestHeader('X-Content-Disposition', 'attachment; filename="' + fileName + '"');
    xmlHttpRequest.setRequestHeader('X-Content-Upload-Type', type);
    xmlHttpRequest.setRequestHeader('X-FileName', fileName);
    xmlHttpRequest.addEventListener('load', (event) => {
      if (event.target.responseText == 'success') {
        console.log('Upload for file', file.name, 'was successful!')
        document.getElementById("upload_input").innerHTML = '<div class="card-header header-sm d-flex justify-content-between align-items-center"><span id="file-uploaded" style="color: gray;">' + fileName + '</span> 🔒</div>';
        setTimeout(function () {
          window.location.reload();
        }, 2000);
      }
      else {
        alert('Upload failed with response: ' + event.target.responseText);
        doUpload = false;
      }
    }, false);
    xmlHttpRequest.addEventListener('error', (e) => {
      console.error('Error while uploading file', file.name + '.', 'Event:', e)
    }, false);
    xmlHttpRequest.send(file);
  }
</script>

{% end %}