tool--basic-web-server/console.html at main · ericchase/tool--basic-web-server · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
    <title>Console</title>
    <style>
      body {
        color: #333;
        /* display: flex; */
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        margin: 20px 30px;
      }
      .row {
        display: flex;
        gap: 5px;
      }
      .column {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="column">
        <a id="self-link" href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>
        <span id="status">Server running!</span>
        <button id="restart">Restart</button>
        <div class="vspace-10"></div>
        <button id="shutdown">Shutdown</button>
      </div>
    </div>
    <div class="vspace-30"></div>
    <div class="row">
      <div class="column">
        <div id="file-list"></div>
      </div>
    </div>
    <script>
      const url = `${location.protocol}//${location.host}`;
      const self_link = document.querySelector('#self-link');
      self_link.setAttribute('href', url);
      self_link.innerText = self_link;
      function refresh(ms) {
        setTimeout('location.reload(true);', ms);
      }
      const restartButton = document.getElementById('restart');
      restartButton.addEventListener('click', () => {
        fetch('/api/server/restart', { method: 'POST' });
        document.getElementById('status').innerText = 'Restarting...';
        restartButton.toggleAttribute('disabled', true);
        shutdownButton.toggleAttribute('disabled', true);
        refresh(500);
      });
      const shutdownButton = document.getElementById('shutdown');
      shutdownButton.addEventListener('click', () => {
        fetch('/api/server/shutdown', { method: 'POST' });
        document.getElementById('status').innerText = 'Shutting down...';
        restartButton.toggleAttribute('disabled', true);
        shutdownButton.toggleAttribute('disabled', true);
        const refreshButton = document.createElement('button');
        refreshButton.innerText = 'Refresh';
        refreshButton.addEventListener('click', () => refresh(0));
        document.body.querySelector('div').append();
      });
      const fileListDiv = document.getElementById('file-list');
      fetch('/api/server/list', { method: 'POST' })
        .then((response) => response.json())
        .then((json) => {
          json.forEach((path) => {
            const resourceDiv = document.createElement('div');
            resourceDiv.innerHTML = `<a href="${path}">${path}</a>`;
            fileListDiv.appendChild(resourceDiv);
          });
        });
      // add height to 'vspace-' divs
      Array.from(document.querySelectorAll('[class*="vspace-"]')).forEach((el) => {
        const [_, size] = Array.from(el.classList)
          .find((name) => name.startsWith('vspace-'))
          .split('-');
        el.style.setProperty('height', `${size}px`);
      });
      // add width to 'hspace-' divs
      Array.from(document.querySelectorAll('[class*="hspace-"]')).forEach((el) => {
        const [_, size] = Array.from(el.classList)
          .find((name) => name.startsWith('hspace-'))
          .split('-');
        el.style.setProperty('width', `${size}px`);
      });
    </script>
  </body>
</html>