time_navigation tmpl and chart component

<!--

  This file is part of the "FnordMetric" project

    Copyright (c) 2014 Laura Schlimmer

    Copyright (c) 2014 Paul Asmuth, Google Inc.

  FnordMetric is free software: you can redistribute it and/or modify it under

  the terms of the GNU General Public License v3.0. You should have received a

  copy of the GNU General Public License along with this program. If not, see

  <http://www.gnu.org/licenses/>.

  only if attribute future-selectable is set future dates are selectable

  same holds true for past-selectable

-->

<template id='fn-cockpit-chart-base-tpl'>

  <iframe width="100%" height="160" frameborder="0" scrolling="no"></iframe>

</template>

<script type='text/javascript'>

  var CockpitChartComponent = function() {

    this.createdCallback = function() {

      var tpl = Fnord.getTemplate("fn-cockpit-chart", "base");

      var shadow = this.createShadowRoot();

      shadow.appendChild(tpl);

      if (this.hasAttribute('data-url')) {

        this.initUrl();

      }

    };

    this.attributeChangedCallback = function(attr, old_val, new_Val) {

      if (attr == 'data-url') {

        this.render();

      }

    };

    this.initUrl = function() {

      var url = this.getAttribute('data-url');

      url = url.replace(

        "%%width%%",  document.body.querySelector(".viewport").offsetWidth - 40);

      url = url.replace("%%from%%", this.getAttribute('data-from'));

      url = url.replace("%%until%%", this.getAttribute('data-until'));

      this.shadowRoot.querySelector("iframe").setAttribute("src", url);

    };

    this.render = function() {

      var url = this.getAttribute('data-url');

      if (url) {

        this.shadowRoot.querySelector("iframe").setAttribute('scr', url);

      }

    };

    this.updateUrl = function(key, value) {

      var iframe = this.shadowRoot.querySelector("iframe");

      var url = iframe.getAttribute("src");

      var regex = new RegExp(key + '=.+&');

      var param = key + "=" + value + "&";

      iframe.setAttribute('src', url.replace(regex, param));

    };

  };

  window.addEventListener('fn-ready', function() {

    Fnord.registerComponent('fn-cockpit-chart', CockpitChartComponent);

  }, false);

</script>

.time_navigation {

  border-bottom: 1px solid rgba(0,0,0,.1);

  padding: 5px;

  padding-top: 8px;

  margin-left: 200px;

  height: 60px;

}

.time_navigation .group {

  float:right;

  margin-right: 25px;

  height: 100%;

}

.time_navigation .group:first-child {

  margin-right: 15px;

}

.time_navigation .group b {

  font-size: 80%;

  line-height: 12px;

  font-weight: 500;

  display: block;

  margin-bottom: 6px;

  opacity: 0.7;

}

.time_navigation .group fn-daterangepicker /deep/ .wrapper * {

  float: left;

}

<div class="time_navigation">

  Timenav

  <div class="group">

    <b>End Time</b>

    <fn-datepicker

      data-time-select

      data-selectable='past'

      data-timestamp=<?= $timeNav->endTimeMilli(); ?>

    ></fn-datepicker>

  </div>

  <div class="group">

    <b>Time Range</b>

    <fn-daterangepicker

      data-selectable='past'

      data-daterange=<?= $timeNav->timeRangeMilli(); ?> 

      data-endtime=<?= $timeNav->endTimeMilli(); ?>

    ></fn-daterangepicker>

  </div>

  <div class="group">

    <b>Show The Last...</b>

    <fn-dropdown data-style="input small">

      <fn-dropdown-header>5 Minutes</fn-dropdown-header>

      <fn-dropdown-item data-value=300>5 minutes</fn-dropdown-item>

      <fn-dropdown-item data-value=900>15 minutes</fn-dropdown-item>

      <fn-dropdown-item data-value=1800>30 minutes</fn-dropdown-item>

      <fn-dropdown-item data-value=3600>1 hour</fn-dropdown-item>

      <fn-dropdown-item data-value=14400>4 hours</fn-dropdown-item>

      <fn-dropdown-item data-value=43200>12 hours</fn-dropdown-item>

      <fn-dropdown-item data-value=86400>1 day</fn-dropdown-item>

    </fn-dropdown>

  </div>

</div>

<script type='text/javascript'>

  var base = document.querySelector(".time_navigation");

  var dropdown = document.body.querySelector(".time_navigation fn-dropdown");

  var datepicker = document.body.querySelector(".time_navigation fn-datepicker");

  var daterangepicker =

    document.body.querySelector(".time_navigation fn-daterangepicker");

  dropdown.addEventListener("fn-dropdown-item-click", function(e) {

    var range = parseInt(e.srcElement.getAttribute('data-value'), 10);

    daterangepicker.setAttribute('data-daterange', (range * 1000));

    dispatchCustomEvent("start-time-select", range);

  },false);

  datepicker.addEventListener("fn-datepicker-select", function() {

    var ts = parseInt(this.getAttribute('data-timestamp'), 10);

    daterangepicker.setAttribute('data-endtime', ts);

    dispatchCustomEvent("end-time-select", Math.round(ts / 1000));

  }, false);

  daterangepicker.addEventListener("fn-daterangepicker-select-previous",

    function() {

      var ts = parseInt(this.getAttribute('data-endtime'), 10);

      datepicker.setAttribute('data-timestamp', ts);

      dispatchCustomEvent("end-time-select", Math.round(ts / 1000));

    },

  false);

  daterangepicker.addEventListener("fn-daterangepicker-select-next",

    function() {

      var ts = parseInt(this.getAttribute('data-endtime'), 10);

      datepicker.setAttribute('data-timestamp', ts);

      dispatchCustomEvent("end-time-select", Math.round(ts / 1000));

    },

  false);

  function dispatchCustomEvent(name, eventDetail) {

    var newEvent = new CustomEvent(

      name, {detail : {time: eventDetail},

      bubbles: true,

      cancelable: true});

    base.dispatchEvent(newEvent);

  };

</script>