From 7e3963d4a0ca528f041023146ba37810c9aef027 Mon Sep 17 00:00:00 2001 From: Christian Pointner Date: Wed, 28 Sep 2016 19:54:09 +0200 Subject: added npm build environment diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..520d7f0 --- /dev/null +++ b/.babelrc @@ -0,0 +1 @@ + { "presets": ["react"] } diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ae07117 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/.bootstraped +/node_modules/ +/npm-debug.log diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..7dbd58c --- /dev/null +++ b/Makefile @@ -0,0 +1,33 @@ +## +## rhrdweb +## +## +## Copyright (C) 2015-2016 Christian Pointner +## +## This file is part of rhrdweb. +## +## rhrdweb is free software: you can redistribute it and/or modify +## it under the terms of the GNU General Public License as published by +## the Free Software Foundation, either version 3 of the License, or +## any later version. +## +## rhrdweb is distributed in the hope that it will be useful, +## but WITHOUT ANY WARRANTY; without even the implied warranty of +## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +## GNU General Public License for more details. +## +## You should have received a copy of the GNU General Public License +## along with rhrdweb. If not, see . +## + +.PHONY: bootstrap build clean distclean +all: build + +bootstrap: + npm install --save react react-dom babelify babel-preset-react browserify + +build: + npm run build + +distclean: + rm -rf node_modules diff --git a/package.json b/package.json new file mode 100644 index 0000000..66cf23d --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "rhrdweb", + "version": "0.1.0x", + "description": "Radio Helsinki Rivendell Integration Web Interface", + "license": "AGPL-3.0", + "repository": { + "type": "git", + "url": "https://git.helsinki.at/rhrdweb.git" + }, + "scripts": { + "build": "browserify -t [ babelify ] src/*.js -o www/js/bundle.js" + }, + "dependencies": { + "babel-preset-react": "^6.11.1", + "babelify": "^7.3.0", + "browserify": "^13.1.0", + "react": "^15.3.2", + "react-dom": "^15.3.2" + } +} diff --git a/src/clock.js b/src/clock.js new file mode 100644 index 0000000..59390d8 --- /dev/null +++ b/src/clock.js @@ -0,0 +1,129 @@ +/* + * rhrdweb + * + * Copyright (C) 2016 Christian Pointner + * + * This file is part of rhrdweb. + * + * rhrdweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * rhrdweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with rhrdweb. If not, see . + */ + +'use strict'; + +function Clock() { + this.last_message = { t1: 0, t2: 0, t3: 0, t4: 0, tz_offset: 3600 }; + this.clock_offset = 0; + this.clock_rtt = 0; + this.state = 'NEW'; + + this.now = function() { + return new Date(this.getRDTimeMS()); + } + + this.getRDTimeMS = function() { + return (+new Date()) + (this.last_message.tz_offset * 1000) + this.clock_offset; + } + + this.redraw = function() { + var rdtime_ms = this.getRDTimeMS() + + var rdtime = new Date(rdtime_ms); + var date_str = weekday_short[rdtime.getUTCDay()] + ', '; + date_str += rdtime.getUTCDate() + '.' + (rdtime.getUTCMonth() + 1) + '.' + rdtime.getUTCFullYear(); + + var time_str = (rdtime.getUTCHours() > 9 ? ' ' : ' 0') + rdtime.getUTCHours(); + time_str += (rdtime.getUTCMinutes() > 9 ? ':' : ':0') + rdtime.getUTCMinutes(); + time_str += (rdtime.getUTCSeconds() > 9 ? ':' : ':0') + rdtime.getUTCSeconds(); + + console.log([date_str, time_str, get_rd_week(rdtime_ms)]) + } + + this.ntp_update = function(event) { + var t4 = (+new Date()); + + var msg = JSON.parse(event.data); + msg.t4 = t4; + this.last_message = msg; + this.clock_offset = ((msg.t2 - msg.t1) + (msg.t3 - msg.t4)) / 2; + this.clock_rtt = (msg.t4 - msg.t1) - (msg.t3 - msg.t2); +// console.log('got new ntp message from rhrdtime (rtt=' + this.clock_rtt + ' ms): new offset = ' + this.clock_offset + ' ms'); + } + + this.ntp_request = function() { + this.sock.send(JSON.stringify({ t1: (+new Date()), t2: 0, t3: 0, t4: 0, tz_offset: 0, week: 0 })); + } + + this.sock_onopen = function() { +// console.log('clock websocket connection established'); + this.state = 'CONNECTED'; + this.ntp_request(); + this.interval_request = setInterval(this.ntp_request.bind(this), 2000); + } + + this.sock_onclose = function(event) { + if(this.state == 'STOPPED') { + delete this.sock; + } else { +// console.log('clock websocket closed with code ' + event.code + ', trying reconnect...'); + clearInterval(this.interval_request); + delete this.interval_request; + this.sock.close(); + delete this.sock; + setTimeout(this.connect.bind(this), 1000); + this.state = 'RECONNECTING'; + } + } + + this.connect = function() { + this.sock = new WebSocket('wss://' + window.location.host + '/ntp'); + this.sock.onmessage = this.ntp_update.bind(this); + this.sock.onopen = this.sock_onopen.bind(this); + this.sock.onclose = this.sock_onclose.bind(this); + this.state = 'CONNECTING'; + } + + this.start = function() { + this.connect(); + this.interval_redraw = setInterval(this.redraw.bind(this), 200); + } + + this.stop = function() { + this.state = 'STOPPED'; + clearInterval(this.interval_redraw); + delete this.interval_redraw; + clearInterval(this.interval_request); + delete this.interval_request; + this.sock.close(); + } +} + +var clock = new Clock(); +clock.start(); + + + +var ClockView = React.createClass({ + render: function() { + return ( +

