Add UI support for updating title and date/time

2015-10-28 01:38:45 -07:00 · 2015-10-28 01:38:45 -07:00 · 036f477215
parent 62f6e56bdb
commit 036f477215
10 changed files with 191 additions and 74 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,4 @@
 **/.DS_Store
 **/*.pyc
 **/config.ini
+**/node_modules/**
--- a/app/app.js
+++ b/app/app.js
@ -12,6 +12,9 @@ var menubar = require('menubar'),
 // Once this main process completes the update it will send a 'update-photos-completed' event back to the renderer with information
 //  so a proper response can be displayed.
 ipc.on('update-photos', function(event, args) {
+  var params = args,
+      normalize
+
  console.log('update-photos')
  console.log(args)
  if(typeof(args['files']) === 'undefined' || args['files'].length === 0) {
@ -19,25 +22,38 @@ ipc.on('update-photos', function(event, args) {
    return;
  }

+  normalize = function(files) {
+    for(var i=0; i<files.length; i++) {
+      files[i] = files[i].normalize()
+    }
+    return files
+  }
+  files = normalize(args['files'])
+
  update_command = '/Users/jaisenmathai/dev/tools/elodie/update.py'
  if(typeof(args['location']) !== 'undefined') {
-    update_command += ' --location="' + args['location'] + '" "' + args['files'].join('" "') + '"';
-    console.log(update_command)
-    exec(update_command, function(error, stdout, stderr) {
-      console.log('out ' + stdout)
-      console.log('err ' + stderr)
-    });
-    event.sender.send('update-photos-success', args);
+    update_command += ' --location="' + args['location'] + '" "' + files.join('" "') + '"';
  } else if(typeof(args['album']) !== 'undefined') {
-    update_command += ' --album="' + args['album'] + '" "' + args['files'].join('" "') + '"';
-    console.log(update_command)
-    exec(update_command, function(error, stdout, stderr) {
-      console.log('out ' + stdout)
-      console.log('err ' + stderr)
-    });
-    event.sender.send('update-photos-success', args);
+    update_command += ' --album="' + args['album'] + '" "' + files.join('" "') + '"';
+  } else if(typeof(args['datetime']) !== 'undefined') {
+    update_command += ' --time="' + args['datetime'] + '" "' + files.join('" "') + '"';
+  } else if(typeof(args['title']) !== 'undefined') {
+    update_command += ' --title="' + args['title'] + '" "' + files.join('" "') + '"';
+  } else {
+    return
  }
  
+  console.log(update_command)
+  exec(update_command, function(error, stdout, stderr) {
+    console.log('out ' + stdout)
+    console.log('err ' + stderr)
+    params['error'] = error
+    params['stdout'] = '[' + stdout.replace("\n",',').replace(/\,+$/, '').replace("\n",'') + ']'
+    params['stderr'] = stderr
+    console.log('parsed')
+    console.log(params['stdout'])
+    event.sender.send('update-photos-success', params);
+  });
 })

 var mb = menubar(
@ -49,7 +65,7 @@ var mb = menubar(
          'location': 'location.html'
        },
        width: 400,
-        height: 350
+        height: 500
      }
    )

--- a/app/html/css/fontello/config.json
+++ b/app/html/css/fontello/config.json
@ -24,6 +24,18 @@
      "code": 59393,
      "src": "fontelico"
    },
+    {
+      "uid": "0f99ab40ab0b4d64a74f2d0deeb03e42",
+      "css": "video",
+      "code": 59397,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "c5845105a87df2ee1999826d90622f6a",
+      "css": "title",
+      "code": 59399,
+      "src": "fontawesome"
+    },
    {
      "uid": "87d337fee4866c2c28f6082994ce0f41",
      "css": "map",
@ -35,6 +47,12 @@
      "css": "book",
      "code": 59394,
      "src": "modernpics"
+    },
+    {
+      "uid": "64abb7c56aefca89046bb69f7251d2e2",
+      "css": "calendar",
+      "code": 59398,
+      "src": "elusive"
    }
  ]
 }
--- a/app/html/css/fontello/css/elodie.css
+++ b/app/html/css/fontello/css/elodie.css
@ -1,10 +1,10 @@
@font-face {
  font-family: 'elodie';
-  src: url('../font/elodie.eot?22328268');
-  src: url('../font/elodie.eot?22328268#iefix') format('embedded-opentype'),
-       url('../font/elodie.woff?22328268') format('woff'),
-       url('../font/elodie.ttf?22328268') format('truetype'),
-       url('../font/elodie.svg?22328268#elodie') format('svg');
+  src: url('../font/elodie.eot?4814273');
+  src: url('../font/elodie.eot?4814273#iefix') format('embedded-opentype'),
+       url('../font/elodie.woff?4814273') format('woff'),
+       url('../font/elodie.ttf?4814273') format('truetype'),
+       url('../font/elodie.svg?4814273#elodie') format('svg');
  font-weight: normal;
  font-style: normal;
 }
@ -14,7 +14,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'elodie';
-    src: url('../font/elodie.svg?22328268#elodie') format('svg');
+    src: url('../font/elodie.svg?4814273#elodie') format('svg');
  }
 }
 */
