Put photos in the UI, I guess it is a side scroller for now

app.rb

@@ -135,11 +135,40 @@ class License < Sequel::Model
   one_to_many :photos
   unrestrict_primary_key
 
+  def icon
+    case url
+    when %r{/by-nc-sa/}
+      '<i class="cc cc-cc"></i><i class="cc cc-by"></i><i class="cc cc-nc"></i><i class="cc cc-sa"></i>'
+    when %r{/by-nc/}
+      '<i class="cc cc-cc"></i><i class="cc cc-by"></i><i class="cc cc-nc"></i>'
+    when %r{/by-nc-nd/}
+      '<i class="cc cc-cc"></i><i class="cc cc-by"></i><i class="cc cc-nc"></i><i class="cc cc-nd"></i>'
+    when %r{/by/}
+      '<i class="cc cc-cc"></i><i class="cc cc-by"></i>'
+    when %r{/by-sa/}
+      '<i class="cc cc-cc"></i><i class="cc cc-by"></i><i class="cc cc-sa"></i>'
+    when %r{/by-nd/}
+      '<i class="cc cc-cc"></i><i class="cc cc-by"></i><i class="cc cc-nd"></i>'
+    when %r{/commons/}, %r{/mark/}
+      '<i class="cc cc-pd-alt"></i>'
+    when %r{/zero/}
+      '<i class="cc cc-zero"></i>'
+    else
+      '©'
+    end
+  end
+
+  def icon_name
+    icon + ' ' + name
+  end
+
   def as_json(*)
     {
       id: id,
       name: name,
       url: url,
+      icon: icon,
+      iconname: icon_name,
     }
   end
 
@@ -211,9 +240,6 @@ get '/' do
       license.url = flickr_license.url
     end
   end if @licenses.count == 0
-  @show_licenses = [
-    OpenStruct.new(id: nil, name: 'show photos with any license'),
-  ] + @licenses
   @show_privacies = {
     all: 'show public and private photos',
     public: 'show only public photos',

public/js/app.js

@@ -24,7 +24,54 @@ $(function() {
         controlsDisabled(true);
         $.getJSON(path, params, function(data) {
             photosTag.children('.spinner').remove();
-            console.log(data);
+
+            for (let photo of data.photos) {
+                let privacy;
+                let privacyTag = $('<span class="tag-box">');
+
+                if (photo.public) {
+                    privacy = 'public';
+                    privacyTag.text('public');
+                } else if (photo.friend && photo.family) {
+                    privacy = 'friends_family';
+                    privacyTag.text('friends&family');
+                } else if (photo.friend) {
+                    privacy = 'friends';
+                    privacyTag.text('friends');
+                } else if (photo.family) {
+                    privacy = 'family';
+                    privacyTag.text('family');
+                } else {
+                    privacy = 'private';
+                    privacyTag.text('private');
+                }
+
+                let photoTag = $('<div column>').addClass('license-' + photo.license).addClass(privacy);
+                let ignoreTag = $('<button>').click(function() {
+                    console.log(photo);
+                });
+
+                if (photo.ignore) {
+                    photoTag.addClass('ignored');
+                    ignoreTag.text('ignored');
+                } else {
+                    ignoreTag.addClass('-bordered').text('ignore');
+                }
+
+                let license = licenses[photo.license];
+
+                photoTag.append($('<div class="card-box">').append([
+                    $('<a>', {href: photo.url, target: '_blank'}).append($('<img>', {title: photo.title, src: photo.img})),
+                    $('<div class="card-content">').append([
+                        $('<span>', {class: 'tag-box', title: license.name}).html(license.icon),
+                        '<br>',
+                        privacyTag,
+                        '<br>',
+                        ignoreTag,
+                    ]),
+                ]));
+                photosTag.append(photoTag);
+            }
 
             if (data.path) {
                 reloadPhotos({}, data.path);
@@ -97,10 +144,11 @@ $(function() {
     showIgnoredTag.change(showIgnored);
     selectLicenseTag.change(function() {
         applyLicenseTag.prop('disabled', selectLicenseTag.val() == '');
-        licenseLinkTag.empty();
         var license = licenses[selectLicenseTag.val()];
         if (license) {
-            licenseLinkTag.append(license.url ? $('<a>', {href: license.url, target: '_blank'}).text(license.name) : license.name);
+            licenseLinkTag.html(license.url ? $('<a>', {href: license.url, target: '_blank'}).html(license.iconname) : license.iconname);
+        } else {
+            licenseLinkTag.empty();
         }
     });
     applyLicenseTag.click(function() {

views/index.erb

@@ -3,8 +3,9 @@
 <div>
     <button disabled id="reload_photos" type="button">reload photos</button>
     <select disabled id="show_license">
-        <% @show_licenses.each do |show_license| %>
-            <option <% if show_license == @user.show_license %>selected <% end %>value="<%= show_license.id %>"><%= show_license.name %></option>
+        <option <% unless @user.show_license %>selected <% end %>value="">show photos with any license</option>
+        <% @licenses.each do |license| %>
+            <option <% if license == @user.show_license %>selected <% end %>value="<%= license.id %>"><%= license.name %></option>
         <% end %>
     </select>
     <select disabled id="show_privacy">
@@ -19,7 +20,7 @@
     </select>
 </div>
 
-<div id="photos" grid style="height: 66vh; overflow-y: auto;">
+<div grid id="photos" style="height: 66vh; overflow-y: auto;">
     <div class="spinner"></div>
 </div>
 

views/layout.erb

@@ -12,6 +12,13 @@
         <link rel="stylesheet" href="https://cdn.concisecss.com/v4.1/concise.min.css">
         <link rel="stylesheet" href="https://cdn.concisecss.com/concise-ui/v0.2/concise-ui.min.css">
         <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/blitzer/jquery-ui.css">
+        <link href="https://cdn.rawgit.com/cc-icons/cc-icons/1.2.1/css/cc-icons.min.css" rel="stylesheet">
+
+        <style>
+        i.cc {
+            margin-top: 0px;
+        }
+        </style>
     </head>
     <body>
         <header container>