TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-18 13:34:08 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update Profile page

Browse Source
This commit is contained in:
sosokker 2023-11-16 21:56:52 +07:00
parent c8aabdbaff
commit ba310461df
4 changed files with 151 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/App.jsx
View File

@ -6,11 +6,11 @@ import LoginPage from "./components/authentication/LoginPage";
import SignUpPage from "./components/authentication/SignUpPage";
import NavBar from "./components/navigations/Navbar";
import Home from "./components/Home";
import ProfileUpdate from "./components/ProfileUpdatePage";
import Calendar from "./components/calendar/calendar";
import KanbanBoard from "./components/kanbanBoard/kanbanBoard";
import IconSideNav from "./components/navigations/IconSideNav";
import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
import ProfileUpdatePage from "./components/profilePage";
const App = () => {
const location = useLocation();
@ -27,7 +27,7 @@ const App = () => {
<Route path="/" element={<Home />} />
<Route path="/tasks" element={<KanbanBoard />} />
<Route path="/testAuth" element={<TestAuth />} />
<Route path="/update_profile" element={<ProfileUpdate />} />
<Route path="/profile" element={<ProfileUpdatePage />} />
<Route path="/calendar" element={<Calendar />} />
<Route path="/priority" element={<Eisenhower />} />
<Route path="/login" element={<LoginPage />} />

4
frontend/src/components/ProfileUpdatePage.jsx → frontend/src/components/ProfileUpdateComponent.jsx
View File

@ -1,7 +1,7 @@
import React, { useState, useRef } from 'react';
import { ApiUpdateUserProfile } from '../api/UserProfileApi';
function ProfileUpdate() {
function ProfileUpdateComponent() {
const [file, setFile] = useState(null);
const [username, setUsername] = useState('');
const [fullName, setFullName] = useState('');
@ -104,4 +104,4 @@ function ProfileUpdate() {
);
}
export default ProfileUpdate;
export default ProfileUpdateComponent;

2
frontend/src/components/navigations/Navbar.jsx
View File

@ -4,7 +4,7 @@ import IsAuthenticated from "../authentication/IsAuthenticated";
import axiosapi from "../../api/AuthenticationApi";
const settings = {
Profile: '/update_profile',
Profile: '/profile',
Account: '/account',
};

146
frontend/src/components/profilePage.jsx Normal file
View File

@ -0,0 +1,146 @@
import * as React from "react";
import ProfileUpdateComponent from "./ProfileUpdateComponent";
function ProfileUpdatePage() {
return (
<div>
<div className="stats shadow">
<div className="stat">
<div className="stat-title truncate">Username</div>
<div className="stat-value truncate">Sirin</div>
<div className="stat-desc truncate">User ID</div>
<div className="stat-figure text-secondary">
<div className="avatar online">
<div className="w-20 rounded-full">
<img src="https://us-tuna-sounds-images.voicemod.net/f322631f-689a-43ac-81ab-17a70f27c443-1692187175560.png" />
</div>
</div>
</div>
</div>
<div className="stat">
<div className="stat-title">Health</div>
<div className="stat-value flex truncate">
234/3213
<div className="stat-figure text-secondary px-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="red" viewBox="0 0 24 24" className="inline-block w-8 h-8">
<path d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0"></path>
</svg>
</div>
</div>
<div className="stat-desc py-2">32% Remain</div>
<progress className="progress progress-error w-56" value={20} max="100"></progress>
</div>
<div className="stat">
<div className="stat-title truncate">Level</div>
<div className="stat-value flex">
1
<div className="stat-figure text-secondary px-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="#3abff8"
viewBox="0 0 24 24"
className="inline-block w-8 h-8">
<path d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
</div>
<div className="stat-desc py-2">3213/321312321 points</div>
<progress class="progress progress-info w-36" value="10" max="100"></progress>
</div>
<div className="stat">
<div className="stat-title">Gold</div>
<div className="stat-value flex truncate">
331412421
<div className="stat-figure text-secondary px-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
className="inline-block w-8 h-8 stroke-current">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
stroke="gold"
d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
</svg>
</div>
</div>
<div className="stat-desc py-2">Top 12% of Global Ranking</div>
<progress className="progress progress-warning w-56" value={20} max="100"></progress>
</div>
</div>
<div className="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">About me</h2>
<div class="card-actions justify-end"></div>
<textarea class="textarea textarea-bordered textarea-lg w-full" disabled>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum dolores recusandae, officiis consequuntur
nam, non ab commodi totam mollitia iusto nemo voluptatum error aliquam similique perspiciatis, eligendi
nulla. Animi, sit?
</textarea>
</div>
</div>
<div className="grid grid-cols-2 grid-rows-2 gap-4 my-2">
<div className="col-span-full">
<div className="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">Overall Statistics</h2>
<div class="card-actions justify-end"></div>
</div>
</div>
</div>
<div className="col-start-2 row-start-2">
<div className="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">Achievements</h2>
<div class="card-actions justify-end"></div>
</div>
</div>
</div>
<div className="col-start-1 row-start-2">
<div className="card bg-base-100 shadow">
<div class="card-body">
<h2 class="card-title">Friends</h2>
<div class="card-actions justify-end"></div>
</div>
</div>
</div>
</div>
<div class="fixed bottom-4 right-4">
<ul className="menu menu-horizontal bg-base-200 rounded-box">
<li>
<a onClick={() => document.getElementById("my_modal_4").showModal()}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
fill="currentColor"
viewBox="0 0 16 16"
stroke="currentColor">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
</svg>
<p className="text-xl font-bold">Edit</p>
</a>
</li>
</ul>
</div>
{/* Modal */}
<dialog id="my_modal_4" className="modal">
<div className="modal-box w-11/12 max-w-5xl flex flex-col">
<form method="dialog">
<ProfileUpdateComponent />
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
</form>
</div>
</dialog>
</div>
);
}
export default ProfileUpdatePage;