@ -59,3 +59,6 @@
 .icon-book:before { content: '\e802'; } /* '' */
 .icon-map:before { content: '\e803'; } /* '' */
 .icon-unhappy:before { content: '\e804'; } /* '' */
+.icon-video:before { content: '\e805'; } /* '' */
+.icon-calendar:before { content: '\e806'; } /* '' */
+.icon-title:before { content: '\e807'; } /* '' */
--- a/app/html/css/fontello/css/font/elodie.svg
+++ b/app/html/css/fontello/css/font/elodie.svg
@ -1,16 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2015 by original authors @ fontello.com</metadata>
-<defs>
-<font id="elodie" horiz-adv-x="1000" >
-<font-face font-family="elodie" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
-<missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="happy" unicode="&#xe800;" d="m261 800c-60 0-109-65-109-144 0-80 49-145 109-145s110 65 110 145c0 79-49 144-110 144z m477 0c-61 0-110-65-110-144 0-80 49-145 110-145 60 0 110 65 110 145 0 79-50 144-110 144z m208-599c-13 0-27-5-37-16-4-4-8-8-12-12-111-109-253-164-396-165-142-2-285 50-396 155l-3 3-12 12c-21 21-54 20-75-1-20-21-20-55 1-76 3-4 8-8 14-14l3-3c132-124 301-186 469-184 169 1 337 67 468 195 5 5 9 10 14 14 20 22 20 56-1 77-10 10-23 15-37 15z" horiz-adv-x="999" />
-<glyph glyph-name="spin" unicode="&#xe801;" d="m46 144l0 0c0 0-1 0-1 0-8 18-15 37-21 55-6 19-11 38-15 58-19 99-8 203 35 298 3 6 10 8 15 5 1 0 2 0 2-1l0 0 80-59c5-3 6-9 4-14-5-12-9-25-12-38-4-12-7-26-9-39-11-67-3-137 23-201 2-5 0-10-4-13l0 0-80-56c-5-4-12-3-16 3-1 0-1 1-1 2l0 0z m120 574l0 0c0 1 0 1 0 1 15 13 30 25 46 37 16 11 33 22 51 31 89 50 192 72 297 60 6-1 10-6 10-13 0-1-1-1-1-2l0 0-31-94c-2-5-8-8-13-7-13 0-27 0-40 0-14-1-27-2-40-4-68-11-133-40-186-84-4-3-10-3-14 0l0 0-79 58c-5 3-6 11-2 16 0 0 1 1 2 1l0 0z m588 65l0 0c0 0 1 0 1 0 17-10 34-21 50-32 16-12 31-25 46-38 74-69 127-160 148-262 2-6-2-12-9-13-1 0-1 0-2 0l0 0-100 1c-5 0-10 4-11 9-3 13-8 26-12 38-5 12-10 25-17 36-31 61-78 113-137 150-5 3-6 8-5 13l0 0 31 92c2 6 9 9 15 7 1 0 2-1 2-1l0 0z m244-535l0 0c0 0 0 0 0 0-4-20-9-39-15-57-7-19-14-37-22-55-44-92-114-170-205-221-6-3-13-1-16 4 0 1-1 2-1 2l0 0-30 94c-2 6 1 12 6 14 11 7 22 15 32 23 11 9 21 18 30 27 49 48 84 109 101 176 2 5 6 8 11 8l0 0 98-1c6 0 11-5 11-11 0-1 0-2 0-3l0 0z m-438-395l0 0c0 0 0 0 0 0-20-2-40-3-60-3-20 0-40 1-59 4-102 12-198 54-276 125-5 4-5 11 0 16 0 0 1 1 1 1l0 0 81 58c5 3 12 2 16-2 10-8 20-16 32-23 11-7 22-14 34-20 62-31 131-45 200-41 6 0 10-3 12-8l0 0 29-92c2-6-1-12-7-14-1-1-2-1-3-1l0 0z" horiz-adv-x="1000" />
-<glyph glyph-name="book" unicode="&#xe802;" d="m600 630l35 0 0-672-502 0c-74 0-133 52-133 128l0 581c0 41 34 75 75 75l465 0 0-576-407 0c-52 0-88-28-88-78l0-2c0-50 36-83 88-83l467 0 0 627z m-60-562l-402 0c-12 0-22 7-22 19 0 10 10 16 22 16l402 0 0-35z" horiz-adv-x="635" />
-<glyph glyph-name="map" unicode="&#xe803;" d="m53-93q-23 0-38 16t-15 36l0 521q0 21 15 36l235 235q14 14 34 15t35-11l224-179 202 201q25 25 57 10t32-47l0-520q0-21-16-38l-234-233q-14-14-35-15t-35 11l-224 179-201-202q-15-15-36-15z m51 178q152 150 156 152l0 378-156-156 0-374z m215 149l202-162 0 389-208 165 0-389q1-1 3-2t3-1z m410 7l0 374q-153-151-156-154l0-376z" horiz-adv-x="834" />
-<glyph glyph-name="emo-unhappy" unicode="&#xe804;" d="m261 800c-60 0-109-65-109-144 0-80 49-145 109-145s110 65 110 145c0 79-49 144-110 144z m477 0c-61 0-110-65-110-144 0-80 49-145 110-145 60 0 110 65 110 145 0 79-50 144-110 144z m-244-599c-165 0-331-62-461-184l-3-3c-6-5-11-10-14-14-21-21-21-55-1-76 21-21 54-21 75-1l12 12 3 3c111 105 254 157 396 155 143-1 285-56 396-165 4-4 8-8 12-12 20-21 54-21 74-1 21 21 21 55 1 77-5 5-9 10-14 14-131 129-299 194-468 195-3 0-6 0-8 0z" horiz-adv-x="999" />
-</font>
-</defs>
-</svg>
--- a/app/html/css/fontello/font/elodie.svg
+++ b/app/html/css/fontello/font/elodie.svg
@ -11,6 +11,9 @@
 <glyph glyph-name="book" unicode="&#xe802;" d="m600 630l35 0 0-672-502 0c-74 0-133 52-133 128l0 581c0 41 34 75 75 75l465 0 0-576-407 0c-52 0-88-28-88-78l0-2c0-50 36-83 88-83l467 0 0 627z m-60-562l-402 0c-12 0-22 7-22 19 0 10 10 16 22 16l402 0 0-35z" horiz-adv-x="635" />
 <glyph glyph-name="map" unicode="&#xe803;" d="m53-93q-23 0-38 16t-15 36l0 521q0 21 15 36l235 235q14 14 34 15t35-11l224-179 202 201q25 25 57 10t32-47l0-520q0-21-16-38l-234-233q-14-14-35-15t-35 11l-224 179-201-202q-15-15-36-15z m51 178q152 150 156 152l0 378-156-156 0-374z m215 149l202-162 0 389-208 165 0-389q1-1 3-2t3-1z m410 7l0 374q-153-151-156-154l0-376z" horiz-adv-x="834" />
 <glyph glyph-name="unhappy" unicode="&#xe804;" d="m261 800c-60 0-109-65-109-144 0-80 49-145 109-145s110 65 110 145c0 79-49 144-110 144z m477 0c-61 0-110-65-110-144 0-80 49-145 110-145 60 0 110 65 110 145 0 79-50 144-110 144z m-244-599c-165 0-331-62-461-184l-3-3c-6-5-11-10-14-14-21-21-21-55-1-76 21-21 54-21 75-1l12 12 3 3c111 105 254 157 396 155 143-1 285-56 396-165 4-4 8-8 12-12 20-21 54-21 74-1 21 21 21 55 1 77-5 5-9 10-14 14-131 129-299 194-468 195-3 0-6 0-8 0z" horiz-adv-x="999" />
