Skip to content

Commit 8d58ff3

Browse files
timsun28timsun28
authored
Merge pull request #4 from timsun28/editGBInput
Onclick on gb to edit it directly
2 parents f3e5110 + 06fa261 commit 8d58ff3

File tree

7 files changed

+177
-83
lines changed

7 files changed

+177
-83
lines changed

‎components/SettingsButton.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default function SettingsButton() {
2+
return (
3+
<>
4+
<input type="checkbox" id="active" />
5+
<label htmlFor="active" className="menu-btn ">
6+
<span></span>
7+
</label>
8+
<label htmlFor="active" className="close"></label>
9+
</>
10+
);
11+
}

‎components/SettingsWrapper.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
interface SettingsWrapperProps {
2+
gbAvailable: number;
3+
updateAvailable: (method: string) => void;
4+
setGbAvailable: (gbAvailable: number) => void;
5+
startDate: number;
6+
setStartDate: (startDate: number) => void;
7+
}
8+
9+
export default function SettingsWrapper(props: SettingsWrapperProps) {
10+
function updateStartDate(event: React.ChangeEvent<HTMLInputElement>) {
11+
const updateDate = parseInt(event.target.value);
12+
if (updateDate < 1) {
13+
props.setStartDate(1);
14+
} else if (updateDate > 31) {
15+
props.setStartDate(31);
16+
} else {
17+
props.setStartDate(updateDate);
18+
}
19+
}
20+
return (
21+
<div className="wrapper">
22+
<div className="flex flex-col items-center justify-center h-full text-white bg-gray-900 gap-y-8">
23+
<div className="flex items-center justify-center gap-8 text-4xl ">
24+
<span>
25+
Data:
26+
<input
27+
type={"number"}
28+
value={props.gbAvailable}
29+
className="w-24 px-2 mx-2 bg-gray-900 border-2 border-white rounded-lg"
30+
onChange={(e) => props.setGbAvailable(parseInt(e.target.value, 10))}
31+
/>
32+
GB
33+
</span>
34+
{/* <div className="flex flex-col gap-4">
35+
<span className="cursor-pointer chevron top" onClick={() => props.updateAvailable("up")}></span>
36+
<span
37+
className="cursor-pointer chevron bottom"
38+
onClick={() => props.updateAvailable("down")}
39+
></span>
40+
</div> */}
41+
</div>
42+
{/* <span className="flex items-center justify-center text-4xl">
43+
Renewal day:
44+
<input
45+
type={"number"}
46+
value={props.startDate}
47+
className="w-24 px-2 mx-2 bg-gray-900 border-2 border-white rounded-lg"
48+
onChange={(e) => props.setStartDate(parseInt(e.target.value, 10))}
49+
/>
50+
</span> */}
51+
</div>
52+
</div>
53+
);
54+
}

‎functions/dateFuncs.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export function daysBetween(date1: Date, date2: Date): number {
2+
const oneDay = 24 * 60 * 60 * 1000;
3+
return Math.round(Math.abs((date1.getTime() - date2.getTime()) / oneDay));
4+
}

‎package-lock.json

+7-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pages/index.tsx

+88-75
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,96 @@
1-
import Head from 'next/head'
2-
import { useEffect, useState } from 'react';
1+
import Head from "next/head";
2+
import { useEffect, useState } from "react";
3+
import SettingsButton from "../components/SettingsButton";
4+
import SettingsWrapper from "../components/SettingsWrapper";
35

