public/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Dyad Finder</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <style>
    * {
    }

    body {
      background-image: linear-gradient(-90deg,#1251AE 0,#0074FF 50%,#1251AE 100%);
      font-family: 'Roboto';
      font-size: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    h1 {
      color: white;
      font-size: 2.5rem;
      font-weight: 500;
    }

    a {
      color: white;
    }

    a:visited {
      color: white;
    }

    #select-group {
      align-items: center;
      display: flex;
      flex-direction: column;
    }

    .headline {
      text-align: center;
      width: 680px;
    }

    .headline p {
      display: inherit;
      color: #fff;
      font-size: 1rem;
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 20px;
    }

    .info {
      text-align: center;
      width: 680px;
    }

    .info p {
      display: inherit;
      color: #fff;
      font-size: 1rem;
      font-weight: 400;
      line-height: 24px;
      margin-bottom: 20px;
    }

    #loading {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    /**
     * Start Screen
     */

    .start {
      background-color: white;
      background-image: none;
      opacity: 1;
      padding: 25px 30px;
      margin: 2rem;
      width: 680px;
      display: flex;
      align-items: center;
    }

    .start-input-container {
      border-width: 0 0 2px;
      border-style: solid;
      border-image: linear-gradient(to right, #dee1e6, #fff) 1;
      width: 100%;
      align-items: center;
    }

    .start-input-container input {
      border: none;
      display: inline-block;
      width: 100%;
      font-size: 14px; 
    }

    .start-input-container input:focus {
      outline: none;
    }

    div .title {
      font-size: 18px;
      font-weight: 700;
      padding-bottom: 5px;
    }

    .start-button {
      width: 51px;
      height: 35px;
      font-size: 14px;
      background: #0074e0;
      border-radius: 4px;
      color: white;
      text-align: center;
      line-height: 35px;
      cursor: pointer;
      vertical-align: middle;
    }


    /**
     * Populate Group screen
     */
    #populate-group .title {
      color: white;
    }

    .group-members {
      background-color: white;
      opacity: 0.7;
      width: 680px;
      min-height: 100px;
      padding: 0.1rem;
      border-radius: 10px;
    }

    .group-members .member {
      margin: 0.5rem;
      background-color: #e2e2e2;
      padding: 0.25rem;
      border-radius: 10px;
    }

    #populate-group .input-container {
      width: 100%;
    }

    #populate-group .data-entry {
      display: flex;
      align-items: center;
      background-color: white;
      opacity: 1;
      padding: 0.5rem;
      margin: 0.5rem 0; 
      border-radius: 10px;
    }

    #populate-group input {
      border-width: 0 0 2px;
      border-style: solid;
      border-image: linear-gradient(to right, #dee1e6, #fff) 1;
      width: 100%;
    }

    #populate-group input:focus {
      outline: none;
    }

   .add-button {
      width: 51px;
      height: 35px;
      font-size: 14px;
      background: #0074e0;
      border-radius: 4px;
      color: white;
      text-align: center;
      line-height: 35px;
      cursor: pointer;
      vertical-align: middle;
    }

    .save-button {
      height: 35px;
      background: #003f80;
      font-size: 20px;
      text-align: center;
      cursor: pointer;
      vertical-align: middle;
      line-height: 35px;
      border-radius: 4px;
      width: 50%;
      color: white;
    }

    .save-button.disabled {
      background: #aaaaaa;
      cursor: not-allowed;
    }

    .button-holder {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /**
     * Enter preferences
     */
    #enter-preferences {
      width: 680px;
    }

    #enter-preferences div.preference-selector {
      background: white;
      opacity: 0.7;
      padding: 1rem;
    }

    #enter-preferences div.name-holder {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    div.person {
      height: 35px;
      line-height: 35px;
      border-radius: 4px;
      cursor: pointer;
      padding: 1rem;
      margin: 0.25rem;
      opacity: 1;
      color: black;
    }

    div.name-holder {
      border-radius: 10px;
      margin: 0.25rem;
      padding: 0.5rem;
    }

    #them {
      background: green;
      min-height: 75px;
    }

    #unselected {
      background: #0074ff;
      min-height: 75px;
    }

    div.them {
      background: #319872;
    }

    div.unselected {
      background: #00c4ff;
    }

    /**
     * Summary screen
     */
    #thank-you .next-steps {
      background: white;
      opacity: 0.7;
      padding: 1rem;
    }

    #thank-you .button-holder {
      margin: 1rem;
    }

    /**
     * Result screen
     */
    #result .matches {
      background: white;
      opacity: 0.7;
      padding: 1rem;
    }

    #result .matches .match {
      margin: 0.5rem;
      background-color: #e2e2e2;
      padding: 0.25rem;
      border-radius: 10px;
      text-align: center;
    }

    /*
     * Overview screen
     */
    #group-status .url-list {
      background-color: white;
      opacity: 0.7;
      width: 680px;
      min-height: 100px;
      padding: 0.1rem;
      border-radius: 10px;
    }

    #group-status .url-list .url {
      margin: 0.5rem;
      background-color: #e2e2e2;
      padding: 0.25rem;
      border-radius: 10px;
    }

    #group-status .group-members .member.have_preference {
      background-color: green;
    }

    #group-status a {
      color: black;
    }

    #group-status a:visited {
      color: black;
    }

    #footer {
      background-image: linear-gradient(-90deg,#1251AE 0,#0074FF 50%,#1251AE 100%);
      position: relative;
      width: 100%;
      height: 24px;
      color: #fff;
      font-size: 1rem;
      font-weight: 400;
      line-height: 24px;
      text-align: center;
    }

    #footer img {
      height: 18px;
      margin: -3px 5px;
    }

  </style>
