From e7c504a71156d893d46c8c8bb076211bab9b84d9 Mon Sep 17 00:00:00 2001 From: Andinus Date: Sun, 26 Sep 2021 16:12:09 +0530 Subject: Update client, add foooter --- client/src/App.css | 55 ++++++++++++++++++++------ client/src/App.tsx | 30 +++++++++------ client/src/components/ConnectWallet.tsx | 2 +- client/src/components/Records.tsx | 68 +++++++++++++++++++++++++++------ 4 files changed, 119 insertions(+), 36 deletions(-) (limited to 'client/src') 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(null); const [userAddress, setUserAddress] = useState(""); const [userBalance, setUserBalance] = useState(0); - const [storage, setStorage] = useState({dates: []}); + const [storage, setStorage] = useState({dates: [], records: [],}); const [copiedPublicToken, setCopiedPublicToken] = useState(false); const [beaconConnection, setBeaconConnection] = useState(false); const [activeTab, setActiveTab] = useState("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 = () => {

MyMedMemoir

-
Try the Taquito Boilerplate App!
+
Decentralized Medical Reports

  Connecting to @@ -117,7 +117,7 @@ const App = () => {

- {activeTab === "transfer" && + {activeTab === "transfer" &&

Make a transfer

{ />
} - {activeTab === "contract" && + {activeTab === "contract" &&
{ />
} - {activeTab === "reports" && + {activeTab === "reports" &&
-

- {storage.dates.map((val: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined) =>
{val}
)} -

+ {storage.dates.map((val: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined, idx: any) => +
+
+ + {JSON.parse(storage.records[idx]).date} + + {JSON.parse(storage.records[idx]).name} +
+
)} +
} -
); 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(false); const [loadingDecrement, setLoadingDecrement] = useState(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 => { 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
 
; return ( -
- - )} - +
); }; -- cgit 1.4.1-2-gfad0