Initial commit

This commit is contained in:
mmacierzanka committed 2024-01-25 01:12:16 +01:00
commit 5267607214
33 files changed
+3029

No files matched your search

+5
View File
@@ -0,0 +1,5 @@
node_modules
dist
.turbo
.cache
+18
View File
@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
+24
View File
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
+30
View File
@@ -0,0 +1,30 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+13
View File
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
+31
View File
@@ -0,0 +1,31 @@
{
"name": "losowanie-admin",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.15.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.2.2",
"vite": "^5.0.8"
}
}
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

+64
View File
@@ -0,0 +1,64 @@
import { Button, Input, Typography } from '@mui/material';
import React, { FC, useEffect, useMemo, useState } from 'react'
import ReactDOM from 'react-dom/client'
type Team = { code: string; name: string; schoolCode: string; icon: string }
const downloadTeams = async () => {
const request = await fetch(`https://lolcup.zsl.gda.pl/api/overlays/groups`);
if (request.status !== 200) {
throw new Error();
}
const data = await request.json() as Array<{ group: string | null; teams: Array<Team> }>;
return { teams: data.reduce<Team[]>((prev, current) => { return [...prev, ...(current.teams)] }, []), groups: data.map((d) => d.group) };
}
const App: FC = () => {
const wsConnection = useMemo(() => new WebSocket(`ws://${window.location.hostname}:9000`), []);
const [teams, setTeams] = useState<Team[]>();
const [groups, setGroups] = useState<Array<string | null>>([]);
const [filter, setFilter] = useState<string>();
useEffect(() => {
wsConnection.onopen = () => {
console.log("Connected to WS");
}
void downloadTeams().then((t) => {
setTeams(t.teams);
setGroups(t.groups);
})
}, []);
return (
<div style={{ display: "flex", flexDirection: "column", gap: "0.5rem", alignItems: "center", maxWidth: "1500px", margin: "auto", textAlign: "center" }}>
<Typography variant='h2'>Panel administratora</Typography>
<div style={{ display: 'flex', alignItems: 'center' }}>{groups.map((g) => {
return <Button onClick={() => {
wsConnection.send(JSON.stringify({ group: null }))
setTimeout(() => {
wsConnection.send(JSON.stringify({ group: g }))
}, 500)
}} style={{ fontSize: '1.5rem' }}>{g ?? "Wyłącz"}</Button>
})}</div>
<Input style={{ fontSize: '2rem' }} onChange={(e) => { setFilter(e.target.value) }} placeholder='Szukaj'></Input>
<div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", width: "100%" }}>
{teams?.filter((t) => t.code.includes(filter?.toUpperCase() ?? "")).map((t) => {
return <Button onClick={() => { wsConnection.send(JSON.stringify({ ...t })) }} style={{ fontSize: "2rem" }} key={t.code}>{t.code}</Button>
})}
</div>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
+25
View File
@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
+10
View File
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
+10
View File
@@ -0,0 +1,10 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000
}
})
+18
View File
@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
+24
View File
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
+30
View File
@@ -0,0 +1,30 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
- Configure the top-level `parserOptions` property like this:
```js
export default {
// other rules...
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: ['./tsconfig.json', './tsconfig.node.json'],
tsconfigRootDir: __dirname,
},
}
```
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+13
View File
@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
+29
View File
@@ -0,0 +1,29 @@
{
"name": "losowanie-osg",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"clsx": "^2.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.14.0",
"@typescript-eslint/parser": "^6.14.0",
"@vitejs/plugin-react": "^4.2.1",
"eslint": "^8.55.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"typescript": "^5.2.2",
"vite": "^5.0.8"
}
}
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

