Deleted Frontend From Backend
This commit is contained in:
brausjonas
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
@@ -1,35 +0,0 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# dependencies
|
|
||||||
/node_modules
|
|
||||||
/.pnp
|
|
||||||
.pnp.js
|
|
||||||
|
|
||||||
# testing
|
|
||||||
/coverage
|
|
||||||
|
|
||||||
# next.js
|
|
||||||
/.next/
|
|
||||||
/out/
|
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
|
||||||
*.pem
|
|
||||||
|
|
||||||
# debug
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
|
|
||||||
# local env files
|
|
||||||
.env*.local
|
|
||||||
|
|
||||||
# vercel
|
|
||||||
.vercel
|
|
||||||
|
|
||||||
# typescript
|
|
||||||
*.tsbuildinfo
|
|
||||||
next-env.d.ts
|
|
||||||
Generated
-5
@@ -1,5 +0,0 @@
|
|||||||
# Default ignored files
|
|
||||||
/shelf/
|
|
||||||
/workspace.xml
|
|
||||||
# Editor-based HTTP Client requests
|
|
||||||
/httpRequests/
|
|
||||||
Generated
-12
@@ -1,12 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<module type="WEB_MODULE" version="4">
|
|
||||||
<component name="NewModuleRootManager">
|
|
||||||
<content url="file://$MODULE_DIR$">
|
|
||||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
|
||||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
|
||||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
|
||||||
</content>
|
|
||||||
<orderEntry type="inheritedJdk" />
|
|
||||||
<orderEntry type="sourceFolder" forTests="false" />
|
|
||||||
</component>
|
|
||||||
</module>
|
|
||||||
-5
@@ -1,5 +0,0 @@
|
|||||||
<component name="ProjectCodeStyleConfiguration">
|
|
||||||
<state>
|
|
||||||
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
|
|
||||||
</state>
|
|
||||||
</component>
|
|
||||||
Generated
-6
@@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="JavaScriptLibraryMappings">
|
|
||||||
<includedPredefinedLibrary name="Node.js Core" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
Generated
-8
@@ -1,8 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="ProjectModuleManager">
|
|
||||||
<modules>
|
|
||||||
<module fileurl="file://$PROJECT_DIR$/.idea/anwendung.iml" filepath="$PROJECT_DIR$/.idea/anwendung.iml" />
|
|
||||||
</modules>
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
Generated
-6
@@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="VcsDirectoryMappings">
|
|
||||||
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
|
||||||
|
|
||||||
## Getting Started
|
|
||||||
|
|
||||||
First, run the development server:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run dev
|
|
||||||
# or
|
|
||||||
yarn dev
|
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
```
|
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
|
||||||
|
|
||||||
You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
|
|
||||||
|
|
||||||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
|
|
||||||
|
|
||||||
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
|
|
||||||
|
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
|
|
||||||
|
|
||||||
## Learn More
|
|
||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
|
||||||
|
|
||||||
## Deploy on Vercel
|
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"paths": {
|
|
||||||
"@/*": ["./src/*"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
/** @type {import('next').NextConfig} */
|
|
||||||
const nextConfig = {
|
|
||||||
reactStrictMode: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = nextConfig
|
|
||||||
Generated
-1378
File diff suppressed because it is too large
Load Diff
@@ -1,19 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "anwendung",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"dev": "next dev",
|
|
||||||
"build": "next build",
|
|
||||||
"start": "next start",
|
|
||||||
"lint": "next lint"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"autoprefixer": "10.4.14",
|
|
||||||
"next": "13.3.4",
|
|
||||||
"postcss": "8.4.23",
|
|
||||||
"react": "18.2.0",
|
|
||||||
"react-dom": "18.2.0",
|
|
||||||
"tailwindcss": "3.3.2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 629 B |
@@ -1,65 +0,0 @@
|
|||||||
/**
|
|
||||||
* Function Takes in Paramter for:
|
|
||||||
* text: text to be shown on the button
|
|
||||||
* width, height: width and height of the button
|
|
||||||
* icon: an icon that should be shown on the button (HTML <svg> tag) (see Icons.js for example)
|
|
||||||
* iconWidth, iconHeight: width and height of the icon
|
|
||||||
* onClick: a function that should be run if the button is clicked
|
|
||||||
* Example for onClick:
|
|
||||||
* <Button onClick={onClick={() => {console.log("do something")}}
|
|
||||||
* Example for icon:
|
|
||||||
*/
|
|
||||||
export default function Button(p) {
|
|
||||||
|
|
||||||
//default parameters for the button
|
|
||||||
let text = p.text;
|
|
||||||
let width = p.width, height = p.height;
|
|
||||||
let iconHTML = p.icon;
|
|
||||||
let iconWidth = p.iconWidth, iconHeight = p.iconHeight;
|
|
||||||
let onClick = p.onClick;
|
|
||||||
let color = p.color;
|
|
||||||
let fontColor = p.fontColor;
|
|
||||||
let font_size = p.fontSize;
|
|
||||||
|
|
||||||
//if parameters are not set, they are set to default values
|
|
||||||
if (height == null) height = 0;
|
|
||||||
if (width == null) width = 0;
|
|
||||||
if (iconWidth == null) iconWidth = width-10;
|
|
||||||
if (iconHeight == null) iconHeight = height-10;
|
|
||||||
if (onClick == null) onClick = () => {};
|
|
||||||
if (color == null) color = "#363636";
|
|
||||||
if (fontColor == null) fontColor = "white";
|
|
||||||
if (font_size == null) font_size = 16;
|
|
||||||
|
|
||||||
//build in the icon width and height to the svg tag (svg tag should not contain any size information by default)
|
|
||||||
if (iconHTML != null) {
|
|
||||||
let split = iconHTML.split("fill=");
|
|
||||||
split[1] = "fill=" + split[1];
|
|
||||||
split[0] += " width=" + iconWidth + " height=" + iconHeight + " ";
|
|
||||||
iconHTML = split[0] + split[1]
|
|
||||||
} else {
|
|
||||||
iconHTML = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
//return the button
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<button className={"round-border button font font-small"}
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
backgroundColor: color,
|
|
||||||
color: fontColor,
|
|
||||||
fontSize: font_size,
|
|
||||||
minWidth: width,
|
|
||||||
minHeight: height,
|
|
||||||
textAlign: "center",
|
|
||||||
}}
|
|
||||||
onClick={onClick}>
|
|
||||||
{text}
|
|
||||||
<div dangerouslySetInnerHTML={{__html: iconHTML}}/>
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
export class CalenderEntry
|
|
||||||
{
|
|
||||||
constructor(start_point, end_point)
|
|
||||||
{
|
|
||||||
this.start_point = start_point;
|
|
||||||
this.end_point = end_point;
|
|
||||||
this.colorID = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,568 +0,0 @@
|
|||||||
import {useEffect, useState} from "react";
|
|
||||||
import {CalenderEntry} from "@/components/CalenderEntry";
|
|
||||||
import Button from "@/components/Button";
|
|
||||||
import {list} from "postcss";
|
|
||||||
|
|
||||||
//all entries of the current week
|
|
||||||
let entries = {mo: [], tu: [], we: [], th: [], fr: [], sa: []}
|
|
||||||
//a variable that saves the currently grabbed resize bar
|
|
||||||
let grabbed = null;
|
|
||||||
let grabbedUp = false;
|
|
||||||
let grabbed_in_list = null;
|
|
||||||
|
|
||||||
//a variable the saves if the mouse is pressed or not
|
|
||||||
let mouseDown = false;
|
|
||||||
|
|
||||||
//a variable that stores the currently grabbed element to move
|
|
||||||
let selectedElement = null;
|
|
||||||
//move offset from top row to cursor
|
|
||||||
let selectedOffsetTop = 0;
|
|
||||||
//move offset from bottom row to cursor
|
|
||||||
let selectedOffsetBottom = 0;
|
|
||||||
//the list, the grabbed element to move is currently in
|
|
||||||
let selectedListID = "";
|
|
||||||
|
|
||||||
//variable for the hight of one cell / row. Important for resizing the calender view
|
|
||||||
let cellHeight = 25;
|
|
||||||
|
|
||||||
let colors = ["#f80000", "#414141"]
|
|
||||||
|
|
||||||
export default function CalenderView(p)
|
|
||||||
{
|
|
||||||
//state to update the calender view
|
|
||||||
const [t, setT] = useState(false)
|
|
||||||
|
|
||||||
//a blocker for the right click context menu
|
|
||||||
useEffect(() =>
|
|
||||||
{
|
|
||||||
window.addEventListener("contextmenu", (e) => (e.preventDefault()))
|
|
||||||
})
|
|
||||||
|
|
||||||
function does_element_overlap(entry, start, end, search_list)
|
|
||||||
{
|
|
||||||
let current = null;
|
|
||||||
for(let i = 0; i < search_list.length; i++)
|
|
||||||
{
|
|
||||||
current = search_list[i];
|
|
||||||
if(current !== entry)
|
|
||||||
{
|
|
||||||
if (start > current.start_point && start < current.end_point)
|
|
||||||
{
|
|
||||||
return true;
|
|
||||||
} else if (end > current.start_point && end < current.end_point)
|
|
||||||
{
|
|
||||||
return true;
|
|
||||||
} else if (start <= current.start_point && end >= current.end_point)
|
|
||||||
{
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
//function to delete an elemente and resize the corresponding list in the entries dictionary
|
|
||||||
function delete_element(index, element)
|
|
||||||
{
|
|
||||||
let currentList = entries[index];
|
|
||||||
let temp = []
|
|
||||||
for (let i = 0; i < currentList.length; i++)
|
|
||||||
{
|
|
||||||
if (element !== currentList[i])
|
|
||||||
{
|
|
||||||
temp.push(currentList[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
entries[index] = temp;
|
|
||||||
}
|
|
||||||
|
|
||||||
//resize a grabbed element to the row paramter
|
|
||||||
function size_grabbed(row, current_list)
|
|
||||||
{
|
|
||||||
if (row >= 0 && row <= 96)
|
|
||||||
{
|
|
||||||
if (grabbedUp)
|
|
||||||
{
|
|
||||||
console.log(grabbed.start_point)
|
|
||||||
|
|
||||||
if (row < grabbed.end_point - 1)
|
|
||||||
{
|
|
||||||
if(!does_element_overlap(grabbed, row, grabbed.end_point, current_list))
|
|
||||||
{
|
|
||||||
grabbed.start_point = row;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else
|
|
||||||
{
|
|
||||||
if (row > grabbed.start_point)
|
|
||||||
{
|
|
||||||
if(!does_element_overlap(grabbed, grabbed.start_point, row + 1, current_list))
|
|
||||||
{
|
|
||||||
grabbed.end_point = row + 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//moves the selected element to row and list with id
|
|
||||||
function move_selected(row, id)
|
|
||||||
{
|
|
||||||
if (selectedListID !== id)
|
|
||||||
{
|
|
||||||
if(!does_element_overlap(selectedElement, row - selectedOffsetTop, row + selectedOffsetBottom, entries[id]))
|
|
||||||
{
|
|
||||||
delete_element(selectedListID, selectedElement);
|
|
||||||
entries[id].push(selectedElement);
|
|
||||||
selectedListID = id;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (row - selectedOffsetTop > 0 && row + selectedOffsetBottom <= 97)
|
|
||||||
{
|
|
||||||
if(!does_element_overlap(selectedElement, row - selectedOffsetTop, row + selectedOffsetBottom, entries[id]))
|
|
||||||
{
|
|
||||||
selectedElement.start_point = row - selectedOffsetTop;
|
|
||||||
selectedElement.end_point = row + selectedOffsetBottom;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//routine, when mouse is moved
|
|
||||||
function mouse_move(e)
|
|
||||||
{
|
|
||||||
//checks if mouse is still down
|
|
||||||
if (mouseDown)
|
|
||||||
{
|
|
||||||
//get the y coordinate of the cursor
|
|
||||||
let y_window = e.clientY;
|
|
||||||
//get the offset to the calender view
|
|
||||||
let y_target_offset = e.currentTarget.getBoundingClientRect().top;
|
|
||||||
//get the id of the current column
|
|
||||||
let id = e.currentTarget.id;
|
|
||||||
//calcultes the current row the cursor hovers
|
|
||||||
let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1
|
|
||||||
let current_list = entries[e.currentTarget.id];
|
|
||||||
|
|
||||||
//if a edge of an element was grabbed, resize it
|
|
||||||
if (grabbed != null)
|
|
||||||
{
|
|
||||||
size_grabbed(row, grabbed_in_list);
|
|
||||||
//if a whole element was grabbed, move it
|
|
||||||
} else if (selectedElement != null)
|
|
||||||
{
|
|
||||||
move_selected(row, id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//update the calender view
|
|
||||||
setT(!t);
|
|
||||||
}
|
|
||||||
|
|
||||||
//routine when mouse was released
|
|
||||||
function mouse_up(e)
|
|
||||||
{
|
|
||||||
mouseDown = false;
|
|
||||||
|
|
||||||
//remove all selected elements
|
|
||||||
if (grabbed != null)
|
|
||||||
{
|
|
||||||
grabbed.colorID = 0;
|
|
||||||
grabbed = null;
|
|
||||||
}
|
|
||||||
if (selectedElement != null)
|
|
||||||
{
|
|
||||||
selectedElement.colorID = 0;
|
|
||||||
selectedElement = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
setT(!t);
|
|
||||||
}
|
|
||||||
|
|
||||||
//find the current element on row in the selected list (search_list)
|
|
||||||
function find_current(row, search_list)
|
|
||||||
{
|
|
||||||
let current = null;
|
|
||||||
for (let i = 0; i < search_list.length; i++)
|
|
||||||
{
|
|
||||||
current = search_list[i];
|
|
||||||
if (current.start_point <= row && current.end_point >= row)
|
|
||||||
{
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
current = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return current;
|
|
||||||
}
|
|
||||||
|
|
||||||
//places a new entry to the calender
|
|
||||||
function place_new_entry(row, list)
|
|
||||||
{
|
|
||||||
if (row < 96)
|
|
||||||
{
|
|
||||||
let free = true;
|
|
||||||
for (let i = 0; i < list.length; i++)
|
|
||||||
{
|
|
||||||
let current = list[i];
|
|
||||||
|
|
||||||
for (let r = row; r < row + 3; r++)
|
|
||||||
{
|
|
||||||
for (let s = current.start_point; s < current.end_point; s++)
|
|
||||||
{
|
|
||||||
if (s === r)
|
|
||||||
{
|
|
||||||
free = false;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (free)
|
|
||||||
{
|
|
||||||
list.push(new CalenderEntry(row, row + 3));
|
|
||||||
setT(!t);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//routine when mouse was pressed
|
|
||||||
function mouse_down(e)
|
|
||||||
{
|
|
||||||
|
|
||||||
//get the cursors y coordinate in the window
|
|
||||||
let y_window = e.clientY;
|
|
||||||
//get the offset of the calender view
|
|
||||||
let y_target_offset = e.currentTarget.getBoundingClientRect().top;
|
|
||||||
//calculate the row clicked on
|
|
||||||
let row = Math.floor((y_window - y_target_offset) / cellHeight) + 1;
|
|
||||||
//get the list of entries clicked on
|
|
||||||
let current_list = entries[e.currentTarget.id];
|
|
||||||
|
|
||||||
//if right clicked
|
|
||||||
if (e.button === 2)
|
|
||||||
{
|
|
||||||
//if right clicked on an element / entry delete it
|
|
||||||
let current = find_current(row, current_list);
|
|
||||||
|
|
||||||
if (current != null)
|
|
||||||
{
|
|
||||||
delete_element(e.currentTarget.id, current);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
mouseDown = true;
|
|
||||||
|
|
||||||
//if a resize bar was grabbed
|
|
||||||
if (e.target.id === "grab")
|
|
||||||
{
|
|
||||||
//get the entry the resize bar is child of
|
|
||||||
let entry = e.target.parentElement;
|
|
||||||
//get the startRow of the entry
|
|
||||||
let rowStart = parseInt(window.getComputedStyle(entry).gridRowStart);
|
|
||||||
|
|
||||||
grabbed_in_list = current_list;
|
|
||||||
|
|
||||||
//check if the upper or lower resize bar was grabbed
|
|
||||||
if (row === rowStart)
|
|
||||||
{
|
|
||||||
//+ / - 1 to avoid select the wrong element when overlapping
|
|
||||||
grabbed = find_current(row + 1, current_list);
|
|
||||||
grabbedUp = true;
|
|
||||||
} else
|
|
||||||
{
|
|
||||||
grabbed = find_current(row - 1, current_list);
|
|
||||||
grabbedUp = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
grabbed.colorID = 1;
|
|
||||||
|
|
||||||
setT(!t);
|
|
||||||
}
|
|
||||||
//if a whole element was clicked to move
|
|
||||||
else if (e.target.id === "entry")
|
|
||||||
{
|
|
||||||
let rowStart = parseInt(window.getComputedStyle(e.target).gridRowStart);
|
|
||||||
|
|
||||||
selectedListID = e.currentTarget.id;
|
|
||||||
|
|
||||||
if(rowStart === row)
|
|
||||||
{
|
|
||||||
selectedElement = find_current(row + 1, current_list);
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
selectedElement = find_current(row, current_list);
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedElement.colorID = 1;
|
|
||||||
|
|
||||||
setT(!t);
|
|
||||||
|
|
||||||
selectedOffsetTop = row - parseInt(window.getComputedStyle(e.target).gridRowStart);
|
|
||||||
selectedOffsetBottom = parseInt(window.getComputedStyle(e.target).gridRowEnd) - row;
|
|
||||||
}
|
|
||||||
//single click places a new entry
|
|
||||||
else
|
|
||||||
{
|
|
||||||
place_new_entry(row, current_list)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//returns internal format (0 - 96) to a string
|
|
||||||
function internal_to_time(internal)
|
|
||||||
{
|
|
||||||
internal -= 1
|
|
||||||
internal /= 4
|
|
||||||
let integer = Math.floor(internal)
|
|
||||||
let decimal = internal.toFixed(2);
|
|
||||||
let minutes = Math.floor((decimal - integer) * 60);
|
|
||||||
let minutes_string = minutes.toString().length === 1 ? "0" + minutes : minutes
|
|
||||||
return integer + ":" + minutes_string;
|
|
||||||
}
|
|
||||||
|
|
||||||
let temp = []
|
|
||||||
for (let i = 2; i <= 96; i += 2)
|
|
||||||
{
|
|
||||||
temp.push(i);
|
|
||||||
}
|
|
||||||
|
|
||||||
//html of the calender view
|
|
||||||
return (
|
|
||||||
// calender outer container, contains the calender view and resize buttons
|
|
||||||
<div style={{display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", gap: 5}}>
|
|
||||||
{/* resize butto*/}
|
|
||||||
<Button text={"-"} fontSize={25} onClick={() =>
|
|
||||||
{
|
|
||||||
if (cellHeight - 5 >= 10) cellHeight -= 5;
|
|
||||||
setT(!t);
|
|
||||||
}} width={50} height={50}/>
|
|
||||||
{/*shows the day over the columns*/}
|
|
||||||
<div id={t} style={{border: "5px solid #363636", borderRadius: 10}}>
|
|
||||||
<div style={{backgroundColor: "#363636"}}>
|
|
||||||
<div className={"wochen-tag-container"}>
|
|
||||||
<div className={"wochen-tag font-big"}>Montag</div>
|
|
||||||
<div className={"wochen-tag font-big"}>Dienstag</div>
|
|
||||||
<div className={"wochen-tag font-big"}>Mittwoch</div>
|
|
||||||
<div className={"wochen-tag font-big"}>Donnerstag</div>
|
|
||||||
<div className={"wochen-tag font-big"}>Freitag</div>
|
|
||||||
<div className={"wochen-tag font-big"}>Samstag</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/*the viewport of the actual calender*/}
|
|
||||||
<div className={"calender-container"}>
|
|
||||||
|
|
||||||
{/*the content of the calender (rows and columns)*/}
|
|
||||||
<div className={"calender-view content"} style={{height: cellHeight * 96 + 10}}>
|
|
||||||
|
|
||||||
{/*a row which contains all the entries of monday*/}
|
|
||||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
|
||||||
id={"mo"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
|
||||||
|
|
||||||
{/*maps all monday entries to new visible div elements*/}
|
|
||||||
{entries["mo"].map(d => (<div className={"entry"} style={{
|
|
||||||
width: "100%",
|
|
||||||
gridRowStart: d.start_point,
|
|
||||||
gridRowEnd: d.end_point,
|
|
||||||
gridColumnStart: 0,
|
|
||||||
gridColumnEnd: 0,
|
|
||||||
backgroundColor: colors[d.colorID],
|
|
||||||
}} id={"entry"}>
|
|
||||||
{/*content of the entry / element*/}
|
|
||||||
{/*upper resize bar*/}
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
|
||||||
{/*shows the time span of the entry*/}
|
|
||||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
|
||||||
<p>Moduel etc.</p>
|
|
||||||
<p>Mehr Infos</p>
|
|
||||||
<p>Raum</p>
|
|
||||||
</div>
|
|
||||||
{/*lower resize bar*/}
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
</div>))}
|
|
||||||
</div>
|
|
||||||
{/*same as monday*/}
|
|
||||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
|
||||||
id={"tu"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
|
||||||
|
|
||||||
{entries["tu"].map(d => (<div className={"entry"} style={{
|
|
||||||
width: "100%",
|
|
||||||
gridRowStart: d.start_point,
|
|
||||||
gridRowEnd: d.end_point,
|
|
||||||
backgroundColor: colors[d.colorID]
|
|
||||||
}} id={"entry"}>
|
|
||||||
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
|
||||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
|
||||||
<p>Moduel etc.</p>
|
|
||||||
<p>Mehr Infos</p>
|
|
||||||
<p>Raum</p>
|
|
||||||
</div>
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
</div>))}
|
|
||||||
</div>
|
|
||||||
{/*same as monday*/}
|
|
||||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
|
||||||
id={"we"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
|
||||||
|
|
||||||
|
|
||||||
{entries["we"].map(d => (<div className={"entry"} style={{
|
|
||||||
width: "100%",
|
|
||||||
gridRowStart: d.start_point,
|
|
||||||
gridRowEnd: d.end_point,
|
|
||||||
backgroundColor: colors[d.colorID]
|
|
||||||
}} id={"entry"}>
|
|
||||||
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
|
||||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
|
||||||
<p>Moduel etc.</p>
|
|
||||||
<p>Mehr Infos</p>
|
|
||||||
<p>Raum</p>
|
|
||||||
</div>
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
</div>))}
|
|
||||||
</div>
|
|
||||||
{/*same as monday*/}
|
|
||||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
|
||||||
id={"th"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
|
||||||
|
|
||||||
{entries["th"].map(d => (<div className={"entry"} style={{
|
|
||||||
width: "100%",
|
|
||||||
gridRowStart: d.start_point,
|
|
||||||
gridRowEnd: d.end_point,
|
|
||||||
backgroundColor: colors[d.colorID]
|
|
||||||
}} id={"entry"}>
|
|
||||||
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
|
||||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
|
||||||
<p>Moduel etc.</p>
|
|
||||||
<p>Mehr Infos</p>
|
|
||||||
<p>Raum</p>
|
|
||||||
</div>
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
</div>))}
|
|
||||||
</div>
|
|
||||||
{/*same as monday*/}
|
|
||||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
|
||||||
id={"fr"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
|
||||||
|
|
||||||
|
|
||||||
{entries["fr"].map(d => (<div className={"entry"} style={{
|
|
||||||
width: "100%",
|
|
||||||
gridRowStart: d.start_point,
|
|
||||||
gridRowEnd: d.end_point,
|
|
||||||
backgroundColor: colors[d.colorID]
|
|
||||||
}} id={"entry"}>
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
|
||||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
|
||||||
<p>Moduel etc.</p>
|
|
||||||
<p>Mehr Infos</p>
|
|
||||||
<p>Raum</p>
|
|
||||||
</div>
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
</div>))}
|
|
||||||
</div>
|
|
||||||
{/*same as monday*/}
|
|
||||||
<div className={"spalte"} onMouseDown={mouse_down} onMouseUp={mouse_up} onMouseMove={mouse_move}
|
|
||||||
id={"sa"} style={{gridTemplateRows: `repeat(96, ${cellHeight}px)`}}>
|
|
||||||
|
|
||||||
|
|
||||||
{entries["sa"].map(d => (<div className={"entry"} style={{
|
|
||||||
width: "100%",
|
|
||||||
gridRowStart: d.start_point,
|
|
||||||
gridRowEnd: d.end_point,
|
|
||||||
backgroundColor: colors[d.colorID]
|
|
||||||
}} id={"entry"}>
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
<div style={{maxHeight: "60%"}} className={"no-pointer-events"}>
|
|
||||||
<p>{internal_to_time(d.start_point) + " - " + internal_to_time(d.end_point)}</p>
|
|
||||||
<p>Moduel etc.</p>
|
|
||||||
<p>Mehr Infos</p>
|
|
||||||
<p>Raum</p>
|
|
||||||
</div>
|
|
||||||
<div className={"resize-grab"} id={"grab"}></div>
|
|
||||||
</div>))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/*overlay with timeline*/}
|
|
||||||
<div className={"overlay"} style={{backgroundColor: "rgba(0, 0, 0, 0)"}}>
|
|
||||||
{/*maps a list of internal time stamps to lines and time stamps*/}
|
|
||||||
{temp.map(i => (<div style={{
|
|
||||||
width: "100%",
|
|
||||||
height: cellHeight * 2,
|
|
||||||
borderBottom: "1px solid #363636",
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "space-around",
|
|
||||||
alignItems: "center",
|
|
||||||
}} className={"no-pointer-events"}>
|
|
||||||
|
|
||||||
<p style={{
|
|
||||||
color: "gray",
|
|
||||||
marginTop: cellHeight - 3,
|
|
||||||
marginRight: 120,
|
|
||||||
fontSize: 12,
|
|
||||||
textAlign: "center"
|
|
||||||
}}>{internal_to_time(i + 1)}</p>
|
|
||||||
<p style={{
|
|
||||||
color: "gray",
|
|
||||||
marginTop: cellHeight - 3,
|
|
||||||
marginRight: 120,
|
|
||||||
fontSize: 12,
|
|
||||||
textAlign: "center"
|
|
||||||
}}>{internal_to_time(i + 1)}</p>
|
|
||||||
<p style={{
|
|
||||||
color: "gray",
|
|
||||||
marginTop: cellHeight - 3,
|
|
||||||
marginRight: 120,
|
|
||||||
fontSize: 12,
|
|
||||||
textAlign: "center"
|
|
||||||
}}>{internal_to_time(i + 1)}</p>
|
|
||||||
<p style={{
|
|
||||||
color: "gray",
|
|
||||||
marginTop: cellHeight - 3,
|
|
||||||
marginRight: 120,
|
|
||||||
fontSize: 12,
|
|
||||||
textAlign: "center"
|
|
||||||
}}>{internal_to_time(i + 1)}</p>
|
|
||||||
<p style={{
|
|
||||||
color: "gray",
|
|
||||||
marginTop: cellHeight - 3,
|
|
||||||
marginRight: 120,
|
|
||||||
fontSize: 12,
|
|
||||||
textAlign: "center"
|
|
||||||
}}>{internal_to_time(i + 1)}</p>
|
|
||||||
<p style={{
|
|
||||||
color: "gray",
|
|
||||||
marginTop: cellHeight - 3,
|
|
||||||
marginRight: 120,
|
|
||||||
fontSize: 12,
|
|
||||||
textAlign: "center"
|
|
||||||
}}>{internal_to_time(i + 1)}</p>
|
|
||||||
</div>))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/*the second resize button*/}
|
|
||||||
<Button text={"+"} fontSize={25} onClick={() =>
|
|
||||||
{
|
|
||||||
cellHeight += 5;
|
|
||||||
setT(!t)
|
|
||||||
}} width={50} height={50}/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,25 +0,0 @@
|
|||||||
function addDays(date, days) {
|
|
||||||
let result = new Date(date);
|
|
||||||
result.setDate(result.getDate() + days);
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DateElement(props){
|
|
||||||
let startDate;
|
|
||||||
let endDate;
|
|
||||||
const currDate = new Date();
|
|
||||||
|
|
||||||
startDate = addDays(currDate, (currDate.getDay()-1)*-1); //berechnet den Montag der aktuellen Woche
|
|
||||||
startDate = addDays(startDate, props.week*7); //erhöht das Datum um 7 Tage für jede Woche, die weiter geklickt wurde.
|
|
||||||
endDate = addDays(startDate, 6);
|
|
||||||
|
|
||||||
const startDateString = `${startDate.getDate()}.${startDate.getMonth()+1}.${startDate.getFullYear()}`;
|
|
||||||
const endDateString = `${endDate.getDate()}.${endDate.getMonth()+1}.${endDate.getFullYear()}`;
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="dateElement round-border">
|
|
||||||
<p>{startDateString} - {endDateString}</p>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
export const arrowLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-arrow-left" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
|
|
||||||
</svg>`
|
|
||||||
|
|
||||||
export const arrowRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
|
|
||||||
</svg>`
|
|
||||||
@@ -1,48 +0,0 @@
|
|||||||
import Button from "@/components/Button";
|
|
||||||
import {useState} from "react";
|
|
||||||
|
|
||||||
let shown = false;
|
|
||||||
|
|
||||||
export default function PopUp() {
|
|
||||||
const [displayState, setDisplayState] = useState("none");
|
|
||||||
|
|
||||||
function toggleModal() {
|
|
||||||
shown = !shown;
|
|
||||||
if (shown)
|
|
||||||
{
|
|
||||||
setDisplayState("block");
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
setDisplayState("none");
|
|
||||||
}
|
|
||||||
console.log("test");
|
|
||||||
}
|
|
||||||
|
|
||||||
function on_abgeben_pressed()
|
|
||||||
{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Button text={"Abgeben"} onClick={toggleModal}/>
|
|
||||||
|
|
||||||
<div style={{
|
|
||||||
display: displayState
|
|
||||||
}}>
|
|
||||||
|
|
||||||
<div className={"modal-container"}>
|
|
||||||
<div className={"modal"}>
|
|
||||||
<p className={"font-middle"}>Kalender wirklich abgeben?</p>
|
|
||||||
<div>
|
|
||||||
<Button text={"Abbrechen"} color={"#363636"} onClick={toggleModal}/>
|
|
||||||
<Button text={"Abgeben"} color={"#7a7a7a"} onClick={on_abgeben_pressed}/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,26 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
|
|
||||||
export default function StatusBar(p)
|
|
||||||
{
|
|
||||||
if(p.progress > 100) p.progress = 100;
|
|
||||||
let classNames = ["not-started", "started", "finished"];
|
|
||||||
let index = p.progress / 50;
|
|
||||||
|
|
||||||
let actives = ["", "", ""]
|
|
||||||
actives[index] = "active";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={"step-container"}>
|
|
||||||
<div className={"steps"}>
|
|
||||||
<span className={"step " + classNames[index] + " " + actives[0]}>1</span>
|
|
||||||
<span className={"step " + classNames[index] + " " + actives[1]}>2</span>
|
|
||||||
<span className={"step " + classNames[index] + " " + actives[2]}>3</span>
|
|
||||||
<div className={"progress-bar " + classNames[index]}
|
|
||||||
style={{
|
|
||||||
width: p.progress + "%"
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
import Button from "@/components/Button";
|
|
||||||
import DateElement from "@/components/DateElement";
|
|
||||||
import { arrowLeft } from "./Icons"
|
|
||||||
import { arrowRight } from "./Icons"
|
|
||||||
import { useState } from 'react'
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default function WeekSelector(){
|
|
||||||
const [weeks, setWeeks] = useState(0)
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="weekSelector">
|
|
||||||
<Button icon={arrowLeft} onClick={() => setWeeks(weeks-1)} />
|
|
||||||
<DateElement week={weeks}/>
|
|
||||||
<Button icon={arrowRight} onClick={() => setWeeks(weeks+1)}/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
import '@/styles/globals.css'
|
|
||||||
|
|
||||||
export default function App({ Component, pageProps }) {
|
|
||||||
return <Component {...pageProps} />
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
|
||||||
|
|
||||||
export default function handler(req, res) {
|
|
||||||
res.status(200).json({ name: 'John Doe' })
|
|
||||||
}
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
import {Inter} from 'next/font/google'
|
|
||||||
import React, {useState} from "react";
|
|
||||||
import StatusBar from "@/components/StatusBar";
|
|
||||||
import Button from "@/components/Button";
|
|
||||||
import {arrowLeft, arrowRight} from "@/components/Icons";
|
|
||||||
import WeekSelector from "@/components/WeekSelector";
|
|
||||||
import PopUp from "@/components/PopUp";
|
|
||||||
import CalenderView from "@/components/CalenderView";
|
|
||||||
import DateElement from "@/components/DateElement";
|
|
||||||
|
|
||||||
|
|
||||||
const inter = Inter({subsets: ['latin']})
|
|
||||||
|
|
||||||
export default function Home(p) {
|
|
||||||
|
|
||||||
|
|
||||||
const url = "http://localhost:8080/weeks"
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
|
|
||||||
<>
|
|
||||||
<div style={{height: 50}}></div>
|
|
||||||
<CalenderView/>
|
|
||||||
<Button onClick={() => {
|
|
||||||
fetch(url + "?id=1", {method: "GET"}).then(response => response.json()).then(json => {
|
|
||||||
console.log(json.days[1].text)
|
|
||||||
});
|
|
||||||
}} text={"Fetch"}/>
|
|
||||||
</>
|
|
||||||
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,300 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--foreground-rgb: 0, 0, 0;
|
|
||||||
--background-start-rgb: 255, 255, 255;
|
|
||||||
--background-end-rgb: 255, 255, 255;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: rgb(var(--foreground-rgb));
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
transparent,
|
|
||||||
rgb(var(--background-end-rgb))
|
|
||||||
)
|
|
||||||
rgb(var(--background-start-rgb));
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Button
|
|
||||||
*/
|
|
||||||
.round-border
|
|
||||||
{
|
|
||||||
border-radius: 5px;
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-small
|
|
||||||
{
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-middle
|
|
||||||
{
|
|
||||||
font-size: 16px ;
|
|
||||||
}
|
|
||||||
|
|
||||||
.font-big
|
|
||||||
{
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button
|
|
||||||
{
|
|
||||||
background-color: #363636;
|
|
||||||
padding: 5px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover
|
|
||||||
{
|
|
||||||
background-color: #585858;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Step Progress Bar
|
|
||||||
*/
|
|
||||||
.step-container
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 20px;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.step
|
|
||||||
{
|
|
||||||
width: 40px; height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps .not-started
|
|
||||||
{
|
|
||||||
background-image: linear-gradient(#b42121, #b44821);
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps .started
|
|
||||||
{
|
|
||||||
background-image: linear-gradient(#c75c0c, #c77c0c);
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps .finished
|
|
||||||
{
|
|
||||||
background-image: linear-gradient(#43C20BFF, #0bc27c);
|
|
||||||
}
|
|
||||||
|
|
||||||
.steps .active
|
|
||||||
{
|
|
||||||
border-width: 3px;
|
|
||||||
border-color: #1e2428;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar
|
|
||||||
{
|
|
||||||
position: absolute;
|
|
||||||
height: 8px;
|
|
||||||
background-color: #5d606e;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.dateElement{
|
|
||||||
display: flex;
|
|
||||||
margin-left: 20px;
|
|
||||||
margin-right: 20px;
|
|
||||||
height: 50px;
|
|
||||||
width: 200px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #0d52ce;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weekSelector {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Popup
|
|
||||||
*/
|
|
||||||
|
|
||||||
.modal-container
|
|
||||||
{
|
|
||||||
z-index: 1;
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal
|
|
||||||
{
|
|
||||||
width: 300px;
|
|
||||||
height: 100px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background-color: rgb(255, 255, 255);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal p
|
|
||||||
{
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal div
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: end;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Calender View
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
.calender-container
|
|
||||||
{
|
|
||||||
max-height: 600px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calender-container::-webkit-scrollbar
|
|
||||||
{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content
|
|
||||||
{
|
|
||||||
grid-area: 1 / 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay
|
|
||||||
{
|
|
||||||
padding: 2px 0 0 0;
|
|
||||||
grid-area: 1 / 1;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-pointer-events
|
|
||||||
{
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wochen-tag-container
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 60px;
|
|
||||||
width: 1000px;
|
|
||||||
gap: 5px;
|
|
||||||
padding: 0 0 5px 0;
|
|
||||||
background-color: #363636;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calender-view
|
|
||||||
{
|
|
||||||
width: 1000px;
|
|
||||||
height: 2400px;
|
|
||||||
background-color: #363636;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: stretch;
|
|
||||||
justify-content: stretch;
|
|
||||||
gap: 5px;
|
|
||||||
user-select: none;
|
|
||||||
padding: 2px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.calender-view .spalte
|
|
||||||
{
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 400px;
|
|
||||||
background-color: white;
|
|
||||||
display: grid;
|
|
||||||
padding: 0 3px;
|
|
||||||
grid-template-columns: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wochen-tag-container .wochen-tag
|
|
||||||
{
|
|
||||||
text-align: center;
|
|
||||||
background-color: #f80000;
|
|
||||||
width: 400px;
|
|
||||||
color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
grid-row-start: 1;
|
|
||||||
grid-row-end: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry
|
|
||||||
{
|
|
||||||
border-radius: 10px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 2px;
|
|
||||||
align-items: center;
|
|
||||||
cursor: move;
|
|
||||||
z-index: 10;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-top: 1px;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry .resize-grab
|
|
||||||
{
|
|
||||||
height: 5px;
|
|
||||||
cursor: ns-resize;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.entry p
|
|
||||||
{
|
|
||||||
color: white;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: default;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
|
||||||
module.exports = {
|
|
||||||
content: [
|
|
||||||
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
||||||
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
||||||
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
backgroundImage: {
|
|
||||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
||||||
'gradient-conic':
|
|
||||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
Binary file not shown.
@@ -1,23 +0,0 @@
|
|||||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
|
||||||
|
|
||||||
# dependencies
|
|
||||||
/node_modules
|
|
||||||
/.pnp
|
|
||||||
.pnp.js
|
|
||||||
|
|
||||||
# testing
|
|
||||||
/coverage
|
|
||||||
|
|
||||||
# production
|
|
||||||
/build
|
|
||||||
|
|
||||||
# misc
|
|
||||||
.DS_Store
|
|
||||||
.env.local
|
|
||||||
.env.development.local
|
|
||||||
.env.test.local
|
|
||||||
.env.production.local
|
|
||||||
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
Generated
-5
@@ -1,5 +0,0 @@
|
|||||||
# Default ignored files
|
|
||||||
/shelf/
|
|
||||||
/workspace.xml
|
|
||||||
# Editor-based HTTP Client requests
|
|
||||||
/httpRequests/
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
<component name="InspectionProjectProfileManager">
|
|
||||||
<profile version="1.0">
|
|
||||||
<option name="myName" value="Project Default" />
|
|
||||||
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
|
||||||
</profile>
|
|
||||||
</component>
|
|
||||||
Generated
-8
@@ -1,8 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="ProjectModuleManager">
|
|
||||||
<modules>
|
|
||||||
<module fileurl="file://$PROJECT_DIR$/.idea/projekt.iml" filepath="$PROJECT_DIR$/.idea/projekt.iml" />
|
|
||||||
</modules>
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
Generated
-13
@@ -1,13 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<module type="WEB_MODULE" version="4">
|
|
||||||
<component name="NewModuleRootManager">
|
|
||||||
<content url="file://$MODULE_DIR$">
|
|
||||||
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
|
|
||||||
<excludeFolder url="file://$MODULE_DIR$/build" />
|
|
||||||
<excludeFolder url="file://$MODULE_DIR$/temp" />
|
|
||||||
<excludeFolder url="file://$MODULE_DIR$/tmp" />
|
|
||||||
</content>
|
|
||||||
<orderEntry type="inheritedJdk" />
|
|
||||||
<orderEntry type="sourceFolder" forTests="false" />
|
|
||||||
</component>
|
|
||||||
</module>
|
|
||||||
Generated
-6
@@ -1,6 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<project version="4">
|
|
||||||
<component name="VcsDirectoryMappings">
|
|
||||||
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
|
|
||||||
</component>
|
|
||||||
</project>
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
# Getting Started with Create React App
|
|
||||||
|
|
||||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
|
||||||
|
|
||||||
## Available Scripts
|
|
||||||
|
|
||||||
In the project directory, you can run:
|
|
||||||
|
|
||||||
### `npm start`
|
|
||||||
|
|
||||||
Runs the app in the development mode.\
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
|
||||||
|
|
||||||
The page will reload when you make changes.\
|
|
||||||
You may also see any lint errors in the console.
|
|
||||||
|
|
||||||
### `npm test`
|
|
||||||
|
|
||||||
Launches the test runner in the interactive watch mode.\
|
|
||||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
|
||||||
|
|
||||||
### `npm run build`
|
|
||||||
|
|
||||||
Builds the app for production to the `build` folder.\
|
|
||||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
|
||||||
|
|
||||||
The build is minified and the filenames include the hashes.\
|
|
||||||
Your app is ready to be deployed!
|
|
||||||
|
|
||||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
|
||||||
|
|
||||||
### `npm run eject`
|
|
||||||
|
|
||||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
|
||||||
|
|
||||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
|
||||||
|
|
||||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
|
||||||
|
|
||||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
|
||||||
|
|
||||||
## Learn More
|
|
||||||
|
|
||||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
|
||||||
|
|
||||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
|
||||||
|
|
||||||
### Code Splitting
|
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
|
||||||
|
|
||||||
### Analyzing the Bundle Size
|
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
|
||||||
|
|
||||||
### Making a Progressive Web App
|
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
|
||||||
|
|
||||||
### Advanced Configuration
|
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
|
||||||
|
|
||||||
### Deployment
|
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
|
||||||
|
|
||||||
### `npm run build` fails to minify
|
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
|
||||||
Generated
-17305
File diff suppressed because it is too large
Load Diff
@@ -1,42 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "projekt",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"dependencies": {
|
|
||||||
"@testing-library/jest-dom": "^5.16.5",
|
|
||||||
"@testing-library/react": "^13.4.0",
|
|
||||||
"@testing-library/user-event": "^13.5.0",
|
|
||||||
"react": "^18.2.0",
|
|
||||||
"react-dom": "^18.2.0",
|
|
||||||
"react-scripts": "5.0.1",
|
|
||||||
"web-vitals": "^2.1.4"
|
|
||||||
},
|
|
||||||
"scripts": {
|
|
||||||
"start": "react-scripts start",
|
|
||||||
"build": "react-scripts build",
|
|
||||||
"test": "react-scripts test",
|
|
||||||
"eject": "react-scripts eject"
|
|
||||||
},
|
|
||||||
"eslintConfig": {
|
|
||||||
"extends": [
|
|
||||||
"react-app",
|
|
||||||
"react-app/jest"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"browserslist": {
|
|
||||||
"production": [
|
|
||||||
">0.2%",
|
|
||||||
"not dead",
|
|
||||||
"not op_mini all"
|
|
||||||
],
|
|
||||||
"development": [
|
|
||||||
"last 1 chrome version",
|
|
||||||
"last 1 firefox version",
|
|
||||||
"last 1 safari version"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"tailwindcss": "^3.3.2"
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
@@ -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>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
@@ -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"
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
# https://www.robotstxt.org/robotstxt.html
|
|
||||||
User-agent: *
|
|
||||||
Disallow:
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import './App.css';
|
|
||||||
import Button from "./components/Button";
|
|
||||||
import {arrowLeft} from "./Icons";
|
|
||||||
import {arrowRight} from "./Icons";
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="App">
|
|
||||||
<Button icon={arrowLeft} iconWidth={50} iconHeight={50} width={200} height={100}/>
|
|
||||||
<Button icon={arrowRight}></Button>
|
|
||||||
<Button text={"Hallo"} onClick={() => {console.log("test")}}></Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
import { render, screen } from '@testing-library/react';
|
|
||||||
import App from './App';
|
|
||||||
|
|
||||||
test('renders learn react link', () => {
|
|
||||||
render(<App />);
|
|
||||||
const linkElement = screen.getByText(/learn react/i);
|
|
||||||
expect(linkElement).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
||||||
sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
||||||
monospace;
|
|
||||||
}
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import ReactDOM from 'react-dom/client';
|
|
||||||
import './index.css';
|
|
||||||
import App from './App';
|
|
||||||
import reportWebVitals from './reportWebVitals';
|
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
|
||||||
root.render(
|
|
||||||
<React.StrictMode>
|
|
||||||
<App />
|
|
||||||
</React.StrictMode>
|
|
||||||
);
|
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
|
||||||
// to log results (for example: reportWebVitals(console.log))
|
|
||||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
|
||||||
reportWebVitals();
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
const reportWebVitals = onPerfEntry => {
|
|
||||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
|
||||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
|
||||||
getCLS(onPerfEntry);
|
|
||||||
getFID(onPerfEntry);
|
|
||||||
getFCP(onPerfEntry);
|
|
||||||
getLCP(onPerfEntry);
|
|
||||||
getTTFB(onPerfEntry);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default reportWebVitals;
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
|
||||||
// allows you to do things like:
|
|
||||||
// expect(element).toHaveTextContent(/react/i)
|
|
||||||
// learn more: https://github.com/testing-library/jest-dom
|
|
||||||
import '@testing-library/jest-dom';
|
|
||||||
Reference in New Issue
Block a user