Add pause/resume. Closes #266. (#291)

* elements/table: turn status icon into button and send event * start with 2nd toiletdb for paused state * elements: account for dat.network not always existing * elements/table: fix event name * integrate new dat-worker pause/resume logic * add missing join/leave network calls * work on icons * icons * style toggle/pause icon. also clean up alignments of network and row action buttons * use npm version of dat-worker again * elements/table: add stale status (pause needs its own icon now) * elements/status: add stale status, refactor * elements/table: use resume icon for paused state * models/repos: cleanup * fix syntax error
dat-ecosystem-archive · Mar 9, 2017 · 0f3a79d · 0f3a79d
1 parent cad33e1
commit 0f3a79d
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 98 deletions.
diff --git a/elements/button.js b/elements/button.js
@@ -9,6 +9,8 @@ const baseStyles = css`
   :host {
     text-transform: uppercase;
     letter-spacing: .025em;
+    cursor: pointer;
+    background-color: transparent;
     .btn-inner-wrapper {
       display: flex;
       flex-wrap: nowrap;
@@ -101,7 +103,7 @@ function buttonElement (innerText, opts) {
   }
 
   var buttonProps = xtend(defaultProps, opts)
-  buttonProps.class = 'pointer ' + baseStyles + ' ' + buttonProps.class
+  buttonProps.class = baseStyles + ' ' + buttonProps.class
 
   return html`
     <button ${buttonProps}>
@@ -119,8 +121,8 @@ function iconButton (innerText, opts) {
 
   var icon = opts.icon
   opts.class = (opts.class)
-    ? plainStyles + ' ' + opts.class
-    : plainStyles
+    ? opts.class
+    : ''
 
   var innerHTML = html`
     <div class="btn-inner-wrapper">
@@ -134,7 +136,8 @@ function iconButton (innerText, opts) {
   }
 
   var buttonProps = xtend(defaultProps, opts)
-  buttonProps.class = 'pointer ' + baseStyles + ' ' + buttonProps.class
+  buttonProps.class = baseStyles + ' ' + buttonProps.class
+  buttonProps.icon = null
 
   return html`
     <button ${buttonProps}>

diff --git a/elements/status.js b/elements/status.js
@@ -86,14 +86,28 @@ module.exports = function (dat, stats, send) {
   }
   var progressbarLine = (stats.state === 'loading')
     ? 'line-loading'
-    : (stats.state === 'paused')
+    : (stats.state === 'paused' || stats.state === 'stale')
       ? 'line-paused'
       : 'line-complete'
   var netStats = dat.stats.network
-  var progressText = (stats.progress === 100)
-    ? `Complete. ↑ ${speed(dat.network.uploadSpeed)}`
-    : (dat.network.connected) ? html`<span><span class="arrow">↓</span> ${speed(netStats.downloadSpeed)}<span class="arrow ml2">↑</span> ${speed(netStats.uploadSpeed)}</span>`
-    : 'waiting for peers…'
+
+  var progressText
+  switch (stats.state) {
+    case 'complete':
+      progressText = `Complete. ↑ ${speed(netStats.uploadSpeed)}`
+      break
+    case 'loading':
+      progressText = html`
+        <span>
+          <span class="arrow">↓</span> ${speed(netStats.downloadSpeed)}<span class="arrow ml2">↑</span> ${speed(netStats.uploadSpeed)}
+        </span>`
+      break
+    case 'stale':
+      progressText = 'waiting for peers…'
+      break
+    case 'paused':
+      progressText = 'Paused.'
+  }
   function speed (n) {
     return `${Math.round((n || 0) / 1024)}kB/s`
   }

diff --git a/elements/table.js b/elements/table.js
@@ -11,9 +11,6 @@ const icon = require('./icon')
 const table = css`
   :host {
     width: 100%;
-    tr:odd:hover td {
-      background: red;
-    }
     th,
     td {
       padding-right: .75rem;
@@ -68,9 +65,6 @@ const table = css`
     .row-action {
       height: 1.5rem;
       display: inline-block;
-      border: 0;
-      background: transparent;
-      text-align: center;
       color: var(--color-neutral-20);
       svg {
         vertical-align: middle;
@@ -92,9 +86,8 @@ const table = css`
     .icon-network {
       display: inline-block;
       color: var(--color-neutral-20);
-      vertical-align: middle;
-      width: 1.1em;
-      max-height: 1.6em;
+      vertical-align: sub;
+      width: 1em;
       svg {
         border: 1px solid red;
       }
@@ -128,7 +121,7 @@ function tableElement (dats, send) {
             <th class="cell-1"></th>
             <th class="tl cell-2">Link</th>
             <th class="tl cell-3">Status</th>
-            <th class="tl cell-4">Size</th>
+            <th class="tr cell-4">Size</th>
             <th class="tl cell-5">Peers</th>
             <th class="cell-6"></th>
           </tr>
@@ -145,7 +138,9 @@ function tableElement (dats, send) {
 
 function row (dat, send) {
   const stats = dat.stats && dat.stats.get()
-  var peers = dat.network.connected
+  var peers = (dat.network)
+    ? dat.network.connected
+    : 'N/A'
   var key = encoding.encode(dat.key)
   var title = dat.metadata.title || '#' + key
 
@@ -160,18 +155,37 @@ function row (dat, send) {
   // should be safe to be removed
   stats.progress = Math.min(stats.progress, 100)
 
-  stats.state = (dat.owner)
-    ? 'complete'
-    : (stats.progress === 100)
+  stats.state = (dat.network)
+    ? (dat.owner || stats.progress === 100)
       ? 'complete'
-      : (peers === 0)
-        ? 'paused'
-        : 'loading'
+      : (dat.network.peers)
+        ? 'loading'
+        : 'stale'
+    : 'paused'
+
+  const togglePause = () => send('repos:togglePause', dat)
 
   const hexContent = {
-    loading: icon('hexagon-down', {class: 'color-blue hover-color-blue-hover'}),
-    paused: icon('hexagon-x', {class: 'color-neutral-30 hover-color-neutral-40'}),
-    complete: icon('hexagon-up', {class: 'color-green hover-color-green-hover'})
+    loading: button.icon('loading', {
+      icon: icon('hexagon-down', {class: 'w2'}),
+      class: 'color-blue hover-color-blue-hover',
+      onclick: togglePause
+    }),
+    stale: button.icon('stale', {
+      icon: icon('hexagon-x', {class: 'w2'}),
+      class: 'color-neutral-30 hover-color-neutral-40',
+      onclick: togglePause
+    }),
+    paused: button.icon('paused', {
+      icon: icon('hexagon-resume', {class: 'w2'}),
+      class: 'color-neutral-30 hover-color-neutral-40',
+      onclick: togglePause
+    }),
+    complete: button.icon('complete', {
+      icon: icon('hexagon-up', {class: 'w2'}),
+      class: 'color-green hover-color-green-hover',
+      onclick: togglePause
+    })
   }[stats.state]
 
   var finderButton = button.icon('Open in Finder', {
@@ -214,7 +228,7 @@ function row (dat, send) {
   return html`
     <tr id=${key}>
       <td class="cell-1">
-        <div class="w2 pa1 center">
+        <div class="w2 center">
           ${hexContent}
         </div>
       </td>
@@ -237,7 +251,7 @@ function row (dat, send) {
       <td class="tr cell-4">
         ${(dat.archive.content) ? bytes(dat.archive.content.bytes) : 'N/A'}
       </td>
-      <td class="tr cell-5">
+      <td class="cell-5">
         ${networkIcon}
         ${peers}
       </td>