dashboard/public/templates/views/logs.tmpl

{{define "content"}}
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div id="accordion">
            <div class="card">
              <div class="card-header collapsed filterCard" id="filterHeader" data-toggle="collapse" data-target="#filterLogs" aria-expanded="false" aria-controls="filterLogs">
              <span class="align-middle white" data-toggle="collapse" data-target="#filterLogs" aria-expanded="false" aria-controls="filterLogs">
                <i class="fas fa-search"></i> Filter Logs
              </span>
              </div>
              <div id="filterLogs" class="collapse" aria-labelledby="filterHeader" data-parent="#accordion">
                <div class="card-body">
                  <form onsubmit="filterLogs(); return false;">
                    <div class="row">
                      <div class="col-md-4 pr-1">
                        <div class="form-group">
                          <label>Ticket ID</label>
                          <input name="ticketid" type="text" class="form-control" placeholder="Ticket ID" id="ticketid">
                        </div>
                      </div>
                      <div class="col-md-4 px-1">
                        <div class="form-group">
                          <label>Username</label>
                          <input name="username" type="text" class="form-control" placeholder="Username" id="username">
                        </div>
                      </div>
                      <div class="col-md-4 px-1">
                        <div class="form-group">
                          <label>User ID</label>
                          <input name="userid" type="text" class="form-control" placeholder="User ID" id="userid">
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-2">
                        <div class="form-group">
                          <button type="submit" class="btn btn-primary mx-auto btn-fill"><i class="fas fa-paper-plane"></i> Filter</button>
                        </div>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">Logs</h4>
            </div>
            <div class="card-body">
              <div class="card-body table-responsive">
                <table class="table table-hover table-striped">
                  <thead>
                  <tr>
                    <th>Ticket ID</th>
                    <th>Username</th>
                    <th>User ID</th>
                    <th>Log URL</th>
                  </tr>
                  </thead>
                  <tbody id="log-container">
                  </tbody>
                </table>

                <div class="row">
                  <div class="col-md-12">
                    <ul class="pagination justify-content-center">
                      <li class="waves-effect"><a href="#" onclick="previous()"><i class="fas fa-chevron-left"></i></a></li>
                      <p class="center-align white" style="padding-left: 10px; padding-right: 10px;">Page <span id="page-number">1</span></p>
                      <li class="waves-effect"><a href="#" onclick="next()"><i class="fas fa-chevron-right"></i></a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div aria-live="polite" aria-atomic="true" style="position: relative">
      <div style="position: absolute; right: 10px" id="toast-container">
      </div>
    </div>

    <script>
      // TODO: Implement before param
      const pageLimit = 30;
      let currentPage = 1;
      let logs = [];

      function appendLog(log) {
          const container = document.getElementById('log-container');

          const tr = document.createElement('tr');

          appendTd(tr, log.ticketid);
          appendTd(tr, log.username);
          appendTd(tr, log.userid);
          appendButton(tr, 'View', () => { location.href = '/manage/{{.guildId}}/logs/view/' + log.ticketid });

          container.appendChild(tr);
      }

      async function loadData(before, ticketId, username, userId) {
          if (before === undefined) {
              before = 0;
          }

          const container = document.getElementById('log-container');
          container.innerHTML = '';

          let url = '/api/{{.guildId}}/logs?before=' + before;

          if (ticketId !== undefined) {
              url += `&ticketid=${ticketId}`;
          } else if (username !== undefined) {
              url += `&username=${username}`;
          } else if (userId !== undefined) {
              url += `&userid=${userId}`;
          }

          const res = await axios.get(url);
          if (res.status === 200) {
              logs = res.data;
              for (log of res.data) {
                  appendLog(log);
              }
          } else {
              showToast('Error', res.data.error);
          }

          document.getElementById('page-number').innerText = currentPage;
      }

      withLoadingScreen(loadData);
    </script>

    <script>
      async function next() {
          if (logs.length === 0) {
              return;
          }

          currentPage += 1;
          await loadData(logs[logs.length - 1].ticketid);
      }

      async function previous() {
          if (currentPage <= 1) {
              return
          }

          let before = pageLimit;
          if (logs.length > 0) {
              before = logs[0] + pageLimit;
          }

          currentPage -= 1;
          await loadData(before);
      }

      async function filterLogs() {
          const ticketId = document.getElementById('ticketid').value;
          const username = document.getElementById('username').value;
          const userId = document.getElementById('userid').value;

          if (ticketId > 0) {
              await loadData(0, ticketId);
          } else if (username !== "") {
              await loadData(0, undefined, username);
          } else if (userId !== "") {
              await loadData(0, undefined, undefined, userId);
          } else {
              await loadData(0);
          }
      }
    </script>
  </div>
{{end}}