</head>
<body onload="start()">
  <div>
    <div id="loading" style="display: none" class="screen">
      <style>
        .lds-grid {
          width: 80px;
          height: 80px;
          top: 25%;
          display: inline-block;
          position: relative;
        }

        .lds-grid div {
          position: absolute;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: #cef;
          animation: lds-grid 1.2s linear infinite;
        }
        .lds-grid div:nth-child(1) {
          top: 8px;
          left: 8px;
          animation-delay: 0s;
        }
        .lds-grid div:nth-child(2) {
          top: 8px;
          left: 32px;
          animation-delay: -0.4s;
        }
        .lds-grid div:nth-child(3) {
          top: 8px;
          left: 56px;
          animation-delay: -0.8s;
        }
        .lds-grid div:nth-child(4) {
          top: 32px;
          left: 8px;
          animation-delay: -0.4s;
        }
        .lds-grid div:nth-child(5) {
          top: 32px;
          left: 32px;
          animation-delay: -0.8s;
        }
        .lds-grid div:nth-child(6) {
          top: 32px;
          left: 56px;
          animation-delay: -1.2s;
        }
        .lds-grid div:nth-child(7) {
          top: 56px;
          left: 8px;
          animation-delay: -0.8s;
        }
        .lds-grid div:nth-child(8) {
          top: 56px;
          left: 32px;
          animation-delay: -1.2s;
        }
        .lds-grid div:nth-child(9) {
          top: 56px;
          left: 56px;
          animation-delay: -1.6s;
        }
        @keyframes lds-grid {
          0%, 100% {
            opacity: 1;
          }
          50% {
            opacity: 0.5;
          }
        }
      </style>
      <div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    </div>
    <div id="select-group" style="display: none" class="screen">
      <div class="headline">
        <h1>Dyad Finder</h1>
        <p>Dyad Finder helps you find matched pairs of people from a larger group, by inviting group members to share their partner preferences and calculating the <a href="https://en.wikipedia.org/wiki/Stable_roommates_problem" target="_blank">best possible matches</a>. To get started, simply type in a name for your group below and hit 'GO'.</p>
      </div>
      <div class="start">
        <div class="start-input-container">
          <div class="title">
            Create Group
          </div>
          <input type="text" id="group-name"></input>
        </div>
        <div class="start-button default" onclick="navigateToGroup()">GO</div>
      </div>
    </div>
    <div id="populate-group" style="display:none" class="screen">
      <div class="headline">
        <h1>Populate Group <span class="display-group-name"></span></h1>
      </div>
      <div class="title">
        Members
      </div>
      <div class="group-members">
      </div>
      <div class="data-entry">
        <div class="input-container">
          <input type="text" id="member-name"></input>
        </div>
        <div class="add-button default" onclick="addMemberToGroup()">ADD</div>
      </div>
      <div class="button-holder">
        <div onclick="updateGroup()" class="save-button">
          SAVE GROUP
        </div>
      </div>
    </div>
    <div id="enter-preferences" style="display: none" class="screen">
      <div class="headline">
        <h1 class="prompt">Submit your preferences</h1>
        <p>First select your name by clicking on it below, then select (in preference order) the people that you might like to be matched with. Hit 'Save preferences' when you are done.</p>
      </div>
      <div class="preference-selector">
        <div class="title prompt">
          Group members
        </div>
        <div id="unselected" class="name-holder">
        </div>
        <div id="me">
        </div>
        <div class="title maybe-show-them" style="display: none">
          Preferred Dyad partners for <span class="name"></span>:
        </div>
        <div id="them" class="name-holder maybe-show-them" style="display:none">
        </div>
        <div class="button-holder">
          <div onclick="sendResults()" class="save-button disabled">
            SAVE PREFERENCES 
          </div>
        </div>
      </div>
    </div>
    <div id="thank-you" style="display:none" class="screen">
      <div class="headline">
        <h1 class="prompt">Preferences submitted!</h1>
        <p>Your preferences have been sent to the group creator. They will let you know who you have been matched with once all preferences have been collected.</p>
      </div>
      <div class="next-steps">
        <div class="button-holder">
          <div onclick="selectScreen()" class="save-button">
            ENTER MORE PREFERENCES
          </div>
        </div>
      </div>
    </div>
    <div id="result" style="display:none" class="screen">
      <div class="headline">
        <h1 class="prompt">Matching Result</h1>
        <p>You can see the calculated matches below. The list will be complete when all participants have submitted their preferences. If you have an odd number of participants, someone will be missing from this list. If you don't see anything here, no match could be found based on the current preference data.</p>
      </div>
      <div class="matches pairs">
      </div>
      <div class="info triples">
        <p>If you prefer to match in groups of three, a possible assignment is shown below. Note that although this matching makes use of the stable matching algorithm too, it does not guarantee to be stable - the algorithm for stable matching of triples has not been implemented.</p>
      </div>
      <div class="matches triples">
      </div>
    </div>
    <div id="group-status" style="display:none" class="screen">
      <div class="headline">
        <h1><span class="display-group-name"></span> Group Overview</h1>
        <p>You can share the Survey Link with group members to allow them to submit their preferences. As we receive the submissions, the names will turn green below. When all the names are green, visit the Result Link to see the final matching</p>
      </div>
      <div class="title">
        Group URLs
      </div>
      <div class="url-list">
        <div class="url">
          Survey Link:<br/>
          <span class="survey_url"></span>
        </div>
        <div class="url">
          Result Link:<br/>
          <span class="result_url"></span>
        </div>
      </div>
      <div class="title">
        Members
      </div>
      <div class="group-members">
      </div>
    </div>
    <div id="error" style="display:none" class="screen">
      <div class="headline">
        <h1 class="prompt">Error - please try again</h1>
      </div>
    </div>
  </div>

  <div id="footer" class="footer">
    <a href="https://github.com/codders/dyad-finder"><img src="/GitHub-Mark-32px.png" height="24px"/>Source Code</a> 
  </div>
