Home Explore Help
Sign In
kirkleon
/
teamspeak-status-service
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Implementing the new client

Kirk Trombley 5 years ago
parent
112856f513
commit
73c93eaf18
22 changed files with 132 additions and 133 deletions
Split View Show Diff Stats
  1. 0 0
      client/.gitignore
  2. 0 0
      client/README.md
  3. 3 1
      client/package.json
  4. 18 0
      client/public/index.html
  5. 10 0
      client/public/manifest.json
  6. 0 0
      client/public/robots.txt
  7. 71 0
      client/src/App.js
  8. 26 0
      client/src/App.module.css
  9. 0 0
      client/src/App.test.js
  10. 4 0
      client/src/index.css
  11. 0 0
      client/src/index.js
  12. 0 0
      client/src/logo.svg
  13. 0 0
      client/src/serviceWorker.js
  14. 0 0
      client/src/setupTests.js
  15. 0 0
      client/yarn.lock
  16. BIN
      teamspeak-status/public/favicon.ico
  17. 0 43
      teamspeak-status/public/index.html
  18. BIN
      teamspeak-status/public/logo192.png
  19. BIN
      teamspeak-status/public/logo512.png
  20. 0 25
      teamspeak-status/public/manifest.json
  21. 0 38
      teamspeak-status/src/App.css
  22. 0 26
      teamspeak-status/src/App.js

+ 0 - 0
teamspeak-status/.gitignore → client/.gitignore
View File


+ 0 - 0
teamspeak-status/README.md → client/README.md
View File


+ 3 - 1
teamspeak-status/package.json → client/package.json
View File 

@@ -2,6 +2,7 @@
 
   "name": "teamspeak-status",
 
   "version": "0.1.0",
 
   "private": true,
 
