Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Building a Seat Map Using Angular, SVG, and Couchdb

DZone's Guide to

Building a Seat Map Using Angular, SVG, and Couchdb

Want to learn how to build a seat map using Angular and CouchDB? Read on and learn how it's done.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

I’m trying to build a seat map for work. I did it in OmniGraffle a year ago, but too many people have joined and/or moved seats 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

perl -p -i -e 's/;enable_cors = true/enable_cors = true/' /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: http://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 want to run the ng_office_plan app locally, you will need to host it over http, which is easiest like so:

python -m SimpleHTTPServer


Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
angular js ,couchdb ,javascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}