Tracking API Dashboard

Visualization for https://github.com/Steppschuh/PlaceTracking/

by Stephan Schultz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<main>
  <container>
    <div class="section">
      <div class="row">

        <!-- About -->
        <div id="aboutCardContainer" class="col s12 m8 l4 offset-s0 offset-m2 offset-l0">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title truncate">Tracking API</span>
              <p>
                This is a minimal user interface for the free and open-source Tracking API. Intended for demonstration and visualization purposes.
              </p>
              <br/>
              <p>
                To learn more about this project, check out the sites linked below. Please feel free to try it out!
              </p>
            </div>
            <div class="card-action">
              <a href="https://github.com/Steppschuh/PlaceTracking/" target="_blank">GitHub</a>
              <a href="https://medium.com/@Steppschuh/370c600af52b#.kchrtwitj" target="_blank">Medium</a>
            </div>
          </div>
        </div>

        <!-- User -->
        <div id="userCardContainer" class="col s12 m8 l4 offset-s0 offset-m2 offset-l0">
          <div class="card">
            <div class="card-content">
              <span class="card-title truncate">User</span>
              <p>Paste the ID of your user in the textbox below. Create a new user if you haven't done so yet.</p>
              <br/>
              <div class="input-field">
                <input id="userIdInput" placeholder="123456789" type="text" class="validate">
                <label for="userIdInput">User ID</label>
              </div>
            </div>
            <div class="card-action">
              <a id="loadUserButton">Load User</a>
  ...

CSS

body {
  background-color: white;
}

main {
  margin: 20px;
}

.fill-width {
  width: 100%;
}


/* label color */

.input-field label {
  color: #000;
}


/* label focus color */

.input-field input[type=text]:focus + label {
  color: #000;
}


/* label underline focus color */

.input-field input[type=text]:focus {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
}


/* valid color */

.input-field input[type=text].valid {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
}


/* invalid color */

.input-field input[type=text].invalid {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
}


/* icon prefix focus color */

.input-field .prefix.active {
  color: #000;
}

.tabs .indicator {
  background-color: #ffab40;
}

.tabs .tab a {
  color: #FFC174;
}

.tabs .tab a:hover,
.tabs .tab a.active {
  color: #ffab40;
}

JavaScript

/**

	This is a UI for the Tracking API, created
  for demonstration purposes.
  
  https://github.com/Steppschuh/PlaceTracking/
  
**/

google.charts.load("current", {
  "packages": ["corechart"]
});
google.charts.setOnLoadCallback(onGoogleChartsLoaded);

$(document).ready(function() {
  restoreInputValues();

  $('.modal').modal();
  $("select").material_select();

  $("#loadUserButton").click(loadUserData);
  $("#loadTopicButton").click(loadTopicData);
  $("#createActionSubmitButton").click(createAction);
  $("#createTopicSubmitButton").click(createTopic);
  $("#createUserSubmitButton").click(createUser);
  $("#topicIdSelect").change(function(event) {
    $("#topicIdInput").val($("#topicIdSelect option:selected").val());
    loadTopicData();
  })
});

function restoreInputValues() {
  var userId = localStorage.getItem("userId");
  if (userId && userId.length > 10) {
    $("#userIdInput").val(userId);
    loadUserData();
  }

  var topicId = localStorage.getItem("topicId");
  if (topicId && topicId.length > 10) {
    $("#topicIdInput").val(topicId);
    loadTopicData();
  }
}

function loadUserData() {
  var userId = $("#userIdInput").val();
  trackingApi.requestUserByUserId(userId)
    .then(onUserLoaded)
    .catch(function(error) {
      console.log(error);
      Materialize.toast("Unable to load user", 3000);
    });
}

function onUserLoaded(user) {
  console.log(user);
  $("#userIdInput").val(user.id);
  localStorage.setItem("userId", user.id);
  Materialize.toast("Loaded user: " + user.name, 3000);
  $("#userCardContainer .card-title").text("User: " + user.name);
  $("#topicCardContainer").removeClass("hide");
  scrollTo($("#topicCardContainer"));
  loadTopicIdsByUserId(user.id);
}

function loadTopicIdsByUserId(userId) {
  trackingApi.requestRelationsByUserId(userId)
    .then(function(relations) {
      console.log(relations);
      var topicIds = [];
      for (var i = 0; i < relations.length; i++) {
        if (relations[i].topicId) {
         ...