Add translations

app/frontend/templates/panel/parts/m_server_controls_list.html

@@ -32,7 +32,7 @@
             {% end %}
             <a class="dropdown-item {% if data['active_link'] == 'metrics' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=metrics" role="tab" aria-selected="true"><i class="fa-solid fa-chart-line"></i> {{ translate('serverDetails', 'metrics', data['lang']) }}</a>
             {% if data['permissions']['Config'] in data['user_permissions'] %}
-            <a class="dropdown-item {% if data['active_link'] == 'webhooks' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=webhooks" role="tab" aria-selected="true"><i class="fas fa-users"></i>Webhooks</a>
+            <a class="dropdown-item {% if data['active_link'] == 'webhooks' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=webhooks" role="tab" aria-selected="true"><i class="fa-solid fa-webhook"></i>{{ translate('webhooks', 'webhooks', data['lang']) }}</a>
             {% end %}
         </div>
     </div>

app/frontend/templates/panel/parts/server_controls_list.html

@@ -56,7 +56,7 @@
     {% if data['permissions']['Config'] in data['user_permissions'] %}
     <li class="nav-item term-nav-item">
         <a class="nav-link {% if data['active_link'] == 'webhooks' %}active{% end %}" href="/panel/server_detail?id={{ data['server_stats']['server_id']['server_id'] }}&subpage=webhooks" role="tab" aria-selected="true">
-        <i class="fas fa-users"></i>Webhooks</a>
+            <i class="fa-solid fa-webhook"></i>{{ translate('webhooks', 'webhooks', data['lang']) }}</a>
     </li>
     {% end %}
 </ul>

app/frontend/templates/panel/server_webhook_edit.html

@@ -51,22 +51,22 @@
                 <br>
                 <br>
                 <div class="form-group">
-                  <label for="name">{{ translate('serverSchedules', 'name' , data['lang']) }}</label>
+                  <label for="name">{{ translate('webhooks', 'name' , data['lang']) }}</label>
                   <input type="input" class="form-control" name="name" id="name_input"
                     value="{{ data['webhook']['name']}}" maxlength="30" placeholder="Name" required>
                 </div>
                 <div class="form-group">
-                  <label for="url">Webhook URL</label>
+                  <label for="url">{{ translate('webhooks', 'url', data['lang']) }}</label>
                   <input type="input" class="form-control" name="url" id="url"
                     value="{{ data['webhook']['url']}}" placeholder="https://webhooks.craftycontrol.com/fakeurl" required>
                 </div>
                 <div class="form-group">
-                  <label for="bot_name">Bot {{ translate('serverSchedules', 'name' , data['lang']) }}</label>
+                  <label for="bot_name">{{ translate('webhooks', 'bot_name' , data['lang']) }}</label>
                   <input type="input" class="form-control" name="bot_name" id="bot_name_input"
                     value="{{ data['webhook']['bot_name']}}" maxlength="30" placeholder="Crafty Controller" required>
                 </div>
                 <div class="form-group">
-                  <label for="trigger">Trigger</label>
+                  <label for="trigger">{{ translate('webhooks', 'trigger', data['lang']) }}</label>
                   <select class="form-control selectpicker show-tick" name="trigger" id="trigger-select" data-icon-base="fas" data-tick-icon="fa-check" multiple data-style="custom-picker">
                   {% for trigger in data['triggers'] %}
                   {% if trigger in data["webhook"]["trigger"] %}
@@ -78,7 +78,7 @@
                   </select>
                 </div>
                 <div class="form-group">
-                  <label for="body">Body</label>
+                  <label for="body">{{ translate('webhooks', 'webhook_body', data['lang']) }}</label>
                     <textarea id="body-input" name="body" rows="4" cols="50">
                       {{ data["webhook"]["body"] }}
                     </textarea>
@@ -86,7 +86,7 @@
                 <div class="form-check-flat">
                   <label for="enabled" class="form-check-label ml-4 mb-4">
                     <input type="checkbox" class="form-check-input" id="enabled" name="enabled" checked=""
-                      value="1">{{ translate('serverScheduleConfig', 'enabled' , data['lang']) }}
+                      value="1">{{ translate('webhooks', 'enabled', data['lang']) }}
                   </label>
 
                 </div>

app/frontend/templates/panel/server_webhooks.html

