Checkout dif day

backend/backend/urls.py

@@ -41,6 +41,6 @@
     path('visitor-chart9/', views.visitor_chart9, name="visitor-chart9"),
     path('visitor-chart10/', views.visitor_chart10, name="visitor-chart10"),
     path('pid-to-name/', views.pid_to_name, name="pid-to-name"),
+    path('name-to-pid/', views.name_to_pid, name="name-to-pid"),
     path('checked-in/', views.checked_in, name="checked-in")
-]
-
+]

backend/checkin/views.py

@@ -11,6 +11,7 @@
 from datetime import datetime, date, timedelta  
 from functools import reduce
 from django.views.decorators.csrf import ensure_csrf_cookie
+from django.views.decorators.csrf import csrf_exempt
 from django.forms.models import model_to_dict
 import json
 
@@ -685,6 +686,7 @@ def checkin_data(request):
     data = serializers.serialize('json', dataset)
     return JsonResponse(data, safe=False)
 
+@csrf_exempt
 def pid_to_name(request):
     data = json.loads(request.body)
     result = Checkin.objects.filter(PID=data['pid']).values("name").first()
@@ -694,6 +696,17 @@ def pid_to_name(request):
         returnData = {"name": None}
     return JsonResponse(data=returnData)
 
+@csrf_exempt
+def name_to_pid(request):
+    data = json.loads(request.body)
+    name = data['name']
+    result = Checkin.objects.filter(name__iexact=name.lower()).values("PID").first()
+    if (result):
+        returnData = {"pid": result["PID"]}
+    else:
+        returnData = {"pid": None}
+    return JsonResponse(data=returnData)
+
 def checked_in(request):
     data = json.loads(request.body)
     result = Checkin.objects.filter(PID=data['pid'], checkedIn=True)

src/Screens/CheckIn.js

@@ -61,7 +61,8 @@ export default class CheckIn extends React.Component {
       keypresses: Array(9).fill(null),
       keysPidBox: [],
       pid: "",
-      name: ""
+      name: "",
+      reason: ''
     };
     this.handleChecked = this.handleChecked.bind(this); // set this, because you need get methods from CheckBox 
     this.handleFirstTimeChecked = this.handleFirstTimeChecked.bind(this);
