Imbus/TTime
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'frontend' into gruppPP

Browse source
This commit is contained in:
Peter KW 2024-03-17 15:39:16 +01:00
commit 060dc1ee3d
11 changed files with 368 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
backend/internal/database/db.go
View file

@ -2,7 +2,6 @@ package database
import (
"embed"
"os"
"path/filepath"
"ttime/internal/types"
@ -19,7 +18,7 @@ type Database interface {
PromoteToAdmin(username string) error
GetUserId(username string) (int, error)
AddProject(name string, description string, username string) error
Migrate(dirname string) error
Migrate() error
GetProjectId(projectname string) (int, error)
AddWeeklyReport(projectName string, userName string, week int, developmentTime int, meetingTime int, adminTime int, ownWorkTime int, studyTime int, testingTime int) error
AddUserToProject(username string, projectname string, role string) error
@ -259,13 +258,18 @@ func (d *Db) GetAllUsersApplication() ([]string, error) {
// Reads a directory of migration files and applies them to the database.
// This will eventually be used on an embedded directory
func (d *Db) Migrate(dirname string) error {
func (d *Db) Migrate() error {
// Read the embedded scripts directory
files, err := scripts.ReadDir("migrations")
if err != nil {
return err
}
if len(files) == 0 {
println("No migration files found")
return nil
}
tr := d.MustBegin()
// Iterate over each SQL file and execute it
@ -275,8 +279,7 @@ func (d *Db) Migrate(dirname string) error {
}
// This is perhaps not the most elegant way to do this
sqlFile := filepath.Join("migrations", file.Name())
sqlBytes, err := os.ReadFile(sqlFile)
sqlBytes, err := scripts.ReadFile("migrations/" + file.Name())
if err != nil {
return err
}

2
backend/internal/database/db_test.go
View file

@ -8,7 +8,7 @@ import (
func setupState() (Database, error) {
db := DbConnect(":memory:")
err := db.Migrate("../../migrations")
err := db.Migrate()
if err != nil {
return nil, err
}

5
backend/main.go
View file

@ -43,6 +43,11 @@ func main() {
// Connect to the database
db := database.DbConnect(conf.DbPath)
// Migrate the database
if err = db.Migrate(); err != nil {
fmt.Println("Error migrating database: ", err)
}
// Get our global state
gs := handlers.NewGlobalState(db)
// Create the server

104
frontend/src/API/API.ts
View file

@ -1,5 +1,10 @@
import { NewProject, Project } from "../Types/Project";
import { NewUser, User } from "../Types/Users";
import {
NewWeeklyReport,
NewUser,
User,
Project,
NewProject,
} from "../Types/goTypes";
// This type of pattern should be hard to misuse
interface APIResponse<T> {
@ -20,8 +25,20 @@ interface API {
project: NewProject,
token: string,
): Promise<APIResponse<Project>>;
/** Submit a weekly report */
submitWeeklyReport(
project: NewWeeklyReport,
token: string,
): Promise<APIResponse<Project>>;
/** Renew the token */
renewToken(token: string): Promise<APIResponse<string>>;
/** Gets all the projects of a user*/
getUserProjects(
username: string,
token: string,
): Promise<APIResponse<Project[]>>;
/** Login */
login(NewUser: NewUser): Promise<APIResponse<JSON>>;
}
// Export an instance of the API
@ -117,4 +134,87 @@ export const api: API = {
return { success: false, message: "Failed to renew token" };
}
},
async getUserProjects(token: string): Promise<APIResponse<Project[]>> {
try {
const response = await fetch("/api/getUserProjects", {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
});
if (!response.ok) {
return Promise.resolve({
success: false,
message: "Failed to get user projects",
});
} else {
const data = (await response.json()) as Project[];
return Promise.resolve({ success: true, data });
}
} catch (e) {
return Promise.resolve({
success: false,
message: "Failed to get user projects",
});
}
},
async submitWeeklyReport(
project: NewWeeklyReport,
token: string,
): Promise<APIResponse<Project>> {
try {
return fetch("/api/submitWeeklyReport", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + token,
},
body: JSON.stringify(project),
})
.then((response) => {
if (!response.ok) {
return {
success: false,
message: "Failed to submit weekly report",
};
} else {
return response.json();
}
})
.then((data: Project) => {
return { success: true, data };
});
} catch (e) {
return Promise.resolve({
success: false,
message: "Failed to submit weekly report",
});
}
},
async login(NewUser: NewUser): Promise<APIResponse<string>> {
try {
const response = await fetch("/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(NewUser),
});
if (!response.ok) {
return { success: false, message: "Failed to login" };
} else {
const data = (await response.json()) as { token: string }; // Fix: Change the type of 'data'
const token = data.token;
return { success: true, data: token };
}
} catch (e) {
return { success: false, message: "Failed to login" };
}
},
};

56
frontend/src/Components/Register.tsx
View file

@ -4,6 +4,32 @@ import { api } from "../API/API";
import Logo from "../assets/Logo.svg";
import Button from "./Button";
function InputField(props: {
label: string;
type: string;
value: string;
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}): JSX.Element {
return (
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-sans font-bold mb-2"
htmlFor={props.label}
>
{props.label}
</label>
<input
className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id={props.label}
type={props.type}
placeholder={props.label}
value={props.value}
onChange={props.onChange}
/>
</div>
);
}
export default function Register(): JSX.Element {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
@ -14,7 +40,7 @@ export default function Register(): JSX.Element {
};
return (
<div className="flex flex-col h-screen w-screen items-center justify-center">
<div className="flex flex-col h-fit w-screen items-center justify-center">
<div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
<form
className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
@ -31,42 +57,22 @@ export default function Register(): JSX.Element {
<h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
Register New User
</h3>
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-sans font-bold mb-2"
htmlFor="username"
>
Username
</label>
<input
className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="username"
<InputField
label="Username"
type="text"
placeholder="Username"
value={username}
onChange={(e) => {
setUsername(e.target.value);
}}
/>
</div>
<div className="mb-6">
<label
className="block text-gray-700 text-sm font-sans font-bold mb-2"
htmlFor="password"
>
Password
</label>
<input
className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="password"
<InputField
label="Password"
type="password"
placeholder="Choose your password"
value={password}
onChange={(e) => {
setPassword(e.target.value);
}}
/>
</div>
<div className="flex items-center justify-between">
<Button
text="Register"

176
frontend/src/Components/TimeReport.tsx
View file

@ -1,20 +1,58 @@
function NewTimeReport(): JSX.Element {
const activities = [
"Development",
"Meeting",
"Administration",
"Own Work",
"Studies",
"Testing",
];
import { useState } from "react";
import { TimeReport } from "../Types/TimeReport";
import { api } from "../API/API";
import { useNavigate } from "react-router-dom";
import Button from "./Button";
export default function NewTimeReport(): JSX.Element {
const [week, setWeek] = useState("");
const [development, setDevelopment] = useState("0");
const [meeting, setMeeting] = useState("0");
const [administration, setAdministration] = useState("0");
const [ownwork, setOwnWork] = useState("0");
const [studies, setStudies] = useState("0");
const [testing, setTesting] = useState("0");
const handleNewTimeReport = async (): Promise<void> => {
const newTimeReport: TimeReport = {
week,
development,
meeting,
administration,
ownwork,
studies,
testing,
};
await Promise.resolve();
// await api.registerTimeReport(newTimeReport); This needs to be implemented!
};
const navigate = useNavigate();
return (
<>
<div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
<form
onSubmit={(e) => {
if (week === "") {
alert("Please enter a week number");
e.preventDefault();
return;
}
e.preventDefault();
void handleNewTimeReport();
navigate("/project");
}}
>
<div className="flex flex-col items-center">
<input
className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
type="week"
placeholder="Week"
onChange={(e) => {
const weekNumber = e.target.value.split("-W")[1];
setWeek(weekNumber);
}}
onKeyDown={(event) => {
event.preventDefault();
}}
@ -25,21 +63,121 @@ function NewTimeReport(): JSX.Element {
<table className="w-full text-center divide-y divide-x divide-white text-[30px]">
<thead>
<tr>
<th className="w-1/2 py-2 border-b-2 border-black">Activity</th>
<th className="w-1/2 py-2 border-b-2 border-black">
Activity
</th>
<th className="w-1/2 py-2 border-b-2 border-black">
Total Time (min)
</th>
</tr>
</thead>
<tbody className="divide-y divide-black">
{activities.map((activity, index) => (
<tr key={index} className="h-[10vh]">
<td>{activity}</td>
<tr className="h-[10vh]">
<td>Development</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={development}
onChange={(e) => {
setDevelopment(e.target.value);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Meeting</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={meeting}
onChange={(e) => {
setMeeting(e.target.value);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Administration</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={administration}
onChange={(e) => {
setAdministration(e.target.value);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Own Work</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={ownwork}
onChange={(e) => {
setOwnWork(e.target.value);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Studies</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={studies}
onChange={(e) => {
setStudies(e.target.value);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
event.preventDefault();
}}
/>
</td>
</tr>
<tr className="h-[10vh]">
<td>Testing</td>
<td>
<input
type="number"
min="0"
className="border-2 border-black rounded-md text-center w-1/2"
value={testing}
onChange={(e) => {
setTesting(e.target.value);
}}
onKeyDown={(event) => {
const keyValue = event.key;
if (!/\d/.test(keyValue) && keyValue !== "Backspace")
@ -48,12 +186,18 @@ function NewTimeReport(): JSX.Element {
/>
</td>
</tr>
))}
</tbody>
</table>
<Button
text="Submit"
onClick={(): void => {
return;
}}
type="submit"
/>
</div>
</form>
</div>
</>
);
}
export default NewTimeReport;

14
frontend/src/Pages/AdminPages/AdminAddUser.tsx
View file

@ -1,18 +1,16 @@
import BasicWindow from "../../Components/BasicWindow";
import Button from "../../Components/Button";
import Register from "../../Components/Register";
function AdminAddUser(): JSX.Element {
const content = <></>;
const content = (
<>
<Register />
</>
);
const buttons = (
<>
<Button
text="Finish"
onClick={(): void => {
return;
}}
type="button"
/>
<Button
text="Back"
onClick={(): void => {

5
frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx
View file

@ -13,14 +13,15 @@ function UserNewTimeReportPage(): JSX.Element {
const buttons = (
<>
<Link to="/project">
<Button
text="Submit"
text="Back"
onClick={(): void => {
return;
}}
type="button"
/>
<BackButton />
</Link>
</>
);

13
frontend/src/Types/Project.ts
View file

@ -1,13 +0,0 @@
export interface Project {
id: number;
name: string;
description: string;
owner: string;
created: string; // This is a date
}
export interface NewProject {
name: string;
description: string;
owner: string;
}

11
frontend/src/Types/Users.ts
View file

@ -1,11 +0,0 @@
// This is how the API responds
export interface User {
id: number;
userName: string;
}
// Used to create a new user
export interface NewUser {
userName: string;
password: string;
}

4
frontend/src/main.tsx
View file

@ -20,10 +20,6 @@ const router = createBrowserRouter([
path: "/pm",
element: <YourProjectsPage />,
},
{
path: "/user",
element: <YourProjectsPage />,
},
]);
// Semi-hacky way to get the root element