@@ -44,8 +44,7 @@
             <div class="col-md-12 col-sm-12" style="overflow-x:auto;">
               <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-calendar"></i> {{ translate('serverSchedules',
+                  <h4 class="card-title"><i class="fas fa-calendar"></i> {{ translate('webhooks', 'webhooks', data['lang']) }} </h4>
-                    'scheduledTasks', data['lang']) }} </h4>
                   {% if data['user_data']['hints'] %}
                   <span class="too_small" title="{{ translate('serverSchedules', 'cannotSee', data['lang']) }}" ,
                     data-content="{{ translate('serverSchedules', 'cannotSeeOnMobile', data['lang']) }}" ,
@@ -53,20 +52,20 @@
                   {% end %}
                   <div><button
                       onclick="location.href=`/panel/add_webhook?id={{ data['server_stats']['server_id']['server_id'] }}`"
-                      class="btn btn-info">{{ translate('serverSchedules', 'create', data['lang']) }}<i
+                      class="btn btn-info">{{ translate('webhooks', 'new', data['lang']) }}<i
                         class="fas fa-pencil-alt"></i></button></div>
                 </div>
                 <div class="card-body">
-                                    <table class="table table-hover d-none d-lg-block responsive-table" id="schedule_table" width="100%" style="table-layout:fixed;">
+                  <table class="table table-hover d-none d-lg-block responsive-table" id="webhook_table" width="100%" style="table-layout:fixed;">
                     <thead>
                       <tr class="rounded">
-                        <th style="width: 10%; min-width: 10px;">Name
+                        <th style="width: 10%; min-width: 10px;">{{ translate('webhooks', 'name', data['lang']) }}
                         </th>
-                        <th style="width: 20%; min-width: 50px;">Webhook Type</th>
+                        <th style="width: 20%; min-width: 50px;">{{ translate('webhooks', 'type', data['lang']) }}</th>
-                        <th style="width: 50%; min-width: 50px;">Trigger</th>
+                        <th style="width: 50%; min-width: 50px;">{{ translate('webhooks', 'trigger', data['lang']) }}</th>
-                        <th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'enabled',
+                        <th style="width: 10%; min-width: 50px;">{{ translate('webhooks', 'enabled',
                           data['lang']) }}</th>
