MyFit/users-myfit
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'master' of https://gitlab.chiefsoft.net/MyFit/users-myfit into capability-to-hide-history

Browse Source
This commit was merged in pull request #78.
This commit is contained in:
Ebube
2023-10-04 12:34:48 +01:00
parent 29a101a062 c4b41a6557
commit 1841e7b3d5
10 changed files with 283 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AuthPages/AuthLayout.jsx
+13 -16
View File
@@ -1,28 +1,25 @@
import React from "react";
import loginThumb from "../../assets/images/auth-thumb.svg";
import logo from "../../assets/images/light-logo.png"; //logo-1.svg";
import logo from "../../assets/images/light-logo.png";
/**
* Renders a login layout with a slogan and child components.
* The layout adjusts its height based on the screen height.
* @returns {React.Component} The rendered login layout.
*/
export default function LoginLayout({ slogan, children }) {
const checkScreenHeight = window.screen.height;
let screen = "";
if (checkScreenHeight <= 950) {
screen = "h-screen";
// screen = "h-[950px]";
} else {
screen = "h-screen";
}
const screen = window.screen.height <= 950 ? "h-screen" : "h-screen";
return (
<div className="layout-wrapper">
<div className={`main-wrapper w-full ${screen}`}>
<div className="flex w-full h-full">
<div className="xl:flex hidden w-1/2 h-full p-[70px] flex-col justify-between primary-home">
{/*
<div className="logo">
{/* <div className="logo">
<img src={logo} alt="logo" />
</div>
*/}
</div> */}
<div className="thumbnail flex justify-center">
{/* <img src={loginThumb} alt="login-thumb" />*/}
{/* <img src={loginThumb} alt="login-thumb" /> */}
</div>
<div className="article w-[600px]">
<p className="text-[60px] font-bold leading-[72px] text-white">
@@ -31,10 +28,10 @@ export default function LoginLayout({ slogan, children }) {
</div>
</div>
<div className="flex-1 flex justify-center items-center">
{children && children}
{children}
</div>
</div>
</div>
</div>
);
}
}
src/components/AuthPages/Login/index.jsx
+4 -1
View File
@@ -73,7 +73,7 @@ export default function Login() {
<div className="content-wrapper w-full flex justify-center items-center xl:bg-white dark:bg-dark-white 2xl:w-[828px] xl:w-[500px] 2xl:h-[818px] xl:h-[600px] rounded-xl 2xl:px-[164px] xl:px-[56px] sm:px-7 px-5 ">
<div className="w-full">
<div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
<h1 className="text-5xl font-bold leading-[74px] text-dark-gray dark:text-white">
<h1 className="text-5xl font-bold leading-[74px] text-dark-gray dark:text-white">
Log In
</h1>
<div className="shape mb-[10px]">
@@ -170,6 +170,9 @@ export default function Login() {
</a>
</p>
</div>
<div>
{process.env.REACT_APP_VERSION_NO}
</div>
</div>
</div>
</div>
src/components/Calendar/CalendarTable.jsx
+37 -23
View File
@@ -21,11 +21,11 @@ export default function CalendarTable({ className }) {
const [value, onChange] = useState(new Date()); // value of calendar date and onchange handler for calendar
const [remDate, setRemDate] = useState([]) // for holding dates on reminders to display on calendar
const reminderApi = new usersService(); // instantiating the API SERVICE
const calenderApi = new usersService(); // instantiating the API SERVICE
const getUserReminders = async () => {
try {
const res = await reminderApi.getUserReminders();
const res = await calenderApi.getUserReminders();
if(res.status == 200 && res.data.status > 0){
setRemDate(res.data.reminders)
setIsLoading(false)
@@ -117,32 +117,46 @@ export default function CalendarTable({ className }) {
);
}
const ReminderThumbnail = ({reminders}) => {
/**
* Renders a list of reminder thumbnails.
* Each thumbnail displays the reminder's category image, description, and start date.
* Each object should have the following properties:
* - category (string): The category of the reminder.
* - description (string): The description of the reminder.
* - start_date (string): The start date of the reminder.
*/
const ReminderThumbnail = ({ reminders }) => {
const getThumbnailImage = (category) => {
if (!category) {
return dataImage1;
}
return localImgLoad(`images/${category}.png`);
};
return (
<div className="w-full h-full overflow-y-auto overflow-x-hidden pb-1">
{reminders.map((reminder, index) => (
<div key={index} className="flex space-x-2 items-center bg-slate-300 hover:bg-white mb-1 p-1 transition-all duration-500">
<div className="w-[30px] h-[30px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={(reminder.category == null || reminder.category == '')? dataImage1: localImgLoad(`images/${reminder.category}.png`)}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col justify-start items-start">
<h1 className="font-bold text-[10px] text-dark-gray dark:text-white whitespace-nowrap">
{reminder.description?.substring(0, 20)+ ' ...'}
</h1>
<span className="text-[8px] text-thin-light-gray">
Added <span className="text-purple">
{reminder.start_date.split(' ')[0]}
<div className="w-[30px] h-[30px] rounded-full overflow-hidden flex justify-center items-center">
<img
src={getThumbnailImage(reminder.category)}
alt="data"
className="w-full h-full"
/>
</div>
<div className="flex flex-col justify-start items-start">
<h1 className="font-bold text-[10px] text-dark-gray dark:text-white whitespace-nowrap">
{reminder.description?.substring(0, 20) + ' ...'}
</h1>
<span className="text-[8px] text-thin-light-gray">
Added <span className="text-purple">
{reminder.start_date.split(' ')[0]}
</span>
</span>
</span>
</div>
</div>
</div>
))}
</div>
)
}
);
};
src/components/Partials/MobileSideBar.jsx
+6 -17
View File
@@ -1,7 +1,6 @@
import React, { useContext } from "react";
import { NavLink } from "react-router-dom";
import logo from "../../assets/images/myfit-logo-2.png"; //logo-2.svg";
import logo3 from "../../assets/images/myfit-logo-2.png"; //logo-3.svg";
import { default as logo, default as logo3 } from "../../assets/images/myfit-logo-2.png"; //logo-2.svg";
import DarkModeContext from "../Contexts/DarkModeContext";
import Icons from "../Helpers/Icons";
@@ -102,7 +101,8 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
</span>
</NavLink>
</li>
<li className="item group">
{(process.env.REACT_APP_TRACKING_SHOW == true) ?
(<li className="item group">
<NavLink
to="/tracking"
className="nav-item flex items-center justify-start space-x-3.5"
@@ -114,7 +114,8 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
{process.env.REACT_APP_TRACKING}
</span>
</NavLink>
</li>
</li>)
: ''}
<li className="item group">
<NavLink
to="/calendar"
@@ -128,19 +129,7 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/resources"
className="nav-item flex items-center justify-start space-x-3.5"
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">
<Icons name="star" />
</span>
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
{process.env.REACT_APP_RESOURCES}
</span>
</NavLink>
</li>
{(process.env.REACT_APP_HISTORY_SHOW == true) ?
(<li className="item group">
<NavLink
src/components/Partials/Sidebar.jsx
+30 -24
View File
@@ -151,7 +151,8 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
</span>
</NavLink>
</li>
<li className="item group">
{(process.env.REACT_APP_TRACKING_SHOW == true) ?
(<li className="item group">
<NavLink
to="/tracking"
className={`nav-item flex items-center ${
@@ -170,7 +171,8 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
{process.env.REACT_APP_TRACKING}
</span>
</NavLink>
</li>
</li>)
: ''}
<li className="item group">
<NavLink
to="/calendar"
@@ -191,28 +193,33 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/resources"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
<Icons name="resources" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
{process.env.REACT_APP_RESOURCES_SHOW == true ?
<li className="item group">
<NavLink
to="/resources"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
}`}
>
{process.env.REACT_APP_RESOURCES}
</span>
</NavLink>
</li>
{(process.env.REACT_APP_HISTORY_SHOW == true) ?
(<li className="item group">
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full">
<Icons name="resources" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
{process.env.REACT_APP_RESOURCES}
</span>
</NavLink>
</li>
:
<></>
}
<li className="item group">
<NavLink
to="/history"
className={`nav-item flex items-center ${
@@ -231,8 +238,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
{process.env.REACT_APP_HISTORY}
</span>
</NavLink>
</li>)
: ''}
</li>
</ul>
</div>
</div>