I added two portals to distinguish between TAs and Students.

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()