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

Try RAD Studio for FREE!  It’s the fastest way to develop cross-platform Native Apps with flexible Cloud services and broad IoT connectivity. Start Your Trial Today!

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


Get Your Apps to Customers 5X Faster with RAD Studio. Brought to you in partnership with Embarcadero.

Topics:
angular js ,couchdb ,javascript

Published at DZone with permission of Paul Hammant. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}