student registration

e90edc3c · Nilan Meegoda · a4bc055f · e90edc3c · e90edc3c · e90edc3c
Commit e90edc3c authored Oct 09, 2022 by Nilan Meegoda
5 changed files
--- a/web-app/backend/server.py
+++ b/web-app/backend/server.py
@@ -29,7 +29,8 @@ x = datetime.datetime.now()

 # Initializing flask app
 app = Flask(__name__)
-
+cors = CORS(app)
+app.config['CORS_HEADERS'] = 'Content-Type'
 app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

 # for prediction
@@ -58,16 +59,16 @@ def registerCandidate():
    return response


-@app.route('/users', methods=['POST', 'GET'])
+@app.route('/users/', methods=['POST', 'GET'])
+@cross_origin()
 def data():
-
+    print("Request type:" + request.method)
    # POST a data to database
    if request.method == 'POST':
        body = request.json
        firstName = body['firstName']
        lastName = body['lastName']
        nationality = body['nationality']
-        guardian = body['guardian']
        school = body['school']
        age = body['age']
        residence = body['residence']
@@ -77,7 +78,6 @@ def data():
            "firstName": firstName,
            "lastName": lastName,
            "nationality": nationality,
-            "guardian": guardian,
            "school": school,
            "age": age,
            "residence": residence,
@@ -96,7 +96,6 @@ def data():
            firstName = data['firstName']
            lastName = data['lastName']
            nationality = data['nationality']
-            guardian = data['guardian']
            school = data['school']
            age = data['age']
            residence = data['residence']
@@ -106,7 +105,6 @@ def data():
            'firstName': firstName,
            'lastName': lastName,
            'nationality': nationality,
-            'guardian': guardian,
            'school': school,
            'age': age,
            'residence': residence,
@@ -127,7 +125,6 @@ def onedata(id):
        firstName = data['firstName']
        lastName = data['lastName']
        nationality = data['nationality']
-        guardian = data['guardian']
        school = data['school']
        age = data['age']
        residence = data['residence']
@@ -137,7 +134,6 @@ def onedata(id):
            'firstName': firstName,
            'lastName': lastName,
            'nationality': nationality,
-            'guardian': guardian,
            'school': school,
            'age': age,
            'residence': residence,
@@ -158,7 +154,6 @@ def onedata(id):
        firstName = body['firstName']
        lastName = body['lastName']
        nationality = body['nationality']
-        guardian = body['guardian']
        school = body['school']
        age = body['age']
        residence = body['residence']
@@ -171,7 +166,6 @@ def onedata(id):
                    "firstName": firstName,
                    "lastName": lastName,
                    "nationality": nationality,
-                    "guardian": guardian,
                    "school": school,
                    "age": age,
                    "residence": residence,
@@ -192,5 +186,5 @@ def test():
 if __name__ == "__main__":
    app.secret_key = os.urandom(24)
    app.run(debug=True, use_reloader=False)
-
+    
 flask_cors.CORS(app, expose_headers='Authorization')
--- a/web-app/frontend/package-lock.json
+++ b/web-app/frontend/package-lock.json
@@ -26,7 +26,9 @@
        "react-circular-progressbar": "^2.0.4",
        "react-countdown-circle-timer": "^3.0.9",
        "react-dom": "^18.2.0",
+        "react-hot-toast": "^2.4.0",
        "react-image-crop": "^10.0.7",
+        "react-record-webcam": "^0.0.14",
        "react-router-dom": "^6.3.0",
        "react-scripts": "5.0.1",
        "react-signature-canvas": "^1.0.6",
@@ -9037,6 +9039,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/goober": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.11.tgz",
+      "integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
    "node_modules/graceful-fs": {
      "version": "4.2.10",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -14679,6 +14689,21 @@
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
    },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.0.tgz",
+      "integrity": "sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
    "node_modules/react-image-crop": {
      "version": "10.0.7",
      "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.0.7.tgz",
@@ -14695,6 +14720,18 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "node_modules/react-record-webcam": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/react-record-webcam/-/react-record-webcam-0.0.14.tgz",
+      "integrity": "sha512-SUowthW0Ig3KV9qowaTcC9gmq+paALY72Xp8KG2RMJ2igQ4Cblyvt6C2U2AL8J8Sbjlmj8mG7RcKSzZ1EhFAMA==",
+      "dependencies": {
+        "recordrtc": "5.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.3",
+        "react-dom": "^16.3"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -23946,6 +23983,12 @@
        "slash": "^3.0.0"
      }
    },
+    "goober": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.11.tgz",
+      "integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==",
+      "requires": {}
+    },
    "graceful-fs": {
      "version": "4.2.10",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -27850,6 +27893,14 @@
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
    },
+    "react-hot-toast": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.0.tgz",
+      "integrity": "sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==",
+      "requires": {
+        "goober": "^2.1.10"
+      }
+    },
    "react-image-crop": {
      "version": "10.0.7",
      "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.0.7.tgz",
@@ -27863,6 +27914,14 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
    },
+    "react-record-webcam": {
+      "version": "0.0.14",
+      "resolved": "https://registry.npmjs.org/react-record-webcam/-/react-record-webcam-0.0.14.tgz",
+      "integrity": "sha512-SUowthW0Ig3KV9qowaTcC9gmq+paALY72Xp8KG2RMJ2igQ4Cblyvt6C2U2AL8J8Sbjlmj8mG7RcKSzZ1EhFAMA==",
+      "requires": {
+        "recordrtc": "5.6.2"
+      }
+    },
    "react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
--- a/web-app/frontend/package.json
+++ b/web-app/frontend/package.json
@@ -21,8 +21,9 @@
    "react-circular-progressbar": "^2.0.4",
    "react-countdown-circle-timer": "^3.0.9",
    "react-dom": "^18.2.0",
