## 2017-06-06

 #Jens
 
We have and [index page](index.html) now!

Ok, the "new button" for creating new journal entries is back again! It sounds like not much, but I really missed it, because I am so lazy!

### Tabele, Visualization are working... Now we need data!

After implementing the table widget and finding [vis.js](http://visjs.org) as an easier to use graph visualizer we need now some data. We could either query all the data we want to work on every time again, or we could store some of it locally. And for this I stumbled uppon [dexie](http://dexie.org/) as a much easier to use frontend for the browser storage indexeddb. 


```JS
import Dexie from "https://unpkg.com/dexie@2.0.0-beta.11/dist/dexie.js"

var db = new Dexie("file_cache");
db.version(1).stores({
    files: 'url,name,type,version,content'
})

// db.files.clear()
// db.delete()

var baseURL = "https://lively-kernel.org/lively4/lively4-jens/doc/journal/"
async function cacheDirectory(baseURL) {
  var contents = (await fetch(url, {method: "OPTIONS"}).then( resp => resp.json())).contents
  for(let ea of contents) {
    let eaURL = baseURL.replace(/\/$/,"")  + "/" + ea.name
    
    if (await db.files.where("url").equals(eaURL).first()) {
      console.log("already in cache: " + eaURL)
    } else {
      let options = await fetch(eaURL, 
        {method: "OPTIONS", headers: {showversions: true}}).then(resp => resp.json())
      let response = await fetch(eaURL)
      let version = response.headers.get("fileversion")
      let contents = await response.text() 
      let name = eaURL.replace(/.*\//,"")

      let type = eaURL.replace(/.*\./,"")
      db.files.put({url: eaURL, name: name, type: type, content: contents, version: version, options: options})
      lively.notify("load " + eaURL)
    }
  }
}

// var eaURL = "https://lively-kernel.org/lively4/lively4-jens/doc/journal/2017-06-06.md"
cacheDirectory(baseURL)

```

And now we can work with the results:

```JS
import Dexie from "https://unpkg.com/dexie@2.0.0-beta.11/dist/dexie.js"

var db = new Dexie("file_cache");
db.version(1).stores({
    files: 'url,name,type,version,content,title'
})

var result= [["name", "size", "title"]]
db.files.count()
db.files.each(ea => {
  result.push([ea.name, ea.content.length, ea.title])
}).then(() => {
  lively.openComponentInWindow("lively-table").then(table => {
    table.setFromArray(result)
    table.style.overflow = "auto"
    table.column("size").forEach(cell => cell.classList.add("number"))
  })
})
```

 #META: make doits in this snipped...
```
<lively-script>
import boundEval from "src/client/bound-eval.js";
var code = this.parentElement.parentElement.querySelectorAll("code")[1].textContent
boundEval(code)
""
</lively-script>
```

Robert just mentioned [lively.storage](https://github.com/LivelyKernel/lively.storage) as an alternative wrapper for the indexedDB. lively.storage comes with a couchDB like interfaces and provides syncronization of data through [PouchDB](https://pouchdb.com/).

I tried out out to use both directly using unpkg:

```
import Storage from "https://unpkg.com/lively.storage/dist/lively.storage.js"

// or

import PouchDB from "https://unpkg.com/pouchdb-browser@6.2.0/lib/index.es.js"
```

But both failed, due to dependencies not present... So I have to install the via ``npm install``, I guess.