@@ -104,20 +105,6 @@ export default class CheckIn extends React.Component {
       var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
       var time = today.getHours() + ":" + today.getMinutes();
 
-      const item = {
-        name: name, // add name input field, make blank=false
-        PID: pid,
-        date: date,
-        timeIn: time,
-        timeOut: '00:00', // leave empty
-        reason: reason,
-        staff: "",
-        checkedIn: true,
-        hasPID: !noPID,
-        firstTime: false,
-        heard_about_al_through: ""
-      };
-
       // need to figure out how to send authorization token in http requests 
       //axios.post('/api/checkins/', item);
 
@@ -144,6 +131,7 @@ export default class CheckIn extends React.Component {
 
   handleChecked() {
     this.setState({ isChecked: !this.state.isChecked });
+    this.setState({ });
   }
 
   handleFirstTimeChecked() {
@@ -200,7 +188,7 @@ export default class CheckIn extends React.Component {
   }
 
   handleKeyPress = (e) => {
-    if (!(e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA")) {
+    if (!(e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")) {
       const pidArray = this.state.keypresses.slice(1, 9);
       pidArray.push(String.fromCharCode(e.keyCode));
       if (pidArray.every(x => !isNaN(parseInt(x)))) {
@@ -216,9 +204,9 @@ export default class CheckIn extends React.Component {
           });
       }
     } else {
-      if (!(String.fromCharCode(e.keyCode) === '\b')) {
+      if ((!(String.fromCharCode(e.keyCode) === '\b') && (!(String.fromCharCode(e.keyCode) === '\x10')) && (!(String.fromCharCode(e.keyCode) === '\r'))) && (!(String.fromCharCode(e.keyCode) === '\t')) && (!(String.fromCharCode(e.keyCode) === '\x14'))) {
         this.state.keysPidBox.push(String.fromCharCode(e.keyCode))
-      } else {
+      } else if (String.fromCharCode(e.keyCode) === '\b'){
         this.state.keysPidBox.pop()
       }
 
@@ -232,11 +220,43 @@ export default class CheckIn extends React.Component {
           this.setState({
             keypresses: pidArray
           });
+        }  
+      } else if (this.state.keysPidBox.some(x => isNaN(parseInt(x)))){
+          const nameArray = this.state.keysPidBox;
+          if (String.fromCharCode(e.keyCode) === '\r' || String.fromCharCode(e.keyCode) === '\t') { 
+            const newName = nameArray.join("");
+            this.checkForHistoryName(newName);
         }
       }
     }
   }
 
+  checkForHistoryName = (name) => {
+
+    axios({
+      method: "POST",
+      url: "/name-to-pid/",
+      headers: { 'X-CSRFToken': csrfToken },
+      data: {
+        name: name
+      }
+    }).then((response => {
+      if (response.data.pid) {
+        if (this.state.pid.trim() === "") {
+          this.setState({
+            pid: response.data.pid,
+            firstTime: false
+          });
+        }
+        this.reasonRef.current.focus();
+      } else {
+        this.setState({
+          firstTime: true
+        });
+      }
+    }));
+  }
+
   pidChange = (event) => {
     this.setState({
       pid: event.target.value
@@ -247,7 +267,13 @@ export default class CheckIn extends React.Component {
     this.setState({
       name: event.target.value
     });
-  }  
+  }
+
+  reasonChange = (event) => {
+    this.setState({
+      reason: event.target.value
+    });
+  }
 
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyPress);
@@ -269,6 +295,7 @@ export default class CheckIn extends React.Component {
       value,
       onChange: this.onChange
     };
+
     return (
       <div class="checkin">
         <Modal
@@ -283,22 +310,25 @@ export default class CheckIn extends React.Component {
         <h2>Check In</h2>
         <form class="checkin-form">
           <label class="checkin-label">Name:</label>
-          <input class="checkin-input" type="text" name="name" id="name" value={this.state.name} onChange={this.nameChange} ref={this.nameRef} />
+          <input class="checkin-input" type="text" name="name" id="name" value={this.state.name} onChange={this.nameChange} ref={this.nameRef} onBlur={() => this.checkForHistoryName(this.state.name)}/>
           <p class="checkin-centered">(Scanner can be used to input PID)</p>
           <label class="checkin-label">PID:</label>
           <input class="checkin-input" type="text" name="pid" id="pid" disabled={this.state.isChecked} value={this.state.pid} onChange={this.pidChange} onClick={this.clearArray}/>
           <div class="checkin-centered">
-            <input type="checkbox" id="noPID" class="noPID" onChange={this.handleChecked} />
+            <input type="checkbox" id="noPID" class="noPID" checked={this.state.isChecked} onChange={this.handleChecked} />
             <label id="noPIDLabel" for="noPID"> Check if you are a non-UNC student or do not have a PID</label>
           </div>
           <label class="checkin-label">
             Reason:
           </label>
-          <input class="checkin-input" type="text" name="reason" id="reason" ref={this.reasonRef} />
+          <input class="checkin-input" type="text" name="reason" id="reason" ref={this.reasonRef} value={this.state.reason} onChange={this.reasonChange} />
+
+          {this.state.firstTime ? 
           <div class="checkin-centered">
             <input type="checkbox" id="firstTime" class="firstTime" onChange={this.handleFirstTimeChecked} checked={this.state.firstTime} />
             <label id="firstTimeLabel" for="firstTime"> Check if you are visiting the App Lab for the first time</label>
-          </div>
+          </div> : ""}
+
           <div class="textbox checkin-centered" style={{ display: this.state.firstTime ? 'block' : 'none' }}>
             <label>
               How did you hear about us?
@@ -315,7 +345,8 @@ export default class CheckIn extends React.Component {
               alwaysRenderSuggestions={true}
               inputProps={inputProps} />
           </div>
-          <button type="button" class="check-in checkin-centered" onClick={() => { this.SubmitCheckIn(document.getElementById("name").value, document.getElementById("pid").value, document.getElementById("reason").value, document.getElementById("noPID").checked, document.getElementById("firstTime").checked, this.state.value) }}>Submit</button>
+          <button type="button" class="check-in checkin-centered" onClick={() => { this.SubmitCheckIn(this.state.name, 
+            this.state.pid, this.state.reason, this.state.isChecked, this.state.firstTime, this.state.value) }}>Submit</button>
         </form>
       </div>
     );

src/Screens/CheckOut.js

@@ -3,7 +3,8 @@ import axios from "axios";
 import '../App.css';
 import { confirmAlert } from 'react-confirm-alert'; // Import
 import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css
-import {checkUserOut} from '../Utilities/checkoutUtils'
+import {checkUserOut} from '../Utilities/checkoutUtils';
+import { getDateTime } from "../Utilities/timeUtils";
 
 
 export default class CheckOut extends React.Component {
@@ -23,15 +24,19 @@ export default class CheckOut extends React.Component {
     }
 
     submit = (obj) => {
+        let notify = true;
+        const currentDate = getDateTime().date;
+        if (currentDate === obj.date) {
+            notify = false;
+        }
         confirmAlert({
             customUI: ({ onClose }) => {
               return (
                 <div className='custom-ui' class="dialogdiv">
-                  <h1>Are you sure you want to check out?</h1>
-                  <button class="dialog" onClick={() => {this.checkOut(obj); onClose();}}>
-                    Yes
-                  </button>
-                  <button class="dialog" onClick={onClose}>No</button>
+                    <h1>Are you sure you want to check out?</h1>
+                  {!notify ? <button class="dialog" onClick={() => {this.checkOut(obj); onClose();}}>Yes</button> : ""}
+                  {!notify ? <button class="dialog" onClick={onClose}>No</button> : ""}
+                  {notify ? <button class="dialog" onClick={onClose}>Something went wrong. Please notify a manager!</button> : ""}
                 </div>
               );
             }

src/Screens/Home.js

@@ -29,7 +29,7 @@ const Home = () => {
     }
 
     const handleKeyPress = (e) => {
-      if (e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA")
+      if (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA")
         return;
       if (e.target.isContentEditable) return;
 

src/Utilities/checkoutUtils.js

@@ -1,10 +1,10 @@
 import axios from "axios";
+import { getDateTime } from "./timeUtils";
 
 export const checkUserOut = (obj) => {
 
     // if clicked => mark checkedIn as false and set timeOut to current time
-    var today = new Date();
-    var time = today.getHours() + ":" + today.getMinutes();
+    const time =  getDateTime().time
 
     const item = {
         name: obj.name,

src/Utilities/timeUtils.js

@@ -0,0 +1,9 @@
+export const getDateTime = () => { 
+    const today = new Date()
+    const dateTime = {
+        date: today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)) + '-' + today.getDate(),
+        time: today.getHours() + ":" + today.getMinutes(),
+    }
+
+    return dateTime;
+}