+<glyph glyph-name="video" unicode="&#xe805;" d="m1000 654v-608q0-23-22-32-7-3-14-3-15 0-25 10l-225 225v-92q0-67-47-114t-113-47h-393q-67 0-114 47t-47 114v392q0 67 47 114t114 47h393q66 0 113-47t47-114v-92l225 225q10 10 25 10 7 0 14-3 22-9 22-32z" horiz-adv-x="1000" />
+<glyph glyph-name="calendar" unicode="&#xe806;" d="m0-150l0 649 893 0 0-649-893 0z m0 705l0 221 109 0 0-141 200 0 0 141 275 0 0-141 199 0 0 141 110 0 0-221-893 0z m168 139l0 156 82 0 0-156-82 0z m59-619q0-112 123-112 47 0 84 32 39 31 39 80 0 68-78 90 48 15 64 48 12 28-2 73-27 62-107 62-51 0-86-26t-37-77l72 0q0 45 49 46 43 0 45-52 0-49-84-47l0-57q48 0 68-8 23-11 23-46 0-57-54-61-43 0-47 55l-72 0z m281 146q49 14 88 47l0-297 70 0 0 371-64 0q-38-37-94-58l0-63z m135 473l0 156 82 0 0-156-82 0z" horiz-adv-x="893" />
+<glyph glyph-name="title" unicode="&#xe807;" d="m713 745v-41q0-16-10-34t-24-18q-28 0-30-1-15-3-18-17-2-6-2-36v-643q0-14-10-24t-24-10h-60q-14 0-24 10t-10 24v680h-80v-680q0-14-9-24t-25-10h-60q-14 0-24 10t-10 24v277q-82 7-137 33-70 33-107 100-36 65-36 145 0 92 50 159 49 66 116 89 62 21 233 21h267q14 0 24-10t10-24z" horiz-adv-x="714.3" />
 </font>
 </defs>
 </svg>