-                        <th style="width: 10%; min-width: 50px;">{{ translate('serverSchedules', 'edit', data['lang'])
+                        <th style="width: 10%; min-width: 50px;">{{ translate('webhooks', 'edit', data['lang'])
                           }}</th>
                       </tr>
                     </thead>
@@ -94,7 +93,44 @@
                           <button data-webhook={{ webhook.id }} class="btn btn-danger del_button">
                             <i class="fas fa-trash" aria-hidden="true"></i>
                           </button>
-                          <button data-webhook={{ webhook.id }} data-toggle="tooltip" title="Test Websocket" class="btn btn-outline-warning test-socket">
+                          <button data-webhook={{ webhook.id }} data-toggle="tooltip" title="{{ translate('webhooks', 'run', data['lang']) }}" class="btn btn-outline-warning test-socket">
+                            <i class="fa-solid fa-vial"></i>
+                          </button>
+                        </td>
+                      </tr>
+                      {% end %}
+                    </tbody>
+                  </table>
+                  <table class="table table-hover d-block d-lg-none responsive-table" id="webhook_table_mini" width="100%" style="table-layout:fixed;">
+                    <thead>
+                      <tr class="rounded">
+                        <th style="width: 33.33%; min-width: 10px;">Name
+                        </th>
+                        <th style="width: 33.33%; min-width: 50px;">{{ translate('webhooks', 'enabled',
+                          data['lang']) }}</th>
+                        <th style="width: 33.33%; min-width: 50px;">{{ translate('webhooks', 'edit', data['lang'])
+                          }}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {% for webhook in data['webhooks'] %}
+                      <tr>
+                        <td id="{{webhook.name}}" class="id">
+                          <p>{{webhook.name}}</p>
+                        </td>
+                        <td id="{{webhook.enabled}}" class="enabled">
+                          <input style="width: 10px !important;" type="checkbox" class="webhook-enabled-toggle" data-webhook-id="{{webhook.id}}" data-webhook-enabled="{{ 'true' if webhook.enabled else 'false' }}">
+                        </td>
+                        <td id="webhook_edit" class="action">
+                          <button onclick="window.location.href='/panel/webhook_edit?id={{ data['server_stats']['server_id']['server_id'] }}&webhook_id={{webhook.id}}'" class="btn btn-info">
+                            <i class="fas fa-pencil-alt"></i>
+                          </button>
+                          <br>
+                          <br>
+                          <button data-webhook={{ webhook.id }} class="btn btn-danger del_button">
+                            <i class="fas fa-trash" aria-hidden="true"></i>
+                          </button>
+                          <button data-webhook={{ webhook.id }} data-toggle="tooltip" title="{{ translate('webhooks', 'run', data['lang']) }}" class="btn btn-outline-warning test-socket">
                             <i class="fa-solid fa-vial"></i>
                           </button>
                         </td>
@@ -153,6 +189,49 @@
 
 {% block js %}
 <script>
+    $(document).ready(function () {
+    console.log('ready for JS!')
+    $('#webhook_table').DataTable({
+      'order': [4, 'asc'],
+    }
+    );
+
+  });
+  $(document).ready(function () {
+    console.log('ready for JS!')
+    $('#webhook_table_mini').DataTable({
+      'order': [2, 'asc']
+    }
+    );
+    document.getElementById('webhook_table_mini_wrapper').hidden = true;
+  });
+  $(document).ready(function () {
+    $('[data-toggle="popover"]').popover();
+    if ($(window).width() < 1000) {
+      $('.too_small').popover("show");
+      document.getElementById('webhook_table_wrapper').hidden = true;
+      document.getElementById('webhook_table_mini_wrapper').hidden = false;
+    }
+
+  });
+  $(window).ready(function () {
+    $('body').click(function () {
+      $('.too_small').popover("hide");
+    });
+  });
+  $(window).resize(function () {
+    // This will execute whenever the window is resized
+    if ($(window).width() < 1000) {
+      $('.too_small').popover("show");
+      document.getElementById('webhook_table_wrapper').hidden = true;
+      document.getElementById('webhook_table_mini_wrapper').hidden = false;
+    }
+    else {
+      $('.too_small').popover("hide");
+      document.getElementById('webhook_table_wrapper').hidden = false;
+      document.getElementById('webhook_table_mini_wrapper').hidden = true;
+    } // New width
+  });
 
   function debounce(func, timeout = 300) {
     let timer;
@@ -208,8 +287,7 @@
     var webhook_id = $(this).data('webhook');
 
     bootbox.confirm({
-      title: "{{ translate('serverSchedules', 'areYouSure', data['lang']) }}",
+      message: "{{ translate('webhooks', 'areYouSureDel', data['lang']) }}",
-      message: "{{ translate('serverSchedules', 'confirmDelete', data['lang']) }}",
       buttons: {
         cancel: {
           label: '<i class="fas fa-times"></i> {{ translate("serverSchedules", "cancel", data['lang']) }}'
@@ -232,8 +310,7 @@
     var webhook_id = $(this).data('webhook');
 
     bootbox.confirm({
-      title: "{{ translate('serverSchedules', 'areYouSure', data['lang']) }}",
+      message: "{{ translate('webhooks', 'areYouSureRun', data['lang']) }}",
-      message: "{{ translate('serverSchedules', 'confirmDelete', data['lang']) }}",
       buttons: {
         cancel: {
           label: '<i class="fas fa-times"></i> {{ translate("serverSchedules", "cancel", data['lang']) }}'

app/translations/en_EN.json

@@ -626,5 +626,20 @@
         "uses": "Number of uses allowed (-1==No Limit)",
         "manager": "Manager",
         "selectManager": "Select Manager for User"
+    },
+    "webhooks": {
+        "webhooks": "Webhooks",
+        "name": "Name",
+        "type": "Webhook Type",
+        "trigger": "Trigger",
+        "enabled": "Enabled",
+        "url": "Webhook URL",
+        "bot_name": "Bot Name",
+        "webhook_body": "Webhook Body",
+        "areYouSureDel": "Are you sure you want to delete this webhook?",
+        "areYouSureRun": "Are you sure you want to test this websocket?",
+        "edit": "Edit",
+        "run": "Test Run Webhook",
+        "new": "New Webhook"
     }
 }