Merge lp:~jderose/dmedia/history into lp:dmedia

[Jason Gerard DeRose]

* Adds new project/history view to show completed dmedia/import docs, and a similar project/history filter function

* ImporterWorker now saves the thumbnail the dmedia/import doc for handy use by the History tab

* Added proof-of-concept History tab that shows the most recent 8 imports (card insert events), and responds to the changes feed

[James Raymond (jamesmr)]

review: Approve

=== modified file 'dmedia/importer.py'
--- dmedia/importer.py	2012-08-06 11:00:34 +0000
+++ dmedia/importer.py	2012-10-23 01:39:21 +0000
@@ -273,6 +273,9 @@
                 log.info('adding to %r', self.project)
                 self.project.save(doc)
             if need_thumbnail and 'thumbnail' in doc['_attachments']:
+                self.doc['_attachments'] = {}
+                self.doc['_attachments']['thumbnail'] = doc['_attachments']['thumbnail']
+                self.db.save(self.doc)
                 self.emit('import_thumbnail', self.id, ch.id)
                 need_thumbnail = False
 

=== modified file 'dmedia/views.py'
--- dmedia/views.py	2012-10-20 05:06:23 +0000
+++ dmedia/views.py	2012-10-23 01:39:21 +0000
@@ -286,19 +286,44 @@
 }
 """
 
+project_history = """
+function(doc) {
+    if (doc.type == 'dmedia/import' && doc.time_end) {
+        var value = {
+            'label': doc.partition.label,
+            'size': doc.partition.size,
+            'bytes': doc.stats.total.bytes,
+            'count': doc.stats.total.count,
+            'rate': doc.rate,
+        }
+        emit(doc.time, value);
+    }
+}
+"""
+
+filter_project_history = """
+function(doc, req) {
+    if (doc.type == 'dmedia/import' && doc.time_end) {
+        return true;
+    }
+    return false;
+}
+"""
+
 project_design = {
     '_id': '_design/project',
     'views': {
         'atime': {'map': project_atime},
         'title': {'map': project_title},
+        'history': {'map': project_history},
     },
     'filters': {
         'type': filter_project_type,
+        'history': filter_project_history,
     },
 }
 
 
-
 # For dmedia/tag docs:
 tag_key = """
 function(doc) {

=== modified file 'ui/dmedia.js'
--- ui/dmedia.js	2012-10-20 23:11:23 +0000
+++ ui/dmedia.js	2012-10-23 01:39:21 +0000
@@ -42,7 +42,8 @@
     },
 
     init_history: function() {
-        console.log('init_history'); 
+        UI.history = new History(db);
+        UI.history.start();
     },
 
     init_browser: function() {
@@ -339,6 +340,82 @@
     },
 }
 
+
+var History = function(db) {
+    this.db = db;
+    this.div = $('imports');
+}
+History.prototype = {
+    start: function() {
+        var self = this;
+        var on_result = function(req) {
+            self.on_result(req);
+        }
+        var options = {
+            'update_seq': true,
+            'descending': true,
+            'limit': 8,
+        }
+        this.db.view(on_result, 'project', 'history', options);
+    },
+
+    on_result: function(req) {
+        this.div.innerHTML = null;
+        var result = req.read();
+        result.rows.forEach(function(row) {
+            var element = this.build(row);
+            this.div.appendChild(element);
+        }, this);
+        this.monitor(result.update_seq);
+    },
+
+    monitor: function(since) {
+        this.since = since;
+        var self = this;
+        var callback = function(req) {
+            self.on_changes(req);
+        }
+        var options = {
+            'since': since,
+            'feed': 'longpoll',
+            'filter': 'project/history',
+        }
+        this.db.get(callback, '_changes', options);
+    },
+
+    on_changes: function(req) {
+        var result = req.read();
+        if (result.results.length > 0) {
+            this.start();
+        }
+        else {
+            this.monitor(result.last_seq);
+        }
+    },
+
+    build: function(row) {
+        var value = row.value;
+        var div = $el('div', {'class': 'thumbnail'});
+        div.style.backgroundImage = this.db.att_css_url(row.id);
+        var inner = div.appendChild($el('div'));
+        var label = [value.size, value.label].join(', ');
+        inner.appendChild(
+            $el('p', {'textContent': format_date(row.key)})
+        );
+        inner.appendChild(
+            $el('p', {'textContent': label})
+        );
+        inner.appendChild(
+            $el('p', {'textContent': count_n_size(value.count, value.bytes)})
+        );
+        inner.appendChild(
+            $el('p', {'textContent': value.rate})
+        );
+        return div;
+    },
+}
+
+
 function Browser(project, player, items) {
     this.player = $(player);
     this.tags = $('tags');

=== modified file 'ui/grid.css'
--- ui/grid.css	2012-03-27 13:18:47 +0000
+++ ui/grid.css	2012-10-23 01:39:21 +0000
@@ -1,5 +1,4 @@
 .grid_row {
-    white-space: nowrap;
     font-size: 0;
     line-height: 0;
 }

=== modified file 'ui/index.html'
--- ui/index.html	2012-10-21 22:58:12 +0000
+++ ui/index.html	2012-10-23 01:39:21 +0000
@@ -25,7 +25,7 @@
             </div>
         </div>
         <div class="content">
-            <div id="import_target" class="">
+            <div id="import_target" class="hide">
                 <div id="choose_project" class="">
                     <form id="project_form"></form>
                     <div class="grid_row darkbar">
@@ -57,13 +57,11 @@
                     <div id="cards" class="grid_row"></div>
                 </div>    
             </div>
+
             <div id="history_target" class="hide">
-                <div class="grid_row darkbar">
-                    <div class="grid_1">History</div>
-                    <input class="grid_3" placeholder="Date Search"></input>
-                    <button class="grid_2">Search History</button>
-                </div>
+            <div id="imports" class="grid_row"></div>
             </div>
+            
             <div id="browser_target" class="hide">
                 <div class="grid_row darkbar">
                     <select id="browser_projects" class="grid_1"></select>

=== modified file 'ui/style.css'
--- ui/style.css	2012-10-20 21:18:08 +0000
+++ ui/style.css	2012-10-23 01:39:21 +0000
@@ -218,6 +218,29 @@
     text-shadow: 0 0 1px black;
 }
 
+#imports .thumbnail {
+    height: 224px;
+    width: 224px;
+    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.6);
+    background-color: #ddd;
+    background-size: cover;
+    background-position: center center;
+    overflow: hidden;
+    position: relative;
+}
+
+#imports .thumbnail div {
+    background-color: rgba(0, 0, 0, 0.35);
+    padding: 5px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    overflow: hidden;
+    font-size: 14px;
+    color: white;
+    text-shadow: 0 0 1px black;
+}
+
 
 #tray {
     position: fixed;