diff options
-rw-r--r-- | src/component-clock.js | 28 | ||||
-rw-r--r-- | www/js/calendar.js | 3 | ||||
-rw-r--r-- | www/js/components.js | 36 |
3 files changed, 53 insertions, 14 deletions
diff --git a/src/component-clock.js b/src/component-clock.js index fb877f4..40ea1a2 100644 --- a/src/component-clock.js +++ b/src/component-clock.js @@ -22,12 +22,30 @@ var ClockView = React.createClass({ render: function() { return ( - <p> - Hello, <input type="text" placeholder="Your name here" />! - It is {this.props.date.toTimeString()} - </p> + // <span class="current-week label">Woche {this.props.week}</span> + // <span class="clock-date">{this.props.date}</span> + <span class="clock-time">{this.props.time}</span> ); } }); -// ReactDOM.render(<ClockView date={new Date()} />, document.getElementById('clock')); + // 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'); + // } + +function drawClock(date, time, week) { + ReactDOM.render(<ClockView date={date} time={time} week={week} />, document.getElementById('clock')); +} diff --git a/www/js/calendar.js b/www/js/calendar.js index 740a4dd..623d79a 100644 --- a/www/js/calendar.js +++ b/www/js/calendar.js @@ -97,7 +97,8 @@ function calendar_init() { $('#btn-later').click(calendar_next); $('#calendar').on('wheel', calendar_scroll); current_week_offset = -4; - clock.addCallback(function() { + clock.addCallback(function(date, time, week) { + draw_clock(date, time, week); calendar_redraw(current_week_offset); }); } diff --git a/www/js/components.js b/www/js/components.js index 86fa57c..1636df5 100644 --- a/www/js/components.js +++ b/www/js/components.js @@ -24,17 +24,37 @@ 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() + return ( + // <span class="current-week label">Woche {this.props.week}</span> + // <span class="clock-date">{this.props.date}</span> + React.createElement( + "span", + { "class": "clock-time" }, + this.props.time + ) ); } }); -// ReactDOM.render(<ClockView date={new Date()} />, document.getElementById('clock')); +// 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'); +// } + +function drawClock(date, time, week) { + ReactDOM.render(React.createElement(ClockView, { date: date, time: time, week: week }), document.getElementById('clock')); +} },{}]},{},[1]); |