+13
View File
@@ -0,0 +1,13 @@
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
body {
font-family: Lato, Arial, Helvetica, sans-serif;
height: 98vh;
display: grid;
place-items: center;
color: #fff;
}
h2 {
color: #1affaf;
}
+18
View File
@@ -0,0 +1,18 @@
.container {
padding: 1rem;
border-radius: 0.3rem;
background-color: #222222CC;
clip-path: inset(0 0 0 0);
transition: clip-path 0.3s cubic-bezier(0, .7, .55, 1);
min-width: 500px;
display: flex;
flex-direction: column;
gap: 0.5rem;
align-items: center;
text-align: center;
min-height: 800px;
}
.container.hidden {
clip-path: inset(100% 0 0 0);
}
+76
View File
@@ -0,0 +1,76 @@
import React, { FC, useEffect, useMemo, useState } from 'react'
import ReactDOM from 'react-dom/client'
import style from './index.module.css';
import clsx from 'clsx';
import { Team } from './team';
import './index.css';
type Team = { code: string; name: string; schoolCode: string; icon: string }
const App: FC = () => {
const wsConnection = useMemo(() => new WebSocket(`ws://${window.location.hostname}:9000`), []);
const [group, setGroup] = useState<string | null>(null);
const [teams, setTeams] = useState<Team[]>([]);
const [lastSetGroup, setLastGroup] = useState<string>();
useEffect(() => {
window.sessionStorage.clear();
}, []);
useEffect(() => {
wsConnection.onopen = () => {
console.log("Connected to WS");
}
wsConnection.onmessage = (m) => {
const data = JSON.parse(m.data);
if ("group" in data) {
setGroup(data.group as string);
}
if ("code" in data) {
setTeams((p) => {
const existingIndex = p.findIndex((i) => i.code === data.code);
if (existingIndex !== -1) {
const a = [...p]
a.splice(existingIndex, 1);
return a;
}
return [...p, data];
});
}
}
}, []);
useEffect(() => {
if (group !== null) {
setLastGroup(group);
const storage = JSON.parse(window.sessionStorage.getItem(group) ?? "[]");
setTeams(storage);
return;
}
setTeams([]);
}, [group])
useEffect(() => {
if (lastSetGroup !== undefined && teams.length !== 0) {
window.sessionStorage.setItem(lastSetGroup, JSON.stringify(teams))
}
}, [lastSetGroup, teams]);
return (
<div className={clsx(style.container, { [style.hidden]: group === null })}>
<h1>GRUPA {lastSetGroup}</h1>
{teams.map((t) => <Team code={t.code} img={t.icon} name={t.name} school={t.schoolCode} />)}
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
+33
View File
@@ -0,0 +1,33 @@
.wrapper {
width: 100%;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
font-size: 1rem;
animation: containerIn 0.5s cubic-bezier(0, .7, .55, 1) both;
}
.part {
display: flex;
align-items: center;
gap: 0.5rem;
}
.part img {
width: 65px;
height: 65px;
}
@keyframes containerIn {
from {
transform: translateY(30px);
}
to {
transform: translateY(0);
}
}
+18
View File
@@ -0,0 +1,18 @@
import { FC } from "react";
import styles from './team.module.css';
export const Team: FC<{ img: string; name: string; code: string; school: string }> = ({ code, img, name, school }) => {
return (
<div className={styles.wrapper}>
<div className={styles.container}>
<div className={styles.part}>
<img src={img} />
<h2>{`${name} • ${code}`}</h2>
</div>
<div className={styles.part}>
<p style={{ fontWeight: 'bold' }}>{school}</p>
</div>
</div>
</div>
)
}
+1
View File
@@ -0,0 +1 @@
/// <reference types="vite/client" />
+25
View File
@@ -0,0 +1,25 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
+10
View File
@@ -0,0 +1,10 @@
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
+10
View File
@@ -0,0 +1,10 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3001
}
})
+20
View File
@@ -0,0 +1,20 @@
{
"name": "ws_server",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "concurrently \"tsc -w --preserveWatchOutput\" \"nodemon --watch src --delay 2.5 --ext ts dist/main.js\""
},
"devDependencies": {
"@types/node": "^20.11.6",
"@types/ws": "^8.5.10",
"concurrently": "^8.2.2",
"nodemon": "^3.0.3",
"typescript": "^5.3.3"
},
"dependencies": {
"bufferutil": "^4.0.8",
"ws": "^8.16.0"
}
}
+25
View File
@@ -0,0 +1,25 @@
import { WebSocketServer, WebSocket } from "ws";
const main = () => {
const cons: WebSocket[] = [];
const server = new WebSocketServer({
port: 9000
});
server.on('listening', () => {
console.log("WS server started (port 9000)")
})
server.on("connection", (con) => {
console.log('New client connected');
cons.push(con);
con.on("message", (m) => {
cons.forEach((c) => { c.send(m.toString()) });
console.log(m.toString())
});
})
}
main();
+9
View File
@@ -0,0 +1,9 @@
{
"compilerOptions": {
"outDir": "dist",
"module": "CommonJS",
"moduleResolution": "node",
},
"include": ["src"],
"exclude": ["dist"]
}
+19
View File
@@ -0,0 +1,19 @@
{
"name": "losowanie2",
"version": "1.0.0",
"main": "index.js",
"private": true,
"license": "MIT",
"dependencies": {
"turbo": "^1.11.3"
},
"devDependencies": {
"typescript": "^5.3.3"
},
"scripts": {
"dev": "turbo run dev --no-cache --parallel --continue"
},
"workspaces": [
"apps/*"
]
}
+8
View File
@@ -0,0 +1,8 @@
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"dev": {
"cache": false
}
}
}
+2397
View File
File diff suppressed because it is too large. Load diff