</body>
<script>

  var myName;

  var BASE_URL = "https://europe-west1-dyad-finder.cloudfunctions.net/dyad";

  var names = [
  ];

  var loaded_group = false;
  var loadedGroupName;

  var expressed_preferences = [];

  var loaded_status = false;
  var update_timer;

  function getSiteURL(action) {
    var baseURL;
    if (window.location.protocol == "file:") {
      baseURL = "file://" + window.location.pathname + "#" + getGroupName();
    } else {
      baseURL = window.location.protocol + "//" + window.location.hostname + "/" + getGroupName();
    }
    if (action != undefined) {
      baseURL += "/" + action;
    }
    return baseURL;
  }

  function getPath(location) {
    if (location == undefined) {
      location = window.location;
    }
    if (location.protocol == "file:") {
      if (location.hash != "") {
        return location.hash.substring(1);
      }
      return location.hash;
    } else {
      return location.pathname.substring(1);
    }
  };

  function setPath(groupName, action) {
    var newPath;
    var pathPart = encodeURIComponent(groupName);
    if (action != undefined) {
      pathPart = pathPart + "/" + action;
    }
    if (window.location.protocol == 'https:') {
      newPath = "/" + pathPart;
    } else {
      newPath = "#" + pathPart;
    }
    history.pushState({}, "Group " + groupName, newPath);
    selectScreen();
  };

  function getPageAction() {
    return getPath().split("/")[1];
  };

  function getGroupName() {
    return decodeURIComponent(getPath().split("/")[0]);
  };

  function groupURL() {
    return BASE_URL + "/group/" + encodeURIComponent(getGroupName());
  };

  function groupResultURL() {
    return groupURL() + "/matches";
  };

  function groupTripleResultURL() {
    return groupURL() + "/triples";
  };

  function groupPreferencesURL() {
    return groupURL() + "/preferences";
  };

  function preferenceURL() {
    return groupURL() + "/preference"; 
  };

  function getGroupMembers() {
    return $.ajax({
      url: groupURL(),
      dataType: 'json'
    }).then(function(data, textStatus, jqXHR) {
      return data;
    });
  };

  function getMatchingResult() {
    return Promise.all([
      $.ajax({
        url: groupResultURL(),
        dataType: 'json'
      }).then(function(data, textStatus, jqXHR) {
        return data;
      }).catch(function(error) {
        return { matching: [], reason: "Fetch failed" }
      }),
      $.ajax({
        url: groupTripleResultURL(),
        dataType: 'json'
      }).then(function(data, textStatus, jqXHR) {
        return data;
      }).catch(function(error) {
        return { matching: [], reason: "Fetch failed" }
      })
    ]);
  };

  function getPreferenceStatus() {
    return $.ajax({
      url: groupPreferencesURL(),
      dataType: 'json'
    }).then(function(data, textStatus, jqXHR) {
      return data.preferences;
    });
  };

  function updateGroup() {
    $('div.screen').hide();
    $('#loading').show();
    $.ajax({
      url: groupURL(),
      method: 'post',
      data: JSON.stringify({members: names}),
      contentType: 'application/json',
      dataType: "json"
    }).done(function() {
      $('#populate-group input, #populate-group button').prop("disabled", false);
      setPath(getGroupName(), "status");
    }).fail(function(jqXHR, textStatus, error) {
      $('#populate-group input, #populate-group button').prop("disabled", false);
      console.log("Failed", jqXHR, textStatus, error);
      names = [];
      selectScreen();
    });
  };

  function clearGroupState() {
    names = [];
    myName = undefined;
    loaded_group = false;
    loadedGroupName = undefined;
    loaded_status = false;
    expressed_preferences = []; 
  };

  function navigateToGroup() {
    var newGroupName = $('#group-name').val();
    clearGroupState();
    setPath(newGroupName);
    return false;
  };

  function redrawMembers() {
    $('.group-members').html('');
    $.each(names, function (index, name) {
      var div = document.createElement('div');
      $(div).addClass("member");
      if (expressed_preferences.includes(name)) {
        $(div).addClass("have_preference");
      }
      $(div).append(document.createTextNode(name));
      $('.group-members').append(div);
    });
  };

  function addMemberToGroup() {
    var newMemberName = $('#member-name').val();
    if (!names.includes(newMemberName)) {
      names.push(newMemberName);
      $('#member-name').val("");
      redrawMembers();
    }
  };

  function resetPreferenceScreen() {
    $("#enter-preferences").find("div.prompt").text("Select your name");
    myName = null;
    $('#them').empty();
    $('#unselected').empty();
    $('#enter-preferences').find('.maybe-show-them').hide();
    $('div.preference-selector').find('div.save-button').addClass('disabled');
  }

  function sendResults() {
    if (myName == null) {
      return;
    }
    var preferences = [];
    $.each($('#them').find('div'), function (index, element) {
      preferences.push($(element).text());
    });
    $('div.screen').hide();
    $('#loading').show();
    $.ajax({
      url: preferenceURL(),
      method: 'post',
      data: JSON.stringify({me: myName, preferences: preferences}),
      contentType: 'application/json',
      dataType: "json"
    }).done(function() {
      $('div.screen').hide();
      $('#thank-you').show();
    }).fail(function(jqXHR, textStatus, error) {
      $('div.screen').hide();
      $('#error').show();
    });
  };

  function switchPosition(element) {
    console.log("Switching element from " + $(element).data('location'));
    if (myName == undefined) {
      myName = $(element).text();
      $(element).hide();
      $("#enter-preferences").find("div.prompt").text("Select your preferred partners");
      $("#enter-preferences").find("span.name").text(myName);
      $('div.preference-selector').find('div.save-button').removeClass('disabled');
      $('div.preference-selector').find('.maybe-show-them').show();
      return;
    }
    if ($(element).data('location') == "me") {
      moveTo(element, 'unselected');
      myName = undefined;
      return; 
    }
    if ($(element).data('location') == "them") {
      moveTo(element, 'unselected');
    } else {
      moveTo(element, 'them');
    }
  };

  function moveTo(element, location) {
    if ($(element).data('location') != null) {
      var currentLocation = $(element).data('location');
      $(element).removeClass(currentLocation);
      $(currentLocation).remove(element);
    }
    $("#" + location).append(element);
    $(element).addClass(location);
    $(element).data('location', location);
  };

  function createButton(name) {
    var button = document.createElement('div');
    $(button).append(name);
    $(button).addClass("person");
    $(button).addClass("unselected");
    $(button).click(function() { switchPosition(button); });
    return button;
  };

  function createMatch(match) {
    var div = document.createElement('div');
    $(div).append(match[0] + " <-> " + match[1]);
    $(div).addClass("match");
    return div;
  };

  function createTripleMatch(match) {
    var div = document.createElement('div');
    $(div).append(match[0] + " <-> " + match[1] + " <-> " + match[2]);
    $(div).addClass("match");
    return div;
  };

  function createLink(selector, url) {
    $(selector).empty();
    var a = document.createElement('a');
    $(a).attr("href", url);
    $(a).attr("target", "_blank");
    $(a).text(url);
    $(selector).append(a);
    return a;
  };

  function populateNames() {
    console.log("Populating");
    $.each(names, function(index, name) {
      console.log(name);
      var button = createButton(name);
      moveTo(button, 'unselected');
    }); 
  };

  function showMatches() {
    setPath(getGroupName(), 'result');
  };

  function startPreferencePolling() {
    update_timer = window.setTimeout(function() {
      update_timer = undefined;
      getPreferenceStatus().then(function(preferences) {
        expressed_preferences = preferences;
        redrawMembers();
        if (getPageAction() == "status") {
          startPreferencePolling();
        }
      });  
    }, 5000);
  };

  function selectScreen() {
    $('div.screen').hide();

    /* Show group select if no group selected */
    if (getPath() == "") {
      loaded_group = false;
      names = [];
      $('#select-group').show();
      $('#select-group input').focus();
      return;
    }

    $('.display-group-name').text(getGroupName());

    /* Ensure group data is loaded */
    if (!loaded_group && getPageAction() != "result") {
      $('#loading').show();
      getGroupMembers().then(function(memberNames) {
        $('#loading').hide();
        loaded_group = true;
        loadedGroupName = getGroupName();
        names = memberNames.members;
        selectScreen();
      });
      return;
    }

    /* Ensure status data is loaded if required */
    if (!loaded_status && getPageAction() == "status") {
      $('#loading').show();
      getPreferenceStatus().then(function(preferences) {
        $('#loading').hide();
        loaded_status = true;
        expressed_preferences = preferences;
        selectScreen();
      });
      return;
    }

    /* Go to group setup page if no action and no members are defined */
    if (getPageAction() == undefined) {
      if (names.length == 0) {
        setPath(getGroupName(), "setup");
        return;
      }

      /* Enter preference data */
      resetPreferenceScreen();
      populateNames();
      $('#enter-preferences').show();
      return;
    }
    switch(getPageAction()) {
      case "result":
        $('#loading').show();
        $('#result div.matches').empty();
        getMatchingResult().then(function(results) {
          $('#loading').hide();
          console.log("Results", results);
          $('#result').show();
          $.each(results[0].matching, function(i, match) {
            $('#result div.matches.pairs').append(createMatch(match));
          }); 
          if (results[1].matching.length == 0) {
            $('.triples').hide();
          } else {
            $('.triples').show();
          }
          $.each(results[1].matching, function(i, match) {
            $('#result div.matches.triples').append(createTripleMatch(match));
          }); 
        }); 
        break;
      case "setup":
        $('#populate-group').show();
        redrawMembers();
        $('#member-name').focus();
        break; 
      case "status":
        $('#group-status').show();
        createLink(".survey_url", getSiteURL());
        createLink(".result_url", getSiteURL("result"));
        redrawMembers();
        startPreferencePolling();
       break;
    }
  }

  function onBrowserNavigate() {
    console.log("Browser navigated - new group: " + getGroupName() + " old: " + loadedGroupName);
    if (update_timer != undefined) {
      console.log("Clearing update timer");
      window.clearTimeout(update_timer);
    }
    if (getGroupName() != loadedGroupName) {
      clearGroupState();
    }
    selectScreen();
  }

  function start() {
    $.each([ 'select-group', 'populate-group' ], function(i,e) {
      $('#' + e).keypress(function(event) {
        if (event.keyCode == 13) {
          $('#' + e + " .default").click();
        }
      });
    });
    window.onpopstate = function(event) {
      console.log("Popped");
      popped = true;
      onBrowserNavigate();
    }
    selectScreen();
  }

</script>
</html>