Showing connected users and video call feature additions (3/17)

[isabelle926]

Show connected users + video call feature (3/17)

The connected users and video call feature, which were taken from my previous project, have remained largely the same:

<div class="main">
    <div class="new-meeting">
      <button id="newMeetingBtn">Create a New Meeting</button>
      <div class="join-meeting">
        <input type="text" placeholder="Meeting ID" id="meetingName">
        <button id="joinMeetingBtn">Join</button>
      </div>
    </div>
    <div class="connected-users">
 <!--      <button id="logoutBtn">Logout</button> -->
      <h2>Connected Users</h2>
      <ul id="userList"></ul>
    </div>
  </div>

In the "Interview Home" page, users are able to create new meetings and see other connected users.

Changes

Minor changes have been made to the javascript so that it is compatible with the backend that this project uses:

function loadAndDisplayUsers() {
    // check if the user is connected
    const connectedUser = localStorage.getItem('connectedUser');
    if (!connectedUser) {
        window.location = 'https://john-scc.github.io/jcc_frontend/sign-in/';
        return;
    }
    const userListElement = document.getElementById("userList");
    // Clear any existing content in the userListElement
    userListElement.innerHTML = "Loading...";
    // Retrieve the userList from your backend
    fetch('http://localhost:8911/api/person/read')
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            console.log(data);
            displayUsers(data, userListElement);
        });
  }
  function displayUsers(userList, userListElement) {
      userListElement.innerHTML = "";
      // Loop through the userList and create list items to display each user
      userList.forEach(person => {
          const listItem = document.createElement("li");
          listItem.innerHTML = `
                  <div>
                      <i class="fa fa-user-circle"></i>
                      ${person.name} <i class="user-email">(${person.email})</i>
                  </div>
                  <i class="fa fa-lightbulb-o ${person.online ? "online" : "offline"}"></i>
              `;
          userListElement.appendChild(listItem);
      });
  }
  // Call the loadAndDisplayUsers function when the page loads
  window.addEventListener("load", loadAndDisplayUsers);

Changes to the Person class have also been made in the backend:

public void setOnlineStatus(String email, boolean online) {
        Person person = personJpaRepository.findByEmail(email);
        if (person != null) {
            person.setOnline(online);
            personJpaRepository.save(person);
        }
    }

@GetMapping("/connected-users")
    public String connectedUsers(Model model) {
        List<Person> connectedUsers = repository.getConnectedUsers();
        model.addAttribute("connectedUsers", connectedUsers);
        return "interview-home"; // Return the name of the HTML template
    }