Update client, add foooter

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>&nbsp; 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>&nbsp;</div>;
   return (
-    <div className="buttons">
-      <button className="button" disabled={loadingIncrement} onClick={addRecord}>
-        {loadingIncrement ? (
-          <span>
-            <i className="fas fa-spinner fa-spin"></i>&nbsp; Please wait
-          </span>
-        ) : (
-          <span>
-            <i className="fas fa-plus"></i>&nbsp; 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>&nbsp; Please wait
+              </span>
+            ) : (
+              <span>
+                <i className="fas fa-plus"></i>&nbsp; Add Record
+              </span>
+            )}   
+          </button>
           </span>
-        )}
-      </button>
+      </form>
     </div>
   );
 };