--- a/app/html/css/styles.css
+++ b/app/html/css/styles.css
@ -22,20 +22,41 @@ body {
 }

 .content {
-  padding: 10px;
+  padding: 0 10px 10px 10px;
 }

-.content>.location {
-  padding-bottom: 20px;
+.content > div {
  border-bottom: solid 1px #eee;
+  padding: 10px 0;
 }
-.content>.album {
-  padding-top: 15px;
-  padding-bottom: 20px;
-  border-bottom: solid 1px #eee;
+
+.status {
+  display: none;
+}
+
+.status ul {
+  list-style-type:none;
+  padding:0;
+  margin:20px 0 0;
+  font-size:.8em;
+}
+
+.status ul li {
+  padding:0;
+  margin:0 0 10px;
+}
+
+.status ul li .destination {
+  width: 100%;
+  font-size: .75em;
+  padding-top: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 .preview {
+  position: relative;
  padding: 20px 0;
 }

@ -43,12 +64,23 @@ body {
  display: inline-block;
  border-radius: 2px;
  border: solid 1px #ddd;
+  margin: 1px;
  width: 42px;
  height: 42px;
  background-position: center center;
  background-size: cover;
 }

+.preview .center-cropped.video:before {
+  font-family: "elodie";
+  color: #eee;
+  content: '\e805';
+  position: absolute;
+  margin-top: 6px;
+  margin-left: 8px;
+  font-size: 1.5em;
+}
+
 i {
  color: #555;
 }
@ -74,9 +106,17 @@ input, button {
  border-radius: 3px;
 }

+
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+    outline: none;
+}
+
 input {
  padding: 4px;
-  width: 300px;
+  width: 250px;
 }

 button {
--- a/app/html/js/handlers.js
+++ b/app/html/js/handlers.js
@ -12,8 +12,10 @@ ipc.on('preview', function(files) {
  handlers.renderPreview(files)
 });
 ipc.on('update-photos-success', function(args) {
+  var response = JSON.parse(args['stdout'])
  handlers.setSuccessTitle()
  handlers.removeProgressIcons()
+  handlers.updateStatus(response)
 });

 function Broadcast() {
@ -25,31 +27,28 @@ function Broadcast() {
 function Handlers() {
  var self = this;
  var broadcast = new Broadcast();
-  this.addAlbum = function(ev) {
-    var alb = document.querySelector('input[id="album-field"]').value,
-        progress = document.querySelector('button[class~="addAlbum"] i');
+  this.updatePhotos = function(ev) {
+    var el = ev.target,
+        cls = el.className,
+        params;

-    progress.className = 'icon-spin animate-spin'
-    if(typeof(__process__.files) !== 'object' && __process__.files.length === 0) {
+    el.getElementsByTagName('i')[0].className = 'icon-spin animate-spin';
+
+    params = {};
+    if(cls.search('add-location') !== -1) {
+      params['location'] = document.querySelector('input[id="location-field"]').value;
+    } else if(cls.search('add-datetime') !== -1) {
+      params['datetime'] = document.querySelector('input[id="datetime-field"]').value;
+    } else if(cls.search('add-album') !== -1) {
+      params['album'] = document.querySelector('input[id="album-field"]').value;
+    } else if(cls.search('add-title') !== -1) {
+      params['title'] = document.querySelector('input[id="title-field"]').value;
+    } else {
      return;
    }

-    console.log(__process__.files);
-    progress.className = 'icon-spin animate-spin'
-    broadcast.send('update-photos', {album: alb, files: __process__.files});
-  };
-
-  this.addLocation = function(ev) {
-    var loc = document.querySelector('input[id="location-field"]').value,
-        progress = document.querySelector('button[class~="addLocation"] i');
-
-    if(typeof(__process__.files) !== 'object' && __process__.files.length === 0) {
-      return;
-    }
-
-    console.log(__process__.files);
-    progress.className = 'icon-spin animate-spin'
-    broadcast.send('update-photos', {location: loc, files: __process__.files});
+    params['files'] = __process__.files;
+    broadcast.send('update-photos', params);
  };

  this.dispatch = function(ev) {
@ -70,8 +69,15 @@ function Handlers() {

  this.renderPreview = function(files) {
    html = '<label>You selected ' + (files.length > 1 ? 'these photos' : 'this photo') + '</label>'
-    for(var i=0; i<files.length; i++) {
+    for(var i=0; i<files.length && i<16; i++) {
+      if(files[i].match(/(mov|mp4|3gp|avi)/i) === null) {
        html += '<div class="center-cropped" style="background-image:url(\'file://'+files[i]+'\');" title="'+files[i]+'"></div>'
+      } else {
+        html += '<div class="center-cropped video"></div>'
+      }
+    }
+    if(files.length >= 16) {
+      html += '<br>...and ' + (files.length -16) + ' more.'
    }
    document.querySelector('.preview').innerHTML = html
  };
@ -79,6 +85,31 @@ function Handlers() {
  this.setSuccessTitle = function() {
    var el = document.querySelector('.titlebar i').className = 'icon-happy'
  };
+
+  this.updateStatus = function(response) {
+    var el = document.querySelector('.status'),
+        source, destination, html;
+
+    console.log('update status')
+    console.log(response);
+    
+    if(response.length > 0) {
+      html = '<label>Status</label><ul>';
+      for(i=0; i<response.length; i++) {
+        source = response[i]['source'] || null;
+        destination = response[i]['destination'] || null;
+        sourceFileName = source.substr(source.lastIndexOf('/')+1);
+        if(destination === null) {
+          html += '<li><i class="icon-unhappy"></i> ' + sourceFileName + '</li>';
+        } else {
+          html += '<li><i class="icon-happy"></i> ' + sourceFileName + '<div class="destination" title="'+destination+'">'+destination+'</div></li>';
+        }
+      }
+      html += '</ul>';
+      el.innerHTML = html;
+      el.style.display = 'block';
+    }
+  };
 }
 var handlers = new Handlers();
 document.addEventListener('click', handlers.dispatch);
--- a/app/html/location.html
+++ b/app/html/location.html
@ -15,19 +15,36 @@
      <div class="location">
        <label for="location-field"><i class="icon-map"></i>Change geolocation</label>
        <input id="location-field" type="text" placeholder="i.e. Sunnyvale, CA">
-        <button class="push addLocation">Update<i></i></button>
+        <button class="push add-location updatePhotos">Update<i></i></button>
+      </div>
+      <div class="datetime">
+        <label for="datetime-field"><i class="icon-calendar"></i>Change date and time</label>
+        <input id="datetime-field" type="text" placeholder="i.e. 2015-07-31">
+        <button class="push add-datetime updatePhotos">Update<i></i></button>
+      </div>
+      <div class="title">
+        <label for="title-field"><i class="icon-title"></i>Change title</label>
+        <input id="title-field" type="text" placeholder="i.e. Elodie smiling at dinner">
+        <button class="push add-title updatePhotos">Update<i></i></button>
      </div>
      <div class="album">
        <label for="album-field"><i class="icon-book"></i>Create album</label>
-        <input id="album-field" type="text" placeholder="i.e. Elocie's Birthday Party">
-        <button class="push addAlbum">Update<i></i></button>
+        <input id="album-field" type="text" placeholder="i.e. Elodie's Birthday Party">
+        <button class="push add-album updatePhotos">Update<i></i></button>
+      </div>
+      <div class="status">
+        <!--<ul>
+          <li>IMG_6365.JPG <i class="icon-happy"></i><div class="destination" title="/Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg">/Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg</div></li>
+          <li>IMG_1234.JPG <i class="icon-unhappy"></i><div class="destination" title="/Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg">/Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg</div></li>
+          </ul>-->
      </div>
      <div class="preview">
        <!--<div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
-        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
+        <div class="center-cropped video"></div>
+        <div class="center-cropped video"></div>
        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>
@ -38,5 +55,8 @@
        <div class="center-cropped" style="background-image:url('file:///Users/jaisenmathai/Downloads/media/2015-10-Oct/Sunnyvale/2015-10-17_01-03-50-img_6365.jpg');"></div>-->
      </div>
    </div>
+    <script>
+      document.getElementById('location-field').focus();
+    </script>
  </body>
 </html>
--- a/update.py
+++ b/update.py
@ -20,6 +20,7 @@ from elodie.localstorage import Db

 def parse_arguments(args):
    config = {
+        'title': None,
        'time': None,
        'location': None,
        'album': None,
@ -107,7 +108,7 @@ def main(config, args):

 db = Db()
 filesystem = FileSystem()
-args = arguments.parse(sys.argv[1:], None, ['album=','time=','location=','process='], './update.py --time=<string time> --location=<string location> --process=no file1 file2...fileN')
+args = arguments.parse(sys.argv[1:], None, ['title=','album=','time=','location=','process='], './update.py --time=<string time> --location=<string location> --process=no file1 file2...fileN')
 config = parse_arguments(args)

 if __name__ == '__main__':