replicate model in client

master
strfry 4 years ago
parent b6510f2beb
commit 4f8ac69bb5

@ -1,5 +1,19 @@
//import { NeedsApp } from './needs'
var NeedsApp = require('./needs')
var {getModel} = require('./model')
var m = require('mithril')
// Wrapper component to pass in data:
getModel('http://exodus.strfry.org:82/hq_needs').then(model => {
var Component = {
// view: vnode => m('body', m(NeedsApp, {stores:model} ) )
view: vnode => m(NeedsApp, {stores:model})
}
// m.mount(document.body, Component)
m.mount(document.querySelector('#mountpoint'), Component)
})
console.log(NeedsApp)

@ -0,0 +1,25 @@
//import PouchDB from 'pouchdb'
var PouchDB = require('pouchdb');
function getModel(db_url) {
db_url = "http://exodus.strfry.org:82/hq_needs/"
var db = new PouchDB(db_url)
//var db = require('pouchdb')(db_url)
return new Promise((resolve, reject) => {
db.allDocs({include_docs: true}
).then(docs => {
var stores = docs.rows.map(doc => Object({store: doc.id, items: doc.doc.items}))
resolve(stores)
}).catch(reject)
})
}
var items = [
'Apfel',
'Birne',
'Schokoladenkuchen'
]
module.exports.getModel = getModel;

@ -11,54 +11,46 @@ var {Card, Checkbox, ListTile, List} = require('polythene-mithril')
//import {Card, Checkbox, ListTile, List} from 'polythene-mithril'
function Item() {
const model = {
name: 'Item',
confirmed: false
};
return {
view: vnode =>
m(ListTile, {title: vnode.attrs.name},
m(Checkbox, {
size: 'large',
value: model.confirmed,
onChange: state => vnode.state.checked = state.checked,
checked: state => vnode.state.checked
}) )
}
const Item = {
/*
oninit: vnode => {
const checked = stream(false)
vnode.state = { checked }
},
*/
view: vnode => {
console.log('Item.view', vnode)
return m(ListTile, {title: vnode.attrs.name},
m(Checkbox, {
size: 'large',
// value: model.confirmed,
defaultChecked: vnode.attrs.confirmed,
// onChange: state => vnode.attrs.confirmed = state.checked,
onChange: state => vnode.state.checked = state.checked,
// checked: state => vnode.attrs.confirmed
checked: vnode.state.checked,
}))}
}
// Top Component
function needsModel() {
return {
items: [],
newItem: stream('')
}
const StoreCard = {
view: vnode =>
m(Card, {content:
m(List, {
header: {title: vnode.attrs.store},
tiles: vnode.attrs.items.map(item => m(Item, item)),
}),
})
}
//export
function NeedsApp() {
const model = needsModel();
return {
view: (vnode) => {
console.log(vnode)
const attrs = vnode.attrs
return m(Card, {content:
m(List, {
header: {title: 'Supermarkt'},
tiles: attrs.items.map(item => m(Item(), {name: item.name}))
})
})
},
oninit: vnode => { console.log('oninit') },
oncreate: vnode => console.log('oncreate'),
onupdate: vnode => console.log('onupdate'),
onbeforeupdate: vnode => console.log('onbeforeupdate')
}
const NeedsApp = {
view: (vnode) => {
return m('div', {id: 'mountpoint'}, [vnode.attrs.stores.map(store => m(StoreCard, store))])
},
// oninit: vnode => { console.log('oninit') },
// oncreate: vnode => console.log('oncreate'),
// onupdate: vnode => console.log('onupdate'),
// onbeforeupdate: vnode => console.log('onbeforeupdate')
}

@ -10,5 +10,8 @@
"pouchdb": "^7.0.0",
"serve-static": "^1.13.2"
},
"type": "module"
"type": "module",
"devDependencies": {
"browserify": "^16.2.3"
}
}

@ -1,12 +1,13 @@
//import {NeedsApp} from './needs'
var NeedsApp = require('./needs')
//import PouchDB from 'pouchdb'
var PouchDB = require('pouchdb');
var { getModel } = require('./model')
//import polka from 'polka'
const polka = require('polka');
//import serve from 'serve-static'
const serve = require('serve-static')
//import m from 'mithril'
@ -14,55 +15,56 @@ var m = require('mithril')
//import render from 'mithril-node-render'
const render = require('mithril-node-render')
var items = [
'Apfel',
'Birne',
'Schokoladenkuchen'
]
function getItems(db_url) {
db_url = "http://exodus.strfry.org:82/hq_needs/"
var db = new PouchDB(db_url)
//var db = require('pouchdb')(db_url)
return new Promise((resolve, reject) => {
db.allDocs({include_docs: true, key: 'Supermarkt'}
).then(docs => {
console.log(docs.rows[0].doc.items)
resolve(docs.rows[0].doc.items)
}).catch(reject)
})
var browserify = require('browserify')
const ServerLayout = {
view: vnode => [
m('!doctype[html]'),
m('head',
m('meta', {charset: 'utf-8'}),
),
m('body',
m('script', {src: "https://unpkg.com/mithril@1.1.6/mithril.min.js"}),
m('script', {src: "https://unpkg.com/polythene-mithril/dist/polythene-mithril-standalone.js"}),
m('script', {src: './bundle.js', defer: true}),
vnode.children
)]
}
const scripts = '<!DOCTYPE html>' +
'<script src="./bundle.js"></script>' +
'<script src="https://unpkg.com/mithril@1.1.6/mithril.min.js"></script>' +
'<script src="https://unpkg.com/polythene-mithril/dist/polythene-mithril-standalone.js"></script>' +
'<script></script>'
//const scripts = '<!DOCTYPE html>' +
// '<script src="./bundle.js" defer></script>' +
// '<script src="https://unpkg.com/mithril@1.1.6/mithril.min.js"></script>' +
// '<script></script>'
function render_index(req, res) {
getItems().then(items => {
console.log("the items i found: ", items)
var template = m(NeedsApp(), {items: items})
getModel().then(model => {
console.log("the items i found: ", model)
var template = m(ServerLayout, m(NeedsApp, { stores: model}))
render(template).then(function (html) {
res.writeHead(200, {'Content-Type': 'text/html'})
res.end(scripts + html)
res.end(html)
})
})
}
// do a render run for fun
getItems().then(db_docs => {
// var template = m(NeedsApp(), {items: db_docs})
// render(template).then(html => console.log(html))
})
//import serve from 'serve-static'
var servejs = serve('.')
polka()
.use(servejs)
.get('/', render_index)
.get('/bundle.js', (req, res) => {
var bundler = browserify({debug: true})
bundler.add('./client.js')
console.log('bundling the bundle...')
bundler.bundle().pipe(res);
// res.end()
}).get('/', render_index)
.listen(8000, err => {
if (err) throw err;
console.log(`> Running on localhost:8000`);
});

Loading…
Cancel
Save