diff options
| author | Kjetil Orbekk <kjetil.orbekk@gmail.com> | 2015-09-11 20:49:42 -0400 |
|---|---|---|
| committer | Kjetil Orbekk <kjetil.orbekk@gmail.com> | 2015-09-11 20:49:42 -0400 |
| commit | 615779999bf652632870d4105fa7f0ba23af63cb (patch) | |
| tree | 3f00945ac6192795b0cb74ef39669f54669f16fe | |
| parent | 6768e16cfcc471674b0a65581cf1ea90ec2e6b98 (diff) | |
Add web resources.
| -rw-r--r-- | web/index.html | 67 | ||||
| -rw-r--r-- | web/style.css | 5 |
2 files changed, 72 insertions, 0 deletions
diff --git a/web/index.html b/web/index.html new file mode 100644 index 0000000..ccbfe53 --- /dev/null +++ b/web/index.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <!--[if lt IE 9]> + <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + <link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'> + <link rel="stylesheet" href="style.css"> + <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> + <script> + function addPending(albumName) { + function makeElement(name) { + return $('<li>' + name + ' (<a href="javascript:void(0)">edit</a>)</li>'); + } + var element = makeElement(albumName); + $(element).find('a').click(function() { + $(this).replaceWith($('<input type="text" autofocus="true">')); + }); + $('#pending-container').append(element); + } + function addPermanentAlbum(albumName) { + function makeElement(name) { + return $('<li>' + name + '</li>'); + } + $('#album-container').append(makeElement(albumName)); + } + + function fetchAlbums() { + $.ajax({ + url: "/api/albums", + success: function(data) { + $('#pending-error').empty(); + $('#pending-container').empty(); + $('#album-container').empty(); + console.log('Got albums:'); + console.log(data); + data.forEach(function (album) { + if (album.pending) { + addPending(album.name, album.pending); + } else { + addPermanentAlbum(album.name); + } + console.log('Added album ' + album.name); + }); + }, + error: function(unused, unusedStatus, error) { + $('#pending-container').empty(); + $('#pending-error').html( + '<p><b>Error</b> fetching pending albums: ' + error); + } + }); + } + $(document).ready(function() { + fetchAlbums(); + }); + </script> +</head> +<body> + <h1>Pending Photos</h1> + <span id="pending-error"></span> + <ul id="pending-container"></ul> + + <h1>Albums</h1> + <ul id="album-container"></ul> +</body> +</html> diff --git a/web/style.css b/web/style.css new file mode 100644 index 0000000..bf029e1 --- /dev/null +++ b/web/style.css @@ -0,0 +1,5 @@ +body { + padding-top = 5em; + padding-left = 5em; + font-family: 'Noto Sans', sans-serif; +} |