+ Hello, ! + It is {this.props.date.toTimeString()} +

+ ); + } +}); + +setInterval(function() { + ReactDOM.render(, document.getElementById('clock')); +}, 500); diff --git a/www/index.html b/www/index.html index 3b7c067..63adbd2 100644 --- a/www/index.html +++ b/www/index.html @@ -17,10 +17,7 @@ --> - - - - +
@@ -34,9 +31,7 @@ - + diff --git a/www/js/bundle.js b/www/js/bundle.js new file mode 100644 index 0000000..7aa4b78 --- /dev/null +++ b/www/js/bundle.js @@ -0,0 +1,134 @@ +(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o + * + * This file is part of rhrdweb. + * + * rhrdweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * rhrdweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with rhrdweb. If not, see . + */ + +'use strict'; + +function Clock() { + this.last_message = { t1: 0, t2: 0, t3: 0, t4: 0, tz_offset: 3600 }; + this.clock_offset = 0; + this.clock_rtt = 0; + this.state = 'NEW'; + + this.now = function () { + return new Date(this.getRDTimeMS()); + }; + + this.getRDTimeMS = function () { + return +new Date() + this.last_message.tz_offset * 1000 + this.clock_offset; + }; + + this.redraw = function () { + var rdtime_ms = this.getRDTimeMS(); + + var rdtime = new Date(rdtime_ms); + var date_str = weekday_short[rdtime.getUTCDay()] + ', '; + date_str += rdtime.getUTCDate() + '.' + (rdtime.getUTCMonth() + 1) + '.' + rdtime.getUTCFullYear(); + + var time_str = (rdtime.getUTCHours() > 9 ? ' ' : ' 0') + rdtime.getUTCHours(); + time_str += (rdtime.getUTCMinutes() > 9 ? ':' : ':0') + rdtime.getUTCMinutes(); + time_str += (rdtime.getUTCSeconds() > 9 ? ':' : ':0') + rdtime.getUTCSeconds(); + + console.log([date_str, time_str, get_rd_week(rdtime_ms)]); + }; + + this.ntp_update = function (event) { + var t4 = +new Date(); + + var msg = JSON.parse(event.data); + msg.t4 = t4; + this.last_message = msg; + this.clock_offset = (msg.t2 - msg.t1 + (msg.t3 - msg.t4)) / 2; + this.clock_rtt = msg.t4 - msg.t1 - (msg.t3 - msg.t2); + // console.log('got new ntp message from rhrdtime (rtt=' + this.clock_rtt + ' ms): new offset = ' + this.clock_offset + ' ms'); + }; + + this.ntp_request = function () { + this.sock.send(JSON.stringify({ t1: +new Date(), t2: 0, t3: 0, t4: 0, tz_offset: 0, week: 0 })); + }; + + this.sock_onopen = function () { + // console.log('clock websocket connection established'); + this.state = 'CONNECTED'; + this.ntp_request(); + this.interval_request = setInterval(this.ntp_request.bind(this), 2000); + }; + + this.sock_onclose = function (event) { + if (this.state == 'STOPPED') { + delete this.sock; + } else { + // console.log('clock websocket closed with code ' + event.code + ', trying reconnect...'); + clearInterval(this.interval_request); + delete this.interval_request; + this.sock.close(); + delete this.sock; + setTimeout(this.connect.bind(this), 1000); + this.state = 'RECONNECTING'; + } + }; + + this.connect = function () { + this.sock = new WebSocket('wss://' + window.location.host + '/ntp'); + this.sock.onmessage = this.ntp_update.bind(this); + this.sock.onopen = this.sock_onopen.bind(this); + this.sock.onclose = this.sock_onclose.bind(this); + this.state = 'CONNECTING'; + }; + + this.start = function () { + this.connect(); + this.interval_redraw = setInterval(this.redraw.bind(this), 200); + }; + + this.stop = function () { + this.state = 'STOPPED'; + clearInterval(this.interval_redraw); + delete this.interval_redraw; + clearInterval(this.interval_request); + delete this.interval_request; + this.sock.close(); + }; +} + +var clock = new Clock(); +clock.start(); + +var ClockView = React.createClass({ + displayName: 'ClockView', + + render: function () { + return React.createElement( + 'p', + null, + 'Hello, ', + React.createElement('input', { type: 'text', placeholder: 'Your name here' }), + '! It is ', + this.props.date.toTimeString() + ); + } +}); + +setInterval(function () { + ReactDOM.render(React.createElement(ClockView, { date: new Date() }), document.getElementById('clock')); +}, 500); + +},{}]},{},[1]); diff --git a/www/js/clock.js b/www/js/clock.js deleted file mode 100644 index 722a979..0000000 --- a/www/js/clock.js +++ /dev/null @@ -1,145 +0,0 @@ -/* - * rhrdweb - * - * Copyright (C) 2016 Christian Pointner - * - * This file is part of rhrdweb. - * - * rhrdweb is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * any later version. - * - * rhrdweb is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with rhrdweb. If not, see . - */ - -'use strict'; - -function Clock() { - this.draw_callbacks = $.Callbacks('unique'); - - this.last_message = { t1: 0, t2: 0, t3: 0, t4: 0, tz_offset: 3600 }; - this.clock_offset = 0; - this.clock_rtt = 0; - this.state = 'NEW'; - - this.now = function() { - return new Date(this.getRDTimeMS()); - } - - this.getRDTimeMS = function() { - return (+new Date()) + (this.last_message.tz_offset * 1000) + this.clock_offset; - } - - this.redraw = function() { - var rdtime_ms = this.getRDTimeMS() - - var rdtime = new Date(rdtime_ms); - var date_str = weekday_short[rdtime.getUTCDay()] + ', '; - date_str += rdtime.getUTCDate() + '.' + (rdtime.getUTCMonth() + 1) + '.' + rdtime.getUTCFullYear(); - - var time_str = (rdtime.getUTCHours() > 9 ? ' ' : ' 0') + rdtime.getUTCHours(); - time_str += (rdtime.getUTCMinutes() > 9 ? ':' : ':0') + rdtime.getUTCMinutes(); - time_str += (rdtime.getUTCSeconds() > 9 ? ':' : ':0') + rdtime.getUTCSeconds(); - - this.draw_callbacks.fireWith(window, [date_str, time_str, get_rd_week(rdtime_ms)]); - } - - this.addCallback = function(cb) { - this.draw_callbacks.add(cb); - } - - this.ntp_update = function(event) { - var t4 = (+new Date()); - - var msg = JSON.parse(event.data); - msg.t4 = t4; - this.last_message = msg; - this.clock_offset = ((msg.t2 - msg.t1) + (msg.t3 - msg.t4)) / 2; - this.clock_rtt = (msg.t4 - msg.t1) - (msg.t3 - msg.t2); -// console.log('got new ntp message from rhrdtime (rtt=' + this.clock_rtt + ' ms): new offset = ' + this.clock_offset + ' ms'); - } - - this.ntp_request = function() { - this.sock.send(JSON.stringify({ t1: (+new Date()), t2: 0, t3: 0, t4: 0, tz_offset: 0, week: 0 })); - } - - this.sock_onopen = function() { -// console.log('clock websocket connection established'); - this.state = 'CONNECTED'; - this.ntp_request(); - this.interval_request = setInterval(this.ntp_request.bind(this), 2000); - } - - this.sock_onclose = function(event) { - if(this.state == 'STOPPED') { - delete this.sock; - } else { -// console.log('clock websocket closed with code ' + event.code + ', trying reconnect...'); - clearInterval(this.interval_request); - delete this.interval_request; - this.sock.close(); - delete this.sock; - setTimeout(this.connect.bind(this), 1000); - this.state = 'RECONNECTING'; - } - } - - this.connect = function() { - this.sock = new WebSocket('wss://' + window.location.host + '/ntp'); - this.sock.onmessage = this.ntp_update.bind(this); - this.sock.onopen = this.sock_onopen.bind(this); - this.sock.onclose = this.sock_onclose.bind(this); - this.state = 'CONNECTING'; - } - - this.start = function() { - this.connect(); - this.interval_redraw = setInterval(this.redraw.bind(this), 200); - } - - this.stop = function() { - this.state = 'STOPPED'; - clearInterval(this.interval_redraw); - delete this.interval_redraw; - clearInterval(this.interval_request); - delete this.interval_request; - this.sock.close(); - } -} - -var clock = new Clock(); - -function clock_init() { - clock.start(); - clock_draw('Do, 1.1.1970', '00:00:00', 0); - clock.addCallback(clock_draw); -} - -function clock_draw(date, time, week) { - $('#clock span.clock-date').text(date); - $('#clock span.clock-time').text(time); - var weekspan = $('#clock span.current-week').removeClass().addClass('current-week').addClass('label'); - switch(week) { - case 1: - weekspan.addClass('label-info').text('Woche 1'); - break; - case 2: - weekspan.addClass('label-warning').text('Woche 2'); - break; - case 3: - weekspan.addClass('label-success').text('Woche 3'); - break; - case 4: - weekspan.addClass('label-danger').text('Woche 4'); - break; - default: - weekspan.addClass('label-default').text('Fehler'); - } -} -- cgit v0.10.2