+  "homepage": "https://hiram.services/teamspeak/",
 
   "dependencies": {
 
     "@testing-library/jest-dom": "^4.2.4",
 
     "@testing-library/react": "^9.3.2",
 
@@ -14,7 +15,8 @@
 
     "start": "react-scripts start",
 
     "build": "react-scripts build",
 
     "test": "react-scripts test",
 
-    "eject": "react-scripts eject"
 
+    "eject": "react-scripts eject",
 
+    "deploy": "scp -r build hiram:/opt/ts3/status/build-$(date +'%Y-%m-%dT%H:%M:%S')"
 
   },
 
   "eslintConfig": {
 
     "extends": "react-app"

+ 18 - 0
client/public/index.html
View File 

@@ -0,0 +1,18 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="utf-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <meta name="theme-color" content="#000000" />
 
+    <meta
 
+      name="description"
 
+      content="Teamspeak Status Page"
 
+    />
 
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <title>Teamspeak Status</title>
 
+  </head>
 
+  <body>
 
+    <noscript>You need to enable JavaScript to run this app.</noscript>
 
+    <div id="root"></div>
 
+  </body>
 
+</html>

+ 10 - 0
client/public/manifest.json
View File 

@@ -0,0 +1,10 @@
 
+{
 
+  "short_name": "Teamspeak Status Page",
 
+  "name": "Teamspeak Status Page",
 
+  "icons": [
 
+  ],
 
+  "start_url": ".",
 
+  "display": "standalone",
 
+  "theme_color": "#000000",
 
+  "background_color": "#ffffff"
 
+}

+ 0 - 0
teamspeak-status/public/robots.txt → client/public/robots.txt
View File


+ 71 - 0
client/src/App.js
View File 

@@ -0,0 +1,71 @@
 
+import React, { useState, useEffect, useRef } from 'react';
 
+import styles from './App.module.css';
 
+
 
+const getUsers = async () => {
 
+  const res = await fetch("https://hiram.services/teamspeak/api");
 
+  const { users } = await res.json();
 
+  return users;
 
+}
 
+
 
+const UserList = React.memo(({ users }) => (
 
+  <div className={styles.userList}>
 
+    <span className={styles.title}>TeamSpeak Server Status</span>
 
+    {
 
+      users.map(user => <span className={styles.user} key={user}>{user}</span>)
 
+    }
 
+  </div>
 
+));
 
+
 
+let vx = 2;
 
+let vy = 3;
 
+
 
+const updateVelocities = (el, bounding) => {
 
+  if (el.offsetLeft <= 5 && vx < 0) {
 
+    vx = -1 * vx;
 
+  }
 
+  if ((el.offsetLeft + el.offsetWidth) >= (bounding.offsetWidth - 5)) {
 
+    vx = -1 * vx;
 
+  }
 
+  if (el.offsetTop <= 5 && vy < 0) {
 
+    vy = -1 * vy;
 
+  }
 
+  if ((el.offsetTop + el.offsetHeight) >= (bounding.offsetHeight - 5)) {
 
+    vy = -1 * vy;
 
+  }
 
+}
 
+
 
+export default () => {
 
+  const boundRef = useRef(null);
 
+  const bounceRef = useRef(null);
 
+  const [{x, y}, setPos] = useState({ x: 0, y: 0 });
 
+  const [users, setUsers] = useState([]);
 
+  useEffect(() => {
 
+    const update = () => {  getUsers().then(setUsers) };
 
+    const interval = setInterval(update, 30000);
 
+    update();
 
+    return () => clearInterval(interval);
 
+  }, []);
 
+  useEffect(() => {
 
+    const update = () => { 
+      updateVelocities(bounceRef.current, boundRef.current);
 
+      setPos({x: x + vx, y: y + vy}) 
+    };
 
+    const interval = setInterval(update, 30);
 
+    return () => clearInterval(interval);
 
+  }, [x, y]);
 
+
 
+  return (
 
+    <div className={styles.screen} ref={boundRef}>
 
+      <div 
+        style={{
 
+          position: "absolute",
 
+          top: `${y}px`,
 
+          left: `${x}px`,
 
+        }}
 
+        ref={bounceRef}
 
+      >
 
+        <UserList users={users} />
 
+      </div>
 
+    </div>
 
+  );
 
+}

+ 26 - 0
client/src/App.module.css
View File 

@@ -0,0 +1,26 @@
 
+.screen {
 
+  position: absolute;
 
+  top: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  left: 0;
 
+}
 
+
 
+.userList {
 
+  width: 100%;
 
+  height: 100%;
 
+  padding: 0.5em;
 
+  display: flex;
 
+  flex-flow: column nowrap;
 
+  justify-content: flex-start;
 
+  align-items: flex-start;
 
+}
 
+
 
+.title {
 
+  font-size: calc(16px + 1vmin);
 
+}
 
+
 
+.user {
 
+  font-size: calc(10px + 1vmin);
 
+  margin-left: 1em;
 
+}

+ 0 - 0
teamspeak-status/src/App.test.js → client/src/App.test.js
View File


+ 4 - 0
teamspeak-status/src/index.css → client/src/index.css
View File 

@@ -5,6 +5,10 @@ body {
 
     sans-serif;
 
   -webkit-font-smoothing: antialiased;
 
   -moz-osx-font-smoothing: grayscale;
 
+  margin: 0px 0px 0px 0px;
 
+  padding: 0px 0px 0px 0px;
 
+  color: #ccc;
 
+  background-color: #333;
 
 }
 
 
 code {

+ 0 - 0
teamspeak-status/src/index.js → client/src/index.js
View File


+ 0 - 0
teamspeak-status/src/logo.svg → client/src/logo.svg
View File


+ 0 - 0
teamspeak-status/src/serviceWorker.js → client/src/serviceWorker.js
View File


+ 0 - 0
teamspeak-status/src/setupTests.js → client/src/setupTests.js
View File


+ 0 - 0
teamspeak-status/yarn.lock → client/yarn.lock
View File


BIN
teamspeak-status/public/favicon.ico
View File


+ 0 - 43
teamspeak-status/public/index.html
View File 

@@ -1,43 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-  <head>
 
-    <meta charset="utf-8" />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <meta name="theme-color" content="#000000" />
 
-    <meta
 
-      name="description"
 
-      content="Web site created using create-react-app"
 
-    />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
-    <!--
 
-      manifest.json provides metadata used when your web app is installed on a
 
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
-    -->
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
-    <!--
 
-      Notice the use of %PUBLIC_URL% in the tags above.
 
-      It will be replaced with the URL of the `public` folder during the build.
 
-      Only files inside the `public` folder can be referenced from the HTML.
 
-
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 
-      work correctly both with client-side routing and a non-root public URL.
 
-      Learn how to configure a non-root public URL by running `npm run build`.
 
-    -->
 
-    <title>React App</title>
 
-  </head>
 
-  <body>
 
-    <noscript>You need to enable JavaScript to run this app.</noscript>
 
-    <div id="root"></div>
 
-    <!--
 
-      This HTML file is a template.
 
-      If you open it directly in the browser, you will see an empty page.
 
-
 
-      You can add webfonts, meta tags, or analytics to this file.
 
-      The build step will place the bundled scripts into the <body> tag.
 
-
 
-      To begin the development, run `npm start` or `yarn start`.
 
-      To create a production bundle, use `npm run build` or `yarn build`.
 
-    -->
 
-  </body>
 
-</html>

BIN
teamspeak-status/public/logo192.png
View File


BIN
teamspeak-status/public/logo512.png
View File


+ 0 - 25
teamspeak-status/public/manifest.json
View File 

@@ -1,25 +0,0 @@
 
-{
 
-  "short_name": "React App",
 
-  "name": "Create React App Sample",
 
-  "icons": [
 
-    {
 
-      "src": "favicon.ico",
 
-      "sizes": "64x64 32x32 24x24 16x16",
 
-      "type": "image/x-icon"
 
-    },
 
-    {
 
-      "src": "logo192.png",
 
-      "type": "image/png",
 
-      "sizes": "192x192"
 
-    },
 
-    {
 
-      "src": "logo512.png",
 
-      "type": "image/png",
 
-      "sizes": "512x512"
 
-    }
 
-  ],
 
-  "start_url": ".",
 
-  "display": "standalone",
 
-  "theme_color": "#000000",
 
-  "background_color": "#ffffff"
 
-}

+ 0 - 38
teamspeak-status/src/App.css
View File 

@@ -1,38 +0,0 @@
 
-.App {
 
-  text-align: center;
 
-}
 
-
 
-.App-logo {
 
-  height: 40vmin;
 
-  pointer-events: none;
 
-}
 
-
 
-@media (prefers-reduced-motion: no-preference) {
 
-  .App-logo {
 
-    animation: App-logo-spin infinite 20s linear;
 
-  }
 
-}
 
-
 
-.App-header {
 
-  background-color: #282c34;
 
-  min-height: 100vh;
 
-  display: flex;
 
-  flex-direction: column;
 
-  align-items: center;
 
-  justify-content: center;
 
-  font-size: calc(10px + 2vmin);
 
-  color: white;
 
-}
 
-
 
-.App-link {
 
-  color: #61dafb;
 
-}
 
-
 
-@keyframes App-logo-spin {
 
-  from {
 
-    transform: rotate(0deg);
 
-  }
 
-  to {
 
-    transform: rotate(360deg);
 
-  }
 
-}

+ 0 - 26
teamspeak-status/src/App.js
View File 

@@ -1,26 +0,0 @@
 
-import React from 'react';
 
-import logo from './logo.svg';
 
-import './App.css';
 
-
 
-function App() {
 
-  return (
 
-    <div className="App">
 
-      <header className="App-header">
 
-        <img src={logo} className="App-logo" alt="logo" />
 
-        <p>
 
-          Edit <code>src/App.js</code> and save to reload.
 
-        </p>
 
-        <a
 
-          className="App-link"
 
-          href="https://reactjs.org"
 
-          target="_blank"
 
-          rel="noopener noreferrer"
 
-        >
 
-          Learn React
 
-        </a>
 
-      </header>
 
-    </div>
 
-  );
 
-}
 
-
 
-export default App;