46
export default function Home() {
5-
const [gbAvailable, setGbAvailable] = useState(0)
6-
useEffect(() => {
7-
if (typeof window !== "undefined") {
8-
const available = window.localStorage.getItem('gbAvailable');
9-
if (available) {
10-
setGbAvailable(parseInt(available));
7+
const [gbAvailable, setGbAvailable] = useState(0);
8+
const [startDate, setStartDate] = useState(1);
9+
useEffect(() => {
10+
if (typeof window !== "undefined") {
11+
const available = window.localStorage.getItem("gbAvailable");
12+
if (available) {
13+
setGbAvailable(parseInt(available));
14+
} else {
15+
window.localStorage.setItem("gbAvailable", "40");
16+
setGbAvailable(40);
17+
}
18+
19+
const start = window.localStorage.getItem("startDate");
20+
if (start) {
21+
setStartDate(parseInt(start));
1122
} else {
12-
window.localStorage.setItem('gbAvailable', '40');
13-
setGbAvailable(40);
23+
window.localStorage.setItem("startDate", "1");
24+
setStartDate(1);
1425
}
15-
}
16-
}, [])
26+
}
27+
}, []);
28+
29+
30+
1731

18-
const getRemainingData = () => {
19-
const today = new Date()
20-
const currentDate = today.getDate();
21-
const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
22-
const mbAvailable = gbAvailable * 1000;
23-
const mbPerDay = mbAvailable / lastDayOfMonth;
24-
const mbLeft = Math.round(mbAvailable - mbPerDay * currentDate) || 0;
25-
function numberWithCommas(x: number) {
26-
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
27-
}
28-
return numberWithCommas(mbLeft)
29-
}
3032

31-
const getPerDayData = () => {
32-
const today = new Date()
33-
const mbAvailable = gbAvailable * 1000;
34-
const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
35-
const mbPerDay = mbAvailable / lastDayOfMonth;
36-
return Math.round(mbPerDay)
37-
}
33+
const getRemainingData = () => {
34+
const today = new Date();
35+
const currentDate = today.getDate();
36+
const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
37+
const mbAvailable = gbAvailable * 1000;
38+
const mbPerDay = mbAvailable / lastDayOfMonth;
39+
const mbLeft = Math.round(mbAvailable - mbPerDay * currentDate) || 0;
40+
function numberWithCommas(x: number) {
41+
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
42+
}
43+
return numberWithCommas(mbLeft);
44+
};
3845

39-
const updateAvailable = (method:string) => {
40-
if (method === 'up') {
41-
setGbAvailable(gbAvailable + 1);
42-
window.localStorage.setItem('gbAvailable', (gbAvailable + 1).toString());
43-
} else {
44-
if (gbAvailable === 0) {
45-
return;
46-
}
47-
setGbAvailable(gbAvailable - 1);
48-
window.localStorage.setItem('gbAvailable', (gbAvailable - 1).toString());
49-
}
50-
}
51-
return (
52-
<div className="flex flex-col items-center justify-center min-h-screen">
53-
<Head>
54-
<title>Data Usage</title>
55-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
56-
</Head>
57-
<input type="checkbox" id="active" />
58-
<label htmlFor="active" className="menu-btn "><span></span></label>
59-
<label htmlFor="active" className="close"></label>
60-
<div className="wrapper">
61-
<div className='flex h-full text-4xl items-center justify-center gap-8 text-white dark:bg-gray-900'>
62-
<div className='flex flex-col gap-4'>
63-
<span className="chevron top cursor-pointer" onClick={() => updateAvailable('up')}></span>
64-
<span className="chevron bottom cursor-pointer" onClick={() => updateAvailable('down')}></span>
65-
</div>
66-
<span>
67-
{gbAvailable} GB
68-
</span>
69-
</div>
70-
</div>
71-
<main className="flex flex-col items-center justify-center w-full flex-1 px-4 bg-white dark:bg-gray-900">
72-
<h1 className="text-6xl md:text-7xl font-bold flex flex-col dark:text-white">
73-
<div>
74-
You should have <span className='text-gradient first text-8xl'>{getRemainingData()}</span> MB left with
75-
</div>
76-
<div>
77-
<span className='text-gradient second text-8xl'>{getPerDayData()}</span> MB available per day
78-
</div>
79-
</h1>
80-
</main>
81-
</div>
82-
)
46+
const getPerDayData = () => {
47+
const today = new Date();
48+
const mbAvailable = gbAvailable * 1000;
49+
const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
50+
const mbPerDay = mbAvailable / lastDayOfMonth;
51+
return Math.round(mbPerDay);
52+
};
53+
54+
const updateAvailable = (method: string) => {
55+
if (method === "up") {
56+
setGbAvailable(gbAvailable + 1);
57+
window.localStorage.setItem("gbAvailable", (gbAvailable + 1).toString());
58+
} else {
59+
if (gbAvailable === 0) {
60+
return;
61+
}
62+
setGbAvailable(gbAvailable - 1);
63+
window.localStorage.setItem("gbAvailable", (gbAvailable - 1).toString());
64+
}
65+
};
66+
return (
67+
<div className="flex flex-col items-center justify-center min-h-screen">
68+
<Head>
69+
<title>Data Usage</title>
70+
<meta
71+
name="viewport"
72+
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
73+
/>
74+
</Head>
75+
<SettingsButton />
76+
<SettingsWrapper
77+
gbAvailable={gbAvailable}
78+
setGbAvailable={setGbAvailable}
79+
updateAvailable={updateAvailable}
80+
startDate={startDate}
81+
setStartDate={setStartDate}
82+
/>
83+
<main className="flex flex-col items-center justify-center w-full flex-1 px-4 bg-white dark:bg-gray-900">
84+
<h1 className="text-6xl md:text-7xl font-bold flex flex-col dark:text-white">
85+
<div>
86+
You should have <span className="text-gradient first text-8xl">{getRemainingData()}</span> MB
87+
left with
88+
</div>
89+
<div>
90+
<span className="text-gradient second text-8xl">{getPerDayData()}</span> MB available per day
91+
</div>
92+
</h1>
93+
</main>
94+
</div>
95+
);
8396
}

‎public/sw.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎styles/globals.css

+12
Original file line numberDiff line numberDiff line change
@@ -136,4 +136,16 @@
136136
.chevron.bottom:before {
137137
top: 0;
138138
transform: rotate(135deg);
139+
}
140+
141+
/* Chrome, Safari, Edge, Opera */
142+
input::-webkit-outer-spin-button,
143+
input::-webkit-inner-spin-button {
144+
-webkit-appearance: none;
145+
margin: 0;
146+
}
147+
148+
/* Firefox */
149+
input[type=number] {
150+
-moz-appearance: textfield;
139151
}

0 commit comments

Comments
 (0)