-    "react-record-webcam": "^0.0.14",
+    "react-hot-toast": "^2.4.0",
    "react-image-crop": "^10.0.7",
+    "react-record-webcam": "^0.0.14",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-signature-canvas": "^1.0.6",

--- a/web-app/frontend/src/config/api.js
+++ b/web-app/frontend/src/config/api.js
+import axios from 'axios';
+
+export default axios.create({
+  baseURL: `http://127.0.0.1:5000/`
+});
\ No newline at end of file
--- a/web-app/frontend/src/pages/student/student_reg.jsx
+++ b/web-app/frontend/src/pages/student/student_reg.jsx
-import React from "react";
+import React, { useState } from "react";
+import axios from "axios";
+import toast, { Toaster } from "react-hot-toast";
 import "./student_reg.css";
-import { useNavigate } from "react-router-dom";
+// import { useNavigate } from "react-router-dom";
+import API from "../../config/api";

 const StdReg_screen = () => {
-  const navigate = useNavigate();
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [nationality, setNationality] = useState("");
+  const [school, setSchool] = useState("");
+  const [age, setAge] = useState("");
+  const [residence, setResidence] = useState("");
+  const [disorders, setDisorders] = useState("");
+
+  let handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const payload = {
+        firstName: firstName,
+        lastName: lastName,
+        nationality: nationality,
+        school: school,
+        age: age,
+        residence: residence,
+        disorders: disorders,
+      };
+      await API.post("users/", JSON.stringify(payload), {
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          "Content-Type": "application/json",
+        },
+      })
+        .then((res) => {
+          console.log(res);
+          console.log(res.data);
+          if (res.status === 200) {
+            setFirstName("");
+            setLastName("");
+            setNationality("");
+            setSchool("");
+            setAge("");
+            setResidence("");
+            setDisorders("");
+            toast.success("Candidate has been added successfully");
+          } else {
+            toast.error("Some error occured");
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+          toast.error("Some error occured");
+        });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  // const navigate = useNavigate();
  return (
    <>
+      <div>
+        <Toaster />
+      </div>
      <div className="stdReg_screen-page-angry-grid px-12">
        <div className="relative bg-white mt-6 rounded-md py-5 px-5">
          <div className="mt-10 sm:mt-0">
@@ -23,7 +80,7 @@ const StdReg_screen = () => {
                </div>
              </div>
              <div className="mt-5 md:mt-0 md:col-span-2">
-                <form action="#" methot="POST" enctype="multipart/form-date">
+                <form onSubmit={handleSubmit}>
                  <div className="shadow overflow-hidden sm:rounded-md">
                    <div className="px-4 py-5 bg-white sm:p-6">
                      <div className="grid grid-cols-6 gap-6">
@@ -38,8 +95,9 @@ const StdReg_screen = () => {
                            type="text"
                            name="first-name"
                            id="first-name"
-                            autoComplete="given-name"
+                            value={firstName}
                            className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-2 rounded-md"
+                            onChange={(e) => setFirstName(e.target.value)}
                          />
                        </div>

@@ -54,8 +112,9 @@ const StdReg_screen = () => {
                            type="text"
                            name="last-name"
                            id="last-name"
-                            autoComplete="family-name"
+                            value={lastName}
                            className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-2 rounded-md"
+                            onChange={(e) => setLastName(e.target.value)}
                          />
                        </div>

@@ -67,11 +126,14 @@ const StdReg_screen = () => {
                            Nationality
                          </label>
                          <select
-                            id="country"
-                            name="country"
-                            autoComplete="country-name"
+                            id="nationality"
+                            name="nationality"
                            className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                            onChange={(e) => setNationality(e.target.value)}
                          >
+                            <option value="" selected>
+                              Select
+                            </option>
                            <option>Sinhala</option>
                            <option>Tamil</option>
                            <option>Muslim</option>
@@ -88,10 +150,11 @@ const StdReg_screen = () => {
                          </label>
                          <input
                            type="text"
-                            name="email-address"
-                            id="email-address"
-                            autoComplete="email"
+                            name="school"
+                            id="school"
+                            value={school}
                            className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-2 rounded-md"
+                            onChange={(e) => setSchool(e.target.value)}
                          />
                        </div>

@@ -104,10 +167,11 @@ const StdReg_screen = () => {
                          </label>
                          <input
                            type="text"
-                            name="email-address"
-                            id="email-address"
-                            autoComplete="email"
+                            name="age"
+                            id="age"
+                            value={age}
                            className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-2 rounded-md"
+                            onChange={(e) => setAge(e.target.value)}
                          />
                        </div>
                        <div className="col-span-6">
@@ -119,10 +183,11 @@ const StdReg_screen = () => {
                          </label>
                          <input
                            type="text"
-                            name="street-address"
-                            id="street-address"
-                            autoComplete="street-address"
+                            name="residence"
+                            id="residence"
+                            value={residence}
                            className="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-2 rounded-md"
+                            onChange={(e) => setResidence(e.target.value)}
                          />
                        </div>

@@ -136,9 +201,12 @@ const StdReg_screen = () => {
                          <select
                            id="country"
                            name="country"
-                            autoComplete="country-name"
                            className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                            onChange={(e) => setDisorders(e.target.value)}
                          >
+                            <option value="" selected>
+                              Select
+                            </option>
                            <option>Hearing or vision loss</option>
                            <option>Oppositional defiant disorder (ODD)</option>
                            <option>Bipolar disorder</option>
@@ -153,7 +221,7 @@ const StdReg_screen = () => {
                        type="submit"
                        className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-[#3d59c1] hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                      >
-                        Save
+                        Add Candidate
                      </button>
                    </div>
                  </div>