diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/public/footer.png | bin | 0 -> 5190 bytes | |||
| -rw-r--r-- | client/public/index.html | 6 | ||||
| -rw-r--r-- | client/src/App.css | 55 | ||||
| -rw-r--r-- | client/src/App.tsx | 30 | ||||
| -rw-r--r-- | client/src/components/ConnectWallet.tsx | 2 | ||||
| -rw-r--r-- | client/src/components/Records.tsx | 68 |
6 files changed, 125 insertions, 36 deletions
diff --git a/client/public/footer.png b/client/public/footer.png new file mode 100644 index 0000000..d82fadc --- /dev/null +++ b/client/public/footer.png Binary files differdiff --git a/client/public/index.html b/client/public/index.html index 0869997..c45409a 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -9,6 +9,12 @@ name="description" content="Web site created using create-react-app" /> + <style> + #footer { + background-image: url("./footer.png"); + } + + </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" diff --git a/client/src/App.css b/client/src/App.css index a73598f..f565e3b 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,3 +1,7 @@ +:root { + --red: #b60000; +} + html, body, #root { @@ -6,6 +10,7 @@ body, margin: 0px; padding: 0px; font-size: 1rem; + font-family: "OpenSans", sans-serif; } #root { @@ -24,14 +29,14 @@ body, } h1 { - color: #35636e; + color: var(--red); text-align: left; } header { font-size: 1.5rem; padding: 20px; - background-color: #35636e; + background-color: var(--red); color: white; } @@ -40,7 +45,7 @@ header { flex-direction: column; width: 96vw; max-width: 720px; - border: 1px solid #35636e; + border: 1px solid var(--red); border-radius: 3px; } @@ -52,8 +57,16 @@ header { #footer { display: flex; + height: 5em; + justify-content: flex-end; padding-top: 20px; + width: 384px; + right: 0; + position: fixed; + + max-width: 720px; + background-repeat: no-repeat; } .buttons { @@ -66,19 +79,19 @@ header { .button { margin-top: 0px; margin-bottom: 5px; - color: #35636e; + color: var(--red); font-size: 1rem; padding: 15px; background-color: white; border-radius: 3px; - border: solid 2px #35636e; + border: solid 2px var(--red); outline: none; cursor: pointer; transition: 0.2s; } .button:hover { color: white; - background-color: #35636e; + background-color: var(--red); } .button:active { margin-top: 5px; @@ -100,7 +113,7 @@ header { #public-token-copy:hover { border-radius: 3px; color: white; - background-color: #35636e; + background-color: var(--red); } .text-align-center { @@ -120,7 +133,7 @@ a:hover { flex-direction: row; justify-content: space-around; border: none; - color: #35636e; + color: var(--red); margin: 0px; transition: 0.3s; } @@ -129,7 +142,7 @@ a:hover { width: 80%; padding: 16px; margin: 0px 10px; - border: solid 1px #35636e; + border: solid 1px var(--red); border-bottom: none; text-align: center; border-top-left-radius: 3px; @@ -138,7 +151,7 @@ a:hover { } #tabs div.active { - background-color: #35636e; + background-color: var(--red); color: white; } @@ -154,7 +167,7 @@ a:hover { padding: 15px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; - border: solid 2px #35636e; + border: solid 2px var(--red); outline: none; font-size: 1rem; border-right: none; @@ -165,7 +178,7 @@ a:hover { #transfer-inputs input[type="number"] { padding: 15px; width: 60px; - border: solid 2px #35636e; + border: solid 2px var(--red); border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-left: none; @@ -189,3 +202,21 @@ input::-webkit-inner-spin-button { input[type="number"] { -moz-appearance: textfield; } + +.form-apna { + padding: 0.8em; +} + +.formFields { + padding: 0.2em; + margin: 0.2em; +} + +#form-name { + width: 50%; +} + +#form-ka-button { + padding-left: 78%; + margin-right: 0; +} \ No newline at end of file diff --git a/client/src/App.tsx b/client/src/App.tsx index 10a6568..7bd37ba 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -24,13 +24,13 @@ const App = () => { const [wallet, setWallet] = useState<any>(null); const [userAddress, setUserAddress] = useState<string>(""); const [userBalance, setUserBalance] = useState<number>(0); - const [storage, setStorage] = useState<any>({dates: []}); + const [storage, setStorage] = useState<any>({dates: [], records: [],}); const [copiedPublicToken, setCopiedPublicToken] = useState<boolean>(false); const [beaconConnection, setBeaconConnection] = useState<boolean>(false); const [activeTab, setActiveTab] = useState<string>("transfer"); // Granadanet Memoir contract - const contractAddress: string = "KT1T4idqQZpt1Ayn9SRNqCo7PsiBreT5YsMB"; + const contractAddress: string = "KT1PjaJZxYvE335fdD7GXLshPWdFAYan1ta3"; const generateQrCode = (): { __html: string } => { const qr = qrcode(0, "L"); @@ -45,7 +45,7 @@ const App = () => { <div className="main-box"> <h1>MyMedMemoir</h1> <div id="dialog"> - <header>Try the Taquito Boilerplate App!</header> + <header>Decentralized Medical Reports</header> <div id="content"> <p className="text-align-center"> <i className="fas fa-broadcast-tower"></i> Connecting to @@ -117,7 +117,7 @@ const App = () => { </div> <div id="dialog"> <div id="content"> - {activeTab === "transfer" && + {activeTab === "transfer" && <div id="transfers"> <h3 className="text-align-center">Make a transfer</h3> <Transfers @@ -153,7 +153,7 @@ const App = () => { /> </div> } - {activeTab === "contract" && + {activeTab === "contract" && <div id="increment-decrement"> <Records contract={contract} @@ -164,14 +164,20 @@ const App = () => { /> </div> } - {activeTab === "reports" && + {activeTab === "reports" && <div id="increment-decrement"> - <h3 className="text-align-center"> - {storage.dates.map((val: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined) => <div>{val}</div>)} - </h3> + {storage.dates.map((val: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined, idx: any) => + <div className="apneReports"> + <details> + <summary> + {JSON.parse(storage.records[idx]).date} + </summary> + {JSON.parse(storage.records[idx]).name} + </details> + </div>)} + </div> } - </div> </div> <div id="footer"> @@ -188,7 +194,7 @@ const App = () => { <header>Welcome to MyMedMemoir!</header> <div id="content"> <p>Hello!</p> - <p>Go forth and Tezos!</p> + <p>Go forth and M³!</p> </div> <ConnectButton Tezos={Tezos} @@ -204,6 +210,8 @@ const App = () => { /> </div> <div id="footer"> + <h1> hi</h1> + <img src="./footer.png"/> </div> </div> ); diff --git a/client/src/components/ConnectWallet.tsx b/client/src/components/ConnectWallet.tsx index 3a293c0..2593809 100644 --- a/client/src/components/ConnectWallet.tsx +++ b/client/src/components/ConnectWallet.tsx @@ -86,7 +86,7 @@ const ConnectButton = ({ (async () => { // creates a wallet instance const wallet = new BeaconWallet({ - name: "Taquito Boilerplate", + name: "MyMedMemoir", preferredNetwork: NetworkType.GRANADANET, disableDefaultEvents: true, // Disable all events / UI. This also disables the pairing alert. eventHandlers: { diff --git a/client/src/components/Records.tsx b/client/src/components/Records.tsx index eec867d..130e985 100644 --- a/client/src/components/Records.tsx +++ b/client/src/components/Records.tsx @@ -13,10 +13,28 @@ const Records = ({ contract, setUserBalance, Tezos, userAddress, setStorage }: R const [loadingIncrement, setLoadingIncrement] = useState<boolean>(false); const [loadingDecrement, setLoadingDecrement] = useState<boolean>(false); + const [formKaName, setName] = useState(''); + const [formKaDate, setDate] = useState(''); + const [formKaHeight, setHeight] = useState(''); + const [formKaWeight, setWeight] = useState(''); + const [formKaAge, setAge] = useState(''); + const [formKaHospital, setHospital] = useState(''); + const [formKaPrescription, setPrescription] = useState(''); + const addRecord = async (): Promise<void> => { setLoadingIncrement(true); try { - const op = await contract.methods.default("tesds").send(); + const apnaForm = { + name: formKaName, + date: formKaDate, + age: formKaAge, + height: formKaHeight, + weight: formKaWeight, + hospital: formKaHospital, + prescription: formKaPrescription, + }; + console.log(JSON.stringify(apnaForm)); + const op = await contract.methods.default(JSON.stringify(apnaForm)).send(); await op.confirmation(); const newStorage: any = await contract.storage(); if (newStorage) setStorage(newStorage); @@ -30,18 +48,44 @@ const Records = ({ contract, setUserBalance, Tezos, userAddress, setStorage }: R if (!contract && !userAddress) return <div> </div>; return ( - <div className="buttons"> - <button className="button" disabled={loadingIncrement} onClick={addRecord}> - {loadingIncrement ? ( - <span> - <i className="fas fa-spinner fa-spin"></i> Please wait - </span> - ) : ( - <span> - <i className="fas fa-plus"></i> Add Record + <div> + <form action="" method="get" className="form-apna"> + <label className="labelIska">Doctor: </label> + <input type="text" className="formFields" id="form-name" + onChange={event => setName(event.target.value)} required/> + <br/> + <label className="labelIska">Date: </label> + <input type="date" className="formFields" id="form-date" + onChange={event => setDate(event.target.value)} required/><br/> + <label className="labelIska">Age: </label> + <input type="number" className="formFields" id="form-age" + onChange={event => setAge(event.target.value)} required/><br/> + <label className="labelIska">Height: </label> + <input type="number" className="formFields" id="form-height" + onChange={event => setHeight(event.target.value)} required/><br/> + <label className="labelIska">Weight: </label> + <input type="number" className="formFields" id="form-date" + onChange={event => setWeight(event.target.value)} required/><br/> + <label className="labelIska">Hospital: </label> + <input type="text" className="formFields" id="form-hospital" + onChange={event => setHospital(event.target.value)} required/><br/> + <label className="labelIska">Presciption: </label> + <input type="textbox" className="formFields" id="form-prescription" + onChange={event => setPrescription(event.target.value)}/><br/> + <span id="form-ka-button"> + <button type="submit" className="button" disabled={loadingIncrement} onClick={addRecord}> + {loadingIncrement ? ( + <span> + <i className="fas fa-spinner fa-spin"></i> Please wait + </span> + ) : ( + <span> + <i className="fas fa-plus"></i> Add Record + </span> + )} + </button> </span> - )} - </button> + </form> </div> ); }; |
