Skip to content

Commit

Permalink
added 12/24h option
Browse files Browse the repository at this point in the history
  • Loading branch information
@abdelrahmanrageh
abdelrahmanrageh committed May 26, 2024
1 parent d78e613 commit 70a4597
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 54 deletions.
48 changes: 35 additions & 13 deletions src/components/Home.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,49 @@
// import React from 'react'
import { useState } from 'react'
import { useEffect, useState } from 'react'
// import './App.css'
import { egyptGovernorates } from '../governments';
import NightDetails from './PrayerTimes';

export default function Home() {
const [city, setCity] = useState<string | null>('cairo');
const [city, setCity] = useState<string>( window.localStorage.getItem('city') || 'cairo' );
const [twelveHour, setTwelveHour] = useState<boolean>(JSON.parse(window.localStorage.getItem('twelveHour') || 'true'));
useEffect(() => {

})
return (

<div className="App">
<div className="container h-svh">
<select
onChange={(e) => setCity(e.target.value)}
id="underline_select"
className="block cursor-pointer py-3 px-0 sm:text-5xl text-3xl text-navy bg-transparent border-b-2 border-gray-300 border-transparent hover:border-b-gray-500 transition-all border-b-gray-300 outline-none ">
{
egyptGovernorates.map(city => {
return <option className='text-lg' key={city.url} value={city.url}>{city.name}</option>
})
}
</select>
<div className='w-full flex justify-between items-center'>
<select
onChange={
(e) => {
setCity(e.target.value)
window.localStorage.setItem('city', e.target.value)
}}
value={city}
id="underline_select"
className="block cursor-pointer py-3 px-0 sm:text-5xl text-3xl text-navy bg-transparent border-b-2 border-gray-300 border-transparent hover:border-b-gray-500 transition-all border-b-gray-300 outline-none ">
{
egyptGovernorates.map(city => {
return <option className='text-lg' key={city.url} value={city.url}>{city.name}</option>
})
}
</select>

{/* changing 12 hour mode */}
<button
onClick={() => {
setTwelveHour(!twelveHour);
window.localStorage.setItem('twelveHour', JSON.stringify(!twelveHour));
}}
className='border-2 border-navy text-navy px-4 h-10 rounded-lg hover:bg-navy hover:text-gold transition-all'
>
{twelveHour ? '24h' : '12h'}
</button>
</div>

<NightDetails city={city} data={null} />
<NightDetails city={city} data={null} twelveHour={twelveHour } />

</div>

Expand Down
40 changes: 20 additions & 20 deletions src/components/ManualCalc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,24 @@ export default function ManualCalc() {

<h2 className='text-3xl mt-10'>أدخل مواعيد الصلوات</h2>
<form dir='ltr' className="max-w-[20rem] mx-auto grid grid-cols-2 gap-4 mt-3">
<div>
{/* fajr Time input */}
<label htmlFor="end-time" className="block mb-2 text-lg font-medium w-36 text-navy">موعد صلاة الفجر</label>
<div className="relative">
<div className="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
<svg className="w-4 h-4 text-gray-400 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path fillRule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clipRule="evenodd"/>
</svg>
</div>
<input type="time" id="end-time" className=" border leading-none text-gray-900 text-sm rounded-lg block w-full p-2.5 bg-navy border-gray-600 placeholder-gray-400 dark:text-white "
min="01:00"
max="07:00"
// value={fajrTime || '06:00'}
required
onChange={(e) => setFajrTime(e.target.value)}
/>
</div>
</div>
<div>
{/* maghrip Time input */}
<label htmlFor="start-time" className="block mb-2 text-lg font-medium w-36 text-navy">موعد صلاة المغرب</label>
Expand All @@ -58,29 +76,11 @@ export default function ManualCalc() {
/>
</div>
</div>
<div>
{/* fajr Time input */}
<label htmlFor="end-time" className="block mb-2 text-lg font-medium w-36 text-navy">موعد صلاة الفجر</label>
<div className="relative">
<div className="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
<svg className="w-4 h-4 text-gray-400 " aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
<path fillRule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clipRule="evenodd"/>
</svg>
</div>
<input type="time" id="end-time" className=" border leading-none text-gray-900 text-sm rounded-lg block w-full p-2.5 bg-navy border-gray-600 placeholder-gray-400 dark:text-white "
min="01:00"
max="07:00"
// value={fajrTime || '06:00'}
required
onChange={(e) => setFajrTime(e.target.value)}
/>
</div>
</div>

</form>
{
(fajrTime && maghripTime) &&
<NightDetails city={null} data={data } />

<NightDetails city={null} data={data} twelveHour={true} />
}
</div>
</>
Expand Down
6 changes: 3 additions & 3 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function Navbar() {

return (
<nav>
<div className=" sm:px-8 px-3 py-5 flex justify-between items-center bg-navy text-gold">
<div className=" sm:px-8 px-3 py-5 flex justify-between items-center bg-navy text-gold z-5">
<div className="flex">
<Link to={'/'}>
<img src={logoPng} alt="logo" className="inline ml-4 h-8 sm:h-10"/>
Expand All @@ -15,8 +15,8 @@ export default function Navbar() {
</div>
<div>
{(location.pathname === '/manual-calculation')
? <Link to={'/'} className="h-8 sm:h-10 py-2 px-4 rounded-lg bg-gold text-navy text-xs sm:text-lg">الرئيسية</Link>
: <Link to={'/manual-calculation'} className="h-8 sm:h-10 py-2 px-4 rounded-lg bg-gold text-navy text-xs sm:text-lg">الحساب يدويََا</Link>
? <Link to={'/'} className="h-8 sm:h-10 py-2 px-4 rounded-lg bg-gold text-navy text-xs sm:text-lg hover:bg-orange-50 transition-all">الرئيسية</Link>
: <Link to={'/manual-calculation'} className="h-8 sm:h-10 py-2 px-4 rounded-lg bg-gold text-navy text-xs sm:text-lg hover:bg-orange-50 transition-all">الحساب يدويََا</Link>
}
</div>
</div>
Expand Down
53 changes: 36 additions & 17 deletions src/components/PrayerTimes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,23 +59,31 @@ type Data = {
date: string | null,
nightDuration: number | null
}
export default function NightDetails({ city , data }: { city: (string | null) , data: (Data | null)}) {
export default function NightDetails({ city , data , twelveHour}: { city: (string | null) , data: (Data | null), twelveHour: boolean} ) {
const [fajrTime, setFajrTime] = useState<string | null>(null);
const [maghripTime, setMaghripTime] = useState<string | null>(null);
const [lastThirdNight, setLastThirdNight] = useState<string | null>(null);
const [date] = useState<string | null>(null);
const [date , setDate ] = useState<Date >(new Date());
const [weekDay, setWeekDay] = useState<string | null>(null);
const [day, setDay] = useState<string | null>(null);
const [month, setMonth] = useState<string | null>(null);
const [year, setYear] = useState<string | null>(null);
const [nightDuration, setNightDuration] = useState<number | null>(null);
const minsDuration: (number | null) = nightDuration ? (nightDuration - Math.floor(nightDuration)) * 60 : null;
const [fajrDate, setFajrDate] = useState<string | null>(null);
const [maghripDate, setMaghripDate] = useState<string | null>(null);


useEffect(() => {
setDate(new Date());
}, [])

//getting the prayer times from the api
useEffect(() => {
const apiDate = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
if (city) {
const getPrayerTimes = async (): Promise<PrayerTimes> => {
const url = `https://api.aladhan.com/v1/timingsByCity/${date}?city=${city}&country=EG&method=5`;
const url = `https://api.aladhan.com/v1/timingsByCity/${apiDate}?city=${city}&country=EG&method=5`;
const res = await fetch(url);
const data = await res.json();
return data;
Expand All @@ -99,19 +107,28 @@ export default function NightDetails({ city , data }: { city: (string | null) ,

//calculating the last third of the night
useEffect(() => {
const date = new Date();
const now: Date = date;

if (fajrTime && maghripTime) {
const a = date.setHours(parseInt(fajrTime.slice(0, 2)), parseInt(fajrTime.slice(3, 5)), 0, 0);
const b = date.setHours(parseInt(maghripTime.slice(0, 2)), parseInt(maghripTime.slice(3, 5)), 0, 0);
//fajr time
const a = now.setHours(parseInt(fajrTime.slice(0, 2)), parseInt(fajrTime.slice(3, 5)), 0, 0);
setFajrDate(new Date(a).toLocaleTimeString(undefined, { hour12: twelveHour, hour: 'numeric', minute: '2-digit' }));

//maghrip time
const b = now.setHours(parseInt(maghripTime.slice(0, 2)), parseInt(maghripTime.slice(3, 5)), 0, 0);
setMaghripDate(new Date(b).toLocaleTimeString(undefined, { hour12: twelveHour, hour: 'numeric', minute: '2-digit' }));

//calculating the difference between fajr and maghrip
const diff = Math.abs(a - b);
const hourDiff = 24 - (diff / (1000 * 60 * 60));
setNightDuration(hourDiff);
setLastThirdNight(new Date(a - ((hourDiff / 3) * 1000 * 60 * 60)).toLocaleTimeString());
setLastThirdNight(new Date(a - ((hourDiff / 3) * 1000 * 60 * 60)).toLocaleTimeString(undefined, { hour12: twelveHour, hour: '2-digit', minute: '2-digit', second: '2-digit' }));
}

}, [fajrTime, maghripTime])
}, [fajrTime, maghripTime, date , twelveHour])
return (
<>

<h2 className='sm:text-2xl mt-2 font-normal m-auto text-right w-full text-navy'>{weekDay } {day} {month} {year}</h2>
<h1 className="mb-1 mt-20 text-5xl font-extrabold leading-none tracking-tight text-navy md:text-5xl lg:text-6xl ">
الثلث الأخير من الليل:
Expand All @@ -120,23 +137,25 @@ export default function NightDetails({ city , data }: { city: (string | null) ,
{lastThirdNight}
</h1>

<h1 className='text-3xl mt-20 mb-5 text-navy'></h1>
<h2 className='text-2xl sm:inline mx-5 font-normal text-navy'>صلاة الفجر: {fajrTime}</h2>
<h2 className='text-2xl sm:inline mx-5 font-normal text-navy'>صلاة المغرب: {maghripTime}</h2>
<h2 className='text-2xl w-full sm:inline mx-auto sm:mx-5 font-normal text-navy'>
طول الليلة: {
nightDuration && Math.floor(nightDuration)
+
<h2 className='text-2xl lg:inline-block lg:mx-5 font-normal mt-14 text-navy '>صلاة الفجر: <span dir="ltr" className=""> {fajrDate}</span></h2>
<h2 className='text-2xl lg:inline lg:mx-5 font-normal text-navy '>صلاة المغرب: <span dir="ltr"> {maghripDate}</span></h2>
<h2 className='text-2xl w-full lg:inline mx-auto lg:mx-5 font-normal text-navy'>
طول الليلة:
<span>
{
nightDuration && ' ' + Math.floor(nightDuration)
+
(
(nightDuration && nightDuration >= 11) ?
`ساعة `
: `ساعات `
` ساعة `
: ` ساعات `
)
}
{(minsDuration && minsDuration > 0) ?
`و ` + Math.floor(minsDuration) + ` دقيقة`
: null
}
</span>

</h2>
</>
Expand Down
2 changes: 1 addition & 1 deletion src/governments.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export const egyptGovernorates = [
{ "name": "القاهرة", "url": "cairo" },
{ "name": "الإسماعيلية", "url": "ismailia" },
{ "name": "الجيزة", "url": "giza" },
{ "name": "الأسكندرية", "url": "alexandria" },
{ "name": "الإسكندرية", "url": "alexandria" },
{ "name": "الدقهلية", "url": "dakahlia" },
{ "name": "البحيرة", "url": "beheira" },
{ "name": "الفيوم", "url": "fayoum" },
Expand Down

0 comments on commit 70a4597

Please sign in to comment.