first test to get clock running

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]);