I added two portal to distinguish between TAs and Students.

Besides, when TA is going to processing the students' question, both TA and Student will received information about TAs and Students' basic information

nginx/public/index.html

@@ -11,13 +11,15 @@
 
 <h3 id="message">Welcome!</h3>
 
-<p>Name</p>
-<input type="text" id="name"/>
-<button onclick="enterQueue();">Enter Queue</button>
-<br/><br/>
-
-<button onclick="readyToHelp();">TA Ready to Help</button>
-
+<div id="panel">
+    <p>Student Login</p>
+    <input type="text" id="name"/>
+    <button onclick="enterQueue();">Student Enter Queue</button>
+    <br/><br/>
+    <p>TA Login</p>
+    <input type="text" id="TAname"/>
+    <button onclick="TAShowUp();">TA Sign Up/In</button>
+</div>
 <br/>
 
 <div id="queue"></div>

nginx/public/officeHours.js

@@ -2,6 +2,10 @@ const socket = io.connect("http://localhost:8080", {transports: ['websocket']});
 
 socket.on('queue', displayQueue);
 socket.on('message', displayMessage);
+socket.on('positionToServer', positionToServer)
+socket.on('TA_in_progress', TA_frontEnd);
+socket.on('position_in_queue', positionInQueue);
+socket.on('UpdateStudent', UpdateStudent);
 
 function displayMessage(newMessage) {
     document.getElementById("message").innerHTML = newMessage;
@@ -16,6 +20,31 @@ function displayQueue(queueJSON) {
     document.getElementById("queue").innerHTML = formattedQueue;
 }
 
+function TA_frontEnd() {
+    let TA_HTML = '<button onclick="readyToHelp();">TA Ready to Help</button> '
+
+    document.getElementById('panel').innerHTML = TA_HTML;
+}
+
+function positionInQueue(place) {
+    const position = place
+    let StudentHTML = '<h3 id="message">You are in Queue, still need wait for ' + position + ' people </h3>'
+    StudentHTML += '<button onclick="positionToServer();">Check Processing Status</button>'
+    document.getElementById('panel').innerHTML = StudentHTML;
+}
+
+function UpdateStudent(TAname) {
+    let StudentHTML = '<h3 id="message">TA ' + TAname + ' is now helping you </h3>'
+    document.getElementById('panel').innerHTML = StudentHTML;
+}
+
+//
+
+function positionToServer () {
+    let name = document.getElementById("name").value;
+    socket.emit("CheckQueue", name);
+    document.getElementById("name").value = "";
+}
 
 function enterQueue() {
     let name = document.getElementById("name").value;
@@ -26,3 +55,9 @@ function enterQueue() {
 function readyToHelp() {
     socket.emit("ready_for_student");
 }
+
+function TAShowUp() {
+    let name = document.getElementById("TAname").value;
+    socket.emit("TA_sign_in", name);
+    document.getElementById("TAname").value = "";
+}

src/main/scala/model/OfficeHoursServer.scala

@@ -16,6 +16,8 @@ class OfficeHoursServer() {
 
   var usernameToSocket: Map[String, SocketIOClient] = Map()
   var socketToUsername: Map[SocketIOClient, String] = Map()
+  var TAToSocket: Map[String, SocketIOClient] = Map()
+  var socketToTA: Map[SocketIOClient, String] = Map()
 
   val config: Configuration = new Configuration {
     setHostname("0.0.0.0")
@@ -26,7 +28,9 @@ class OfficeHoursServer() {
 
   server.addDisconnectListener(new DisconnectionListener(this))
   server.addEventListener("enter_queue", classOf[String], new EnterQueueListener(this))
+  server.addEventListener("TA_sign_in", classOf[String], new TA_EnterListener(this))
   server.addEventListener("ready_for_student", classOf[Nothing], new ReadyForStudentListener(this))
+  server.addEventListener("CheckQueue", classOf[String], new CheckQueueListener(this))
 
   server.start()
 
@@ -63,13 +67,58 @@ class EnterQueueListener(server: OfficeHoursServer) extends DataListener[String]
     server.database.addStudentToQueue(StudentInQueue(username, System.nanoTime()))
     server.socketToUsername += (socket -> username)
     server.usernameToSocket += (username -> socket)
-    server.server.getBroadcastOperations.sendEvent("queue", server.queueJSON())
+
+    val queue: List[StudentInQueue] = server.database.getQueue.sortBy(_.timestamp)
+    val StringQueue: List[String] = queue.map(_.username)
+    var place: Int = 0
+    for (name <- StringQueue) {
+      if (name == username) {
+        place
+      } else {
+        place+=1
+      }
+    }
+    val placeInJson: JsValue = Json.toJson(place)
+
+    socket.sendEvent("position_in_queue", Json.stringify(placeInJson))
+    place = 0
+    //socket.sendEvent("queue", server.queueJSON()) //need chages
+  }
+}
+
+class CheckQueueListener(server: OfficeHoursServer) extends DataListener[String] {
+  override def onData(socket: SocketIOClient, username: String, ackRequest: AckRequest): Unit = {
+    server.database.addStudentToQueue(StudentInQueue(username, System.nanoTime()))
+
+    val queue: List[StudentInQueue] = server.database.getQueue.sortBy(_.timestamp)
+    val StringQueue: List[String] = queue.map(_.username)
+    var place: Int = 0
+    for (name <- StringQueue) {
+      if (name == username) {
+        place
+      } else {
+        place+=1
+      }
+    }
+    val placeInJson: JsValue = Json.toJson(place)
+    socket.sendEvent("position_in_queue", Json.stringify(placeInJson))
+    place = 0
+    //socket.sendEvent("queue", server.queueJSON()) //need chages
   }
 }
 
+class TA_EnterListener(server: OfficeHoursServer) extends DataListener[String] {
+  override def onData(client: SocketIOClient, username: String, ackSender: AckRequest): Unit = {
+    server.TAToSocket += (username -> client)
+    server.socketToTA += (client -> username)
+    client.sendEvent("TA_in_progress")
+  }
+}
 
 class ReadyForStudentListener(server: OfficeHoursServer) extends DataListener[Nothing] {
   override def onData(socket: SocketIOClient, dirtyMessage: Nothing, ackRequest: AckRequest): Unit = {
+    val TA_name = server.socketToTA(socket)
+    val jsonTAname = Json.toJson(TA_name)
     val queue = server.database.getQueue.sortBy(_.timestamp)
     if(queue.nonEmpty){
       val studentToHelp = queue.head
@@ -79,6 +128,7 @@ class ReadyForStudentListener(server: OfficeHoursServer) extends DataListener[No
         server.usernameToSocket(studentToHelp.username).sendEvent("message", "A TA is ready to help you")
       }
       server.server.getBroadcastOperations.sendEvent("queue", server.queueJSON())
+    server.usernameToSocket(studentToHelp.username).sendEvent("UpdateStudent", Json.stringify(jsonTAname))
     }
   }
 }

src/main/scala/model/database/Database.scala

@@ -7,9 +7,9 @@ import model.StudentInQueue
 
 class Database extends DatabaseAPI{
 
-  val url = "jdbc:mysql://mysql/officehours?autoReconnect=true"
-  val username: String = sys.env("DB_USERNAME")
-  val password: String = sys.env("DB_PASSWORD")
+  val url = "jdbc:mysql://localhost/mysql"
+  val username: String = "root"
+  val password: String = "Maoyuanw129188"
 
   var connection: Connection = DriverManager.getConnection(url, username, password)
   setupTable()