Skip to content

Commit

Permalink
Merge pull request #4 from timsun28/editGBInput
Browse files Browse the repository at this point in the history 
Onclick on gb to edit it directly
  • Loading branch information
@timsun28
timsun28 authored Jun 21, 2022
2 parents f3e5110 + 06fa261 commit 8d58ff3
Show file tree
Hide file tree
Showing 7 changed files with 177 additions and 83 deletions.
11 changes: 11 additions & 0 deletions components/SettingsButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export default function SettingsButton() {
return (
<>
<input type="checkbox" id="active" />
<label htmlFor="active" className="menu-btn ">
<span></span>
</label>
<label htmlFor="active" className="close"></label>
</>
);
}
54 changes: 54 additions & 0 deletions components/SettingsWrapper.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
interface SettingsWrapperProps {
gbAvailable: number;
updateAvailable: (method: string) => void;
setGbAvailable: (gbAvailable: number) => void;
startDate: number;
setStartDate: (startDate: number) => void;
}

export default function SettingsWrapper(props: SettingsWrapperProps) {
function updateStartDate(event: React.ChangeEvent<HTMLInputElement>) {
const updateDate = parseInt(event.target.value);
if (updateDate < 1) {
props.setStartDate(1);
} else if (updateDate > 31) {
props.setStartDate(31);
} else {
props.setStartDate(updateDate);
}
}
return (
<div className="wrapper">
<div className="flex flex-col items-center justify-center h-full text-white bg-gray-900 gap-y-8">
<div className="flex items-center justify-center gap-8 text-4xl ">
<span>
Data:
<input
type={"number"}
value={props.gbAvailable}
className="w-24 px-2 mx-2 bg-gray-900 border-2 border-white rounded-lg"
onChange={(e) => props.setGbAvailable(parseInt(e.target.value, 10))}
/>
GB
</span>
{/* <div className="flex flex-col gap-4">
<span className="cursor-pointer chevron top" onClick={() => props.updateAvailable("up")}></span>
<span
className="cursor-pointer chevron bottom"
onClick={() => props.updateAvailable("down")}
></span>
</div> */}
</div>
{/* <span className="flex items-center justify-center text-4xl">
Renewal day:
<input
type={"number"}
value={props.startDate}
className="w-24 px-2 mx-2 bg-gray-900 border-2 border-white rounded-lg"
onChange={(e) => props.setStartDate(parseInt(e.target.value, 10))}
/>
</span> */}
</div>
</div>
);
}
4 changes: 4 additions & 0 deletions functions/dateFuncs.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export function daysBetween(date1: Date, date2: Date): number {
const oneDay = 24 * 60 * 60 * 1000;
return Math.round(Math.abs((date1.getTime() - date2.getTime()) / oneDay));
}
14 changes: 7 additions & 7 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

163 changes: 88 additions & 75 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,96 @@
import Head from 'next/head'
import { useEffect, useState } from 'react';
import Head from "next/head";
import { useEffect, useState } from "react";
import SettingsButton from "../components/SettingsButton";
import SettingsWrapper from "../components/SettingsWrapper";

