Paul Hammant's Blog: Angular and SVG and CouchDB (for an office seat map)
I’m trying to build a seat map for work. I’ve did it in OmniGraffle a year ago, but too many people have joined and/or moved seat for anyone to keep up. So be it - Angular and CouchDB will save the day. Because this is in public, I’ll do this as the seat layout of the Canadian parliament, which is readily available as SVG on wikipedia:
(link)
CouchDB
First install CouchDB:
brew install couchdb
Turn on CORS to allow the Angular page to GET/POST to http://localhost:5984/seats ->
# these seem to work for a number of permutations of default.ini I've seen recently.
perl -p -i -e 's/;enable_cors/enable_cors/' /usr/local/etc/couchdb/default.ini
perl -p -i -e 's/enable_cors = false/enable_cors = true/' /usr/local/etc/couchdb/default.ini
perl -p -i -e 's/;origins/origins/' /usr/local/etc/couchdb/default.ini
perl -p -i -e 's/origins = /origins = */' /usr/local/etc/couchdb/default.ini
perl -p -i -e 's/origins = \*\*/origins = */' /usr/local/etc/couchdb/default.ini
Launch it:
couchdb
Create a “seats” folder:
curl -X PUT http://127.0.0.1:5984/seats
Playing with the app
You don’t need to git-clone this, just make sure you have CouchDB running on localhost:5984.
Go here with your modern browser: https://paul-hammant.github.io/ng_office_plan/. No, it’s not pretty.
Click on a seat, and add a Name:
Try finding the name in the seat plan.
Hover over for a tooltip:
CouchDB is a great little store. The Angular usage of it, is more or less just plain Angular. The JavaScript is 52 lines of JavaScript. There is a lot of Copy/Paste in the HTML, but that could not be helped given the nature of the SVG. I tried to use ng-init for the seat number per <rect/>, but it did not work as expected. I’m misusing ngResource too for the original lookup or people in seats - I should have used ngHttp. I’m only a few hours on from first picking up CouchDB and I suspect there’s better queries I could do to turn the canonical …
{
"total_rows":4,
"offset":0,
"rows":[
{
"id":"3cafd676cee641c5ddb0a67273004b88",
"key":"3cafd676cee641c5ddb0a67273004b88",
"value": {
"rev":"9-046d22df6da3ec71425e0effdefaaa4a"
},
"doc": {
"_id":"3cafd676cee641c5ddb0a67273004b88",
"_rev":"9-046d22df6da3ec71425e0effdefaaa4a",
"seat":2,
"name": "Frank Herbert"
}
},
{
"id":"3cafd676cee641c5ddb0a67273007047",
"key":"3cafd676cee641c5ddb0a67273007047",
"value": {
"rev":"3-b50a85d92a99e0f7e26d6b2b1d579e81"
},
"doc": {
"_id":"3cafd676cee641c5ddb0a67273007047",
"_rev":"3-b50a85d92a99e0f7e26d6b2b1d579e81",
"seat":1,
"name":"Mardy Grass"
}
},
{
"id":"8535b8ac07f2a8a232ded759980032cb",
"key":"8535b8ac07f2a8a232ded759980032cb",
"value": {
"rev":"1-7e1087f1173055f4694a879be7cd7985"
},
"doc": {
"_id":"8535b8ac07f2a8a232ded759980032cb",
"_rev":"1-7e1087f1173055f4694a879be7cd7985",
"seat":29,
"name":""
}
},
{
"id":"8535b8ac07f2a8a232ded759980043cc",
"key":"8535b8ac07f2a8a232ded759980043cc",
"value": {
"rev":"2-294cb738259789c2e9428ad7d855892f"
},
"doc": {
"_id":"8535b8ac07f2a8a232ded759980043cc",
"_rev":"2-294cb738259789c2e9428ad7d855892f",
"seat":5,
"name":"Hey Big Spender!"
}
}
]}
… into …
{
"1": {
"_id":"3cafd676cee641c5ddb0a67273007047",
"_rev":"3-b50a85d92a99e0f7e26d6b2b1d579e81",
"seat":1,
"name":"Mardy Grass"
},
"2": {
"_id":"3cafd676cee641c5ddb0a67273004b88",
"_rev":"9-046d22df6da3ec71425e0effdefaaa4a",
"seat":2,
"name":"Frank Herbert"
},
"5": {
"_id":"8535b8ac07f2a8a232ded759980043cc",
"_rev":"2-294cb738259789c2e9428ad7d855892f",
"seat":5,
"name":"Hey Big Spender!"
},
"29": {
"_id":"8535b8ac07f2a8a232ded759980032cb",
"_rev":"1-7e1087f1173055f4694a879be7cd7985",
"seat":29,
"name":""
}
}
… that aids linking to the seats in the Angularized SVG.
I need examples to kickstart my understanding of a thing, so thanks to Sid Antxash and his angularjs-couchdb-sample.
If you do want to the ng_office_plan app locally, you will need to host it over http, which is easiest like so:
python -m SimpleHTTPServer