From 38bf34ebd9826c6f69d97906282632fbd5cff06b Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 27 Nov 2014 01:38:30 +0100
Subject: web++

---
 web/src/js/components/eventlog.jsx.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'web/src/js/components/eventlog.jsx.js')

diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
index 08a6dfb4..34d84cdf 100644
--- a/web/src/js/components/eventlog.jsx.js
+++ b/web/src/js/components/eventlog.jsx.js
@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 var LogMessage = React.createClass({
     render: function(){
         var entry = this.props.entry;
@@ -57,7 +55,8 @@ var EventLogContents = React.createClass({
 });
 
 var ToggleFilter = React.createClass({
-    toggle: function(){
+    toggle: function(e){
+        e.preventDefault();
         return this.props.toggleLevel(this.props.name);
     },
     render: function(){
@@ -97,7 +96,6 @@ var EventLog = React.createClass({
         var filter = this.state.filter;
         filter[level] = !filter[level];
         this.setState({filter: filter});
-        return false;
     },
     render: function () {
         return (
-- 
cgit v1.2.3


From e41c0be293502619b6a072fb9bcd8bbd8694b86a Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 27 Nov 2014 01:40:26 +0100
Subject: format code

---
 web/src/js/components/eventlog.jsx.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

(limited to 'web/src/js/components/eventlog.jsx.js')

diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
index 34d84cdf..4d61a39c 100644
--- a/web/src/js/components/eventlog.jsx.js
+++ b/web/src/js/components/eventlog.jsx.js
@@ -1,8 +1,8 @@
 var LogMessage = React.createClass({
-    render: function(){
+    render: function () {
         var entry = this.props.entry;
         var indicator;
-        switch(entry.level){
+        switch (entry.level) {
             case "web":
                 indicator = <i className="fa fa-fw fa-html5"></i>;
                 break;
@@ -18,13 +18,13 @@ var LogMessage = React.createClass({
             </div>
         );
     },
-    shouldComponentUpdate: function(){
+    shouldComponentUpdate: function () {
         return false; // log entries are immutable.
     }
 });
 
 var EventLogContents = React.createClass({
-    mixins:[AutoScrollMixin],
+    mixins: [AutoScrollMixin],
     getInitialState: function () {
         return {
             log: []
@@ -44,8 +44,8 @@ var EventLogContents = React.createClass({
         });
     },
     render: function () {
-        var messages = this.state.log.map(function(row) {
-            if(!this.props.filter[row.level]){
+        var messages = this.state.log.map(function (row) {
+            if (!this.props.filter[row.level]) {
                 return null;
             }
             return <LogMessage key={row.id} entry={row}/>;
@@ -55,11 +55,11 @@ var EventLogContents = React.createClass({
 });
 
 var ToggleFilter = React.createClass({
-    toggle: function(e){
+    toggle: function (e) {
         e.preventDefault();
         return this.props.toggleLevel(this.props.name);
     },
-    render: function(){
+    render: function () {
         var className = "label ";
         if (this.props.active) {
             className += "label-primary";
@@ -74,11 +74,11 @@ var ToggleFilter = React.createClass({
                 {this.props.name}
             </a>
         );
-   } 
+    }
 });
 
 var EventLog = React.createClass({
-    getInitialState: function(){
+    getInitialState: function () {
         return {
             filter: {
                 "debug": false,
@@ -92,7 +92,7 @@ var EventLog = React.createClass({
             showEventLog: false
         });
     },
-    toggleLevel: function(level){
+    toggleLevel: function (level) {
         var filter = this.state.filter;
         filter[level] = !filter[level];
         this.setState({filter: filter});
@@ -101,7 +101,7 @@ var EventLog = React.createClass({
         return (
             <div className="eventlog">
                 <div>
-                    Eventlog
+                Eventlog
                     <div className="pull-right">
                         <ToggleFilter name="debug" active={this.state.filter.debug} toggleLevel={this.toggleLevel}/>
                         <ToggleFilter name="info" active={this.state.filter.info} toggleLevel={this.toggleLevel}/>
-- 
cgit v1.2.3


From f6c0e000da504a68ecd41a8f7ce59e2f71e0a218 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Fri, 28 Nov 2014 20:54:52 +0100
Subject: event log: virtual scrolling

---
 web/src/js/components/eventlog.jsx.js | 39 ++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 10 deletions(-)

(limited to 'web/src/js/components/eventlog.jsx.js')

diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
index 4d61a39c..708432d0 100644
--- a/web/src/js/components/eventlog.jsx.js
+++ b/web/src/js/components/eventlog.jsx.js
@@ -24,7 +24,7 @@ var LogMessage = React.createClass({
 });
 
 var EventLogContents = React.createClass({
-    mixins: [AutoScrollMixin],
+    mixins: [AutoScrollMixin, VirtualScrollMixin],
     getInitialState: function () {
         return {
             log: []
@@ -39,18 +39,37 @@ var EventLogContents = React.createClass({
         this.log.close();
     },
     onEventLogChange: function () {
+        var log = this.log.getAll().filter(function (entry) {
+            return this.props.filter[entry.level];
+        }.bind(this));
         this.setState({
-            log: this.log.getAll()
+            log: log
         });
     },
+    componentWillReceiveProps: function () {
+        if (this.log) {
+            this.onEventLogChange();
+        }
+
+    },
+    getDefaultProps: function () {
+        return {
+            rowHeight: 45,
+            rowHeightMin: 15,
+            placeholderTagName: "div"
+        };
+    },
+    renderRow: function(elem){
+        return <LogMessage key={elem.id} entry={elem}/>;
+    },
     render: function () {
-        var messages = this.state.log.map(function (row) {
-            if (!this.props.filter[row.level]) {
-                return null;
-            }
-            return <LogMessage key={row.id} entry={row}/>;
-        }.bind(this));
-        return <pre>{messages}</pre>;
+        var rows = this.renderRows(this.state.log);
+
+        return <pre onScroll={this.onScroll}>
+            { this.getPlaceholderTop() }
+            {rows}
+            { this.getPlaceholderBottom(this.state.log.length) }
+        </pre>;
     }
 });
 
@@ -101,7 +120,7 @@ var EventLog = React.createClass({
         return (
             <div className="eventlog">
                 <div>
-                Eventlog
+                    Eventlog
                     <div className="pull-right">
                         <ToggleFilter name="debug" active={this.state.filter.debug} toggleLevel={this.toggleLevel}/>
                         <ToggleFilter name="info" active={this.state.filter.info} toggleLevel={this.toggleLevel}/>
-- 
cgit v1.2.3


From e12bf19e35867f3ea69f45054decb024a75fc2b4 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Wed, 10 Dec 2014 00:47:05 +0100
Subject: web: add event store, fix all those bugs

---
 web/src/js/components/eventlog.jsx.js | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

(limited to 'web/src/js/components/eventlog.jsx.js')

diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
index 708432d0..3bd188ea 100644
--- a/web/src/js/components/eventlog.jsx.js
+++ b/web/src/js/components/eventlog.jsx.js
@@ -25,32 +25,33 @@ var LogMessage = React.createClass({
 
 var EventLogContents = React.createClass({
     mixins: [AutoScrollMixin, VirtualScrollMixin],
-    getInitialState: function () {
+    getInitialState: function(){
+        var store = new EventLogStore();
+        var view = new StoreView(store, function(entry){
+            return this.props.filter[entry.level];
+        }.bind(this));
+        view.addListener("add recalculate", this.onEventLogChange);
         return {
+            store: store,
+            view: view,
             log: []
         };
     },
-    componentDidMount: function () {
-        this.log = EventLogStore.getView();
-        this.log.addListener("change", this.onEventLogChange);
-    },
     componentWillUnmount: function () {
-        this.log.removeListener("change", this.onEventLogChange);
-        this.log.close();
+        this.state.view.removeListener("add recalculate", this.onEventLogChange);
+        this.state.view.close();
+        this.state.store.close();
     },
     onEventLogChange: function () {
-        var log = this.log.getAll().filter(function (entry) {
-            return this.props.filter[entry.level];
-        }.bind(this));
         this.setState({
-            log: log
+            log: this.state.view.list
         });
     },
-    componentWillReceiveProps: function () {
-        if (this.log) {
-            this.onEventLogChange();
+    componentWillReceiveProps: function (nextProps) {
+        if(nextProps.filter !== this.props.filter){
+            this.props.filter = nextProps.filter; // Dirty: Make sure that view filter sees the update.
+            this.state.view.recalculate(this.state.store._list);
         }
-
     },
     getDefaultProps: function () {
         return {
@@ -66,7 +67,7 @@ var EventLogContents = React.createClass({
         var rows = this.renderRows(this.state.log);
 
         return <pre onScroll={this.onScroll}>
-            { this.getPlaceholderTop() }
+            { this.getPlaceholderTop(this.state.log.length) }
             {rows}
             { this.getPlaceholderBottom(this.state.log.length) }
         </pre>;
@@ -112,7 +113,7 @@ var EventLog = React.createClass({
         });
     },
     toggleLevel: function (level) {
-        var filter = this.state.filter;
+        var filter = _.extend({}, this.state.filter);
         filter[level] = !filter[level];
         this.setState({filter: filter});
     },
-- 
cgit v1.2.3


From 7e40b8ab09d6d605307342fbfa21129ca15ff055 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Wed, 10 Dec 2014 15:25:40 +0100
Subject: web: implement settings store, modularize store

---
 web/src/js/components/eventlog.jsx.js | 39 ++++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 14 deletions(-)

(limited to 'web/src/js/components/eventlog.jsx.js')

diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
index 3bd188ea..7ef369f8 100644
--- a/web/src/js/components/eventlog.jsx.js
+++ b/web/src/js/components/eventlog.jsx.js
@@ -25,22 +25,29 @@ var LogMessage = React.createClass({
 
 var EventLogContents = React.createClass({
     mixins: [AutoScrollMixin, VirtualScrollMixin],
-    getInitialState: function(){
-        var store = new EventLogStore();
-        var view = new StoreView(store, function(entry){
-            return this.props.filter[entry.level];
-        }.bind(this));
-        view.addListener("add recalculate", this.onEventLogChange);
+    getInitialState: function () {
         return {
-            store: store,
-            view: view,
             log: []
         };
     },
+    componentWillMount: function () {
+        this.openView(this.props.eventStore);
+    },
     componentWillUnmount: function () {
-        this.state.view.removeListener("add recalculate", this.onEventLogChange);
+        this.closeView();
+    },
+    openView: function (store) {
+        var view = new StoreView(store, function (entry) {
+            return this.props.filter[entry.level];
+        }.bind(this));
+        this.setState({
+            view: view
+        });
+
+        view.addListener("add recalculate", this.onEventLogChange);
+    },
+    closeView: function () {
         this.state.view.close();
-        this.state.store.close();
     },
     onEventLogChange: function () {
         this.setState({
@@ -48,9 +55,13 @@ var EventLogContents = React.createClass({
         });
     },
     componentWillReceiveProps: function (nextProps) {
-        if(nextProps.filter !== this.props.filter){
+        if (nextProps.filter !== this.props.filter) {
             this.props.filter = nextProps.filter; // Dirty: Make sure that view filter sees the update.
-            this.state.view.recalculate(this.state.store._list);
+            this.state.view.recalculate(this.props.eventStore.list);
+        }
+        if (nextProps.eventStore !== this.props.eventStore) {
+            this.closeView();
+            this.openView(nextProps.eventStore);
         }
     },
     getDefaultProps: function () {
@@ -60,7 +71,7 @@ var EventLogContents = React.createClass({
             placeholderTagName: "div"
         };
     },
-    renderRow: function(elem){
+    renderRow: function (elem) {
         return <LogMessage key={elem.id} entry={elem}/>;
     },
     render: function () {
@@ -130,7 +141,7 @@ var EventLog = React.createClass({
                     </div>
 
                 </div>
-                <EventLogContents filter={this.state.filter}/>
+                <EventLogContents filter={this.state.filter} eventStore={this.props.eventStore}/>
             </div>
         );
     }
-- 
cgit v1.2.3