render datepicker widget (5ca30dc8) · Commits · github_fork / Clip

fnordmetric-webui/fnordmetric-webui-datepicker.js

+62 −12

Original line number	Diff line number	Diff line
		@@ -23,26 +23,63 @@ FnordMetric.util.DatePicker = function(elem, input) {

		var human_days = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];

		function resetDatepicker(day, month, year) {
		function resetDatepicker() {
		dp_widget.innerHTML = "";
		input.value = month + "/" + day + "/" + year;
		dp_widget.className = "datepicker_widget";
		}

		function setDate(hours, minutes, day, month, year) {
		input.value =
		(month+1) + "/" + day + "/" + year + " " + hours + ":" + minutes;

		var ts = new Date(year, (month+1), day, hours, minutes).getTime();
		input.setAttribute("timestamp", ts);
		}

		function init(month, year) {
		dp_widget.className = "datepicker_widget active";

		var input_container = document.createElement("div");
		input_container.className = "input_container";
		var separator = document.createElement("span");
		separator.innerHTML = ":";
		var hour_input = document.createElement("input");
		var minute_input = document.createElement("input");
		input_container.appendChild(hour_input);
		input_container.appendChild(separator);
		input_container.appendChild(minute_input);
		dp_widget.appendChild(input_container);

		var first_day = new Date(year + "-" + (month+1) + "-01").getDay();
		/* Mo = 1, ... , Su = 7 */
		first_day = (first_day === 0)? 7 : first_day-1;
		console.log("first day " + first_day);
		var num_days = new Date(year, (month+1), 0).getDate();
		var table = document.createElement("table");

		var month_header = document.createElement("tr");

		var prev_ttp = FnordMetric.createButton(
		"#", undefined, "<i class='fa fa-chevron-left'></i>");
		"#", "month_ttp", "<i class='fa fa-chevron-left'></i>");
		prev_ttp.addEventListener('click', function(e) {
		e.preventDefault();
		resetDatepicker();
		year = (month == 0)? year-1 : year;
		init((month-1 +12) % 12, year);
		}, false);

		var next_ttp = FnordMetric.createButton(
		"#", undefined, "<i class='fa fa-chevron-right'></i>");
		"#", "month_ttp", "<i class='fa fa-chevron-right'></i>");
		next_ttp.addEventListener('click', function(e) {
		e.preventDefault();
		resetDatepicker();
		year = (month == 11)? year+1 : year;
		init((month + 1) % 12, year);
		}, false);

		var month_title = document.createElement("span");
		month_title.innerHTML = FnordMetric.util.getMonthStr(month);
		month_title.innerHTML =
		FnordMetric.util.getMonthStr(month) + " " + year;
		month_title.className = "datepicker_title";
		var month_cell = document.createElement("td");
		month_cell.colSpan = "7";
		month_cell.appendChild(prev_ttp);
		@@ -64,14 +101,18 @@ FnordMetric.util.DatePicker = function(elem, input) {
		rows++;
		for (var i = 0; i < 7; i++) {
		var cell = document.createElement("td");
		if (i < first_day) {
		if (i < first_day \|\| first_day == 0) {
		cell.innerHTML = "";
		} else {
		var link = FnordMetric.createButton(
		"#", undefined, day);
		link.addEventListener('click', function(e) {
		e.preventDefault();
		resetDatepicker(this.innerText, month, year);
		resetDatepicker();
		setDate(
		hour_input.value,
		minute_input.value,
		this.innerText, month, year);
		}, false);

		cell.appendChild(link);
		@@ -79,12 +120,11 @@ FnordMetric.util.DatePicker = function(elem, input) {
		}
		first_row.appendChild(cell);
		}

		table.appendChild(day_header);
		table.appendChild(month_header);
		table.appendChild(first_row);

		while (rows < 6) {
		while (rows < 6 && day <= num_days) {
		var row = document.createElement("tr");
		rows++;
		for (var i = 0; i < 7 && day <= num_days; i++) {
		@@ -93,7 +133,11 @@ FnordMetric.util.DatePicker = function(elem, input) {
		"#", undefined, day);
		link.addEventListener('click', function(e) {
		e.preventDefault();
		resetDatepicker(this.innerText, month, year);
		resetDatepicker();
		setDate(
		hour_input.value,
		minute_input.value,
		this.innerText, month, year);
		}, false);

		cell.appendChild(link);
		@@ -103,7 +147,9 @@ FnordMetric.util.DatePicker = function(elem, input) {
		table.appendChild(row);
		}

		console.log(rows);
		if (rows < 6) {
		console.log("render last row");
		var last_row = document.createElement("tr");
		for (var i = 0; i < 7; i++) {
		var cell = document.createElement("td");
		@@ -112,7 +158,11 @@ FnordMetric.util.DatePicker = function(elem, input) {
		"#", undefined, day);
		link.addEventListener('click', function(e) {
		e.preventDefault();
		resetDatepicker(this.innerText, month, year);
		resetDatepicker();
		setDate(
		hour_input.value,
		minute_input.value,
		this.innerText, month, year);
		}, false);

		cell.appendChild(link);

fnordmetric-webui/fnordmetric-webui-metricpreviewwidget.js

+7 −6

Original line number	Diff line number	Diff line
		@@ -110,10 +110,6 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {
		}, false);
		}

		elems.date.addEventListener('change', function() {
		//inputs.time.start =
		runQuery(FnordMetric.util.createQuery(inputs, metric));
		}, false);

		//last_ seconds & timespan & datepicker --> date
		}
		@@ -190,6 +186,7 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {

		var datepicker = document.createElement("input");
		date_group.appendChild(datepicker);
		/* add callback */
		FnordMetric.util.DatePicker(date_group, datepicker);
		elems.date = datepicker;

		@@ -236,8 +233,12 @@ FnordMetric.util.MetricPreviewWidget = function(viewport, metric) {
		var secondary_controls = document.createElement("div");
		elem.appendChild(secondary_controls);
		secondary_controls.className = "metric_preview_secondary_controls";
		secondary_controls.innerHTML = "<div class='btn'><i class='fa fa-database'></i> SQL Editor</div>";
		secondary_controls.innerHTML += "<div class='btn'><i class='fa fa-share'></i> Embed</div>";
		var controls_query = FnordMetric.createButton(
		"#", "btn", "<i class='fa fa-database'></i> SQL Editor");
		var controls_embed = FnordMetric.createButton(
		"#", "btn", "<i class='fa fa-share'></i> Embed");
		secondary_controls.appendChild(controls_query);
		secondary_controls.appendChild(controls_embed);

		var timespan_updater = document.createElement("div");
		var prev_timespan = FnordMetric.createButton(

fnordmetric-webui/fnordmetric-webui-util.js

+0 −1

Original line number	Diff line number	Diff line
		@@ -486,4 +486,3 @@ FnordMetric.util.getMonthStr = function(index) {
		}

fnordmetric-webui/fnordmetric-webui.css

+65 −1

Original line number	Diff line number	Diff line
		@@ -621,10 +621,73 @@ input {
		text-align:center
		}

		.datepicker_widget {
		.datepicker_widget.active {
		position:absolute;
		z-index: 999;
		background: #fff;
		border: 1px solid rgb(226, 232, 237);
		border-radius: 1px;

		}

		.datepicker_widget .input_container {
		width: 100%;
		height: 28px;
		padding-left: 35px;
		margin-top: 10px;
		margin-bottom: 10px;
		}

		.datepicker_widget .input_container input {
		float:left;
		width: 50px;
		}

		.datepicker_widget .input_container span {
		float:left;
		margin-left: 5px;
		margin-right: 5px;
		line-height: 28px;
		}


		.datepicker_widget table {
		margin: 9px;
		width: 200px;
		border: 1px solid rgb(226, 232, 237);
		border-radius: 3px;
		}

		.datepicker_widget table th {
		width: 25px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		font-weight: normal;
		color: #60707f;
		}

		.datepicker_widget table td {
		width: 25px;
		height: 20px;
		line-height: 20px;
		text-align:center;
		}

		.datepicker_widget .month_ttp {
		color: #444;
		padding-left: 5px;
		padding-right: 5px;
		}

		.datepicker_widget span.datepicker_title {
		font-weight: bold;
		width: 140px;
		}

		.datepicker_widget table td a {
		text-decoration: none;
		color: #444;
		}

		.metric_preview_controls .datepicker_widget {
		@@ -632,6 +695,7 @@ input {
		width: 216px;
		}


		ul.autocomplete {
		position: absolute;
		top: 28px;

Admin message