export default function Home() {
const [gbAvailable, setGbAvailable] = useState(0)
useEffect(() => {
if (typeof window !== "undefined") {
const available = window.localStorage.getItem('gbAvailable');
if (available) {
setGbAvailable(parseInt(available));
const [gbAvailable, setGbAvailable] = useState(0);
const [startDate, setStartDate] = useState(1);
useEffect(() => {
if (typeof window !== "undefined") {
const available = window.localStorage.getItem("gbAvailable");
if (available) {
setGbAvailable(parseInt(available));
} else {
window.localStorage.setItem("gbAvailable", "40");
setGbAvailable(40);
}

const start = window.localStorage.getItem("startDate");
if (start) {
setStartDate(parseInt(start));
} else {
window.localStorage.setItem('gbAvailable', '40');
setGbAvailable(40);
window.localStorage.setItem("startDate", "1");
setStartDate(1);
}
}
}, [])
}
}, []);




const getRemainingData = () => {
const today = new Date()
const currentDate = today.getDate();
const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
const mbAvailable = gbAvailable * 1000;
const mbPerDay = mbAvailable / lastDayOfMonth;
const mbLeft = Math.round(mbAvailable - mbPerDay * currentDate) || 0;
function numberWithCommas(x: number) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
return numberWithCommas(mbLeft)
}

const getPerDayData = () => {
const today = new Date()
const mbAvailable = gbAvailable * 1000;
const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
const mbPerDay = mbAvailable / lastDayOfMonth;
return Math.round(mbPerDay)
}
const getRemainingData = () => {
const today = new Date();
const currentDate = today.getDate();
const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
const mbAvailable = gbAvailable * 1000;
const mbPerDay = mbAvailable / lastDayOfMonth;
const mbLeft = Math.round(mbAvailable - mbPerDay * currentDate) || 0;
function numberWithCommas(x: number) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
return numberWithCommas(mbLeft);
};

const updateAvailable = (method:string) => {
if (method === 'up') {
setGbAvailable(gbAvailable + 1);
window.localStorage.setItem('gbAvailable', (gbAvailable + 1).toString());
} else {
if (gbAvailable === 0) {
return;
}
setGbAvailable(gbAvailable - 1);
window.localStorage.setItem('gbAvailable', (gbAvailable - 1).toString());
}
}
return (
<div className="flex flex-col items-center justify-center min-h-screen">
<Head>
<title>Data Usage</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</Head>
<input type="checkbox" id="active" />
<label htmlFor="active" className="menu-btn "><span></span></label>
<label htmlFor="active" className="close"></label>
<div className="wrapper">
<div className='flex h-full text-4xl items-center justify-center gap-8 text-white dark:bg-gray-900'>
<div className='flex flex-col gap-4'>
<span className="chevron top cursor-pointer" onClick={() => updateAvailable('up')}></span>
<span className="chevron bottom cursor-pointer" onClick={() => updateAvailable('down')}></span>
</div>
<span>
{gbAvailable} GB
</span>
</div>
</div>
<main className="flex flex-col items-center justify-center w-full flex-1 px-4 bg-white dark:bg-gray-900">
<h1 className="text-6xl md:text-7xl font-bold flex flex-col dark:text-white">
<div>
You should have <span className='text-gradient first text-8xl'>{getRemainingData()}</span> MB left with
</div>
<div>
<span className='text-gradient second text-8xl'>{getPerDayData()}</span> MB available per day
</div>
</h1>
</main>
</div>
)
const getPerDayData = () => {
const today = new Date();
const mbAvailable = gbAvailable * 1000;
const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0).getDate();
const mbPerDay = mbAvailable / lastDayOfMonth;
return Math.round(mbPerDay);
};

const updateAvailable = (method: string) => {
if (method === "up") {
setGbAvailable(gbAvailable + 1);
window.localStorage.setItem("gbAvailable", (gbAvailable + 1).toString());
} else {
if (gbAvailable === 0) {
return;
}
setGbAvailable(gbAvailable - 1);
window.localStorage.setItem("gbAvailable", (gbAvailable - 1).toString());
}
};
return (
<div className="flex flex-col items-center justify-center min-h-screen">
<Head>
<title>Data Usage</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
</Head>
<SettingsButton />
<SettingsWrapper
gbAvailable={gbAvailable}
setGbAvailable={setGbAvailable}
updateAvailable={updateAvailable}
startDate={startDate}
setStartDate={setStartDate}
/>
<main className="flex flex-col items-center justify-center w-full flex-1 px-4 bg-white dark:bg-gray-900">
<h1 className="text-6xl md:text-7xl font-bold flex flex-col dark:text-white">
<div>
You should have <span className="text-gradient first text-8xl">{getRemainingData()}</span> MB
left with
</div>
<div>
<span className="text-gradient second text-8xl">{getPerDayData()}</span> MB available per day
</div>
</h1>
</main>
</div>
);
}
2 changes: 1 addition & 1 deletion public/sw.js.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 12 additions & 0 deletions styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,4 +136,16 @@
.chevron.bottom:before {
top: 0;
transform: rotate(135deg);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

1 comment on commit 8d58ff3

@vercel
Copy link

@vercel vercel bot commented on 8d58ff3 Jun 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

data-usage-v2 – ./

data-usage-v2.vercel.app
data-usage-v2-timsun28.vercel.app
data-usage-v2-git-main-timsun28.vercel.app

Please sign in to comment.