Set and load display names in frontend

public/css/mango.css

@@ -56,3 +56,6 @@
 td > .uk-dropdown {
 	white-space: pre-line;
 }
+.title-rename > .uk-inline {
+	width: 100%;
+}

public/js/title.js

@@ -15,7 +15,10 @@ function showModal(encodedPath, pages, percentage, encodedeTitle, encodedEntryTi
 	if (percentage === 100) {
 		$('#read-btn').attr('hidden', '');
 	}
-	$('#modal-title').text(entry);
+	$('#modal-title').find('span').text(entry);
+	$('#modal-title').next().attr('data-id', titleID);
+	$('#modal-title').next().attr('data-entry-id', entryID);
+	$('#modal-title').next().find('.title-rename-field').val(entry);
 	$('#path-text').text(zipPath);
 	$('#pages-text').text(pages + ' pages');
 
@@ -43,3 +46,60 @@ function updateProgress(titleID, entryID, page) {
 		}
 	});
 }
+
+const rename = ele => {
+	const h2 = $(ele).parent();
+
+	$(h2).attr('hidden', true);
+	$(h2).next().removeAttr('hidden');
+};
+
+const renameSubmit = ele => {
+	const group = $(ele).closest('.title-rename');
+	const id = $(group).attr('data-id');
+	const eid = $(group).attr('data-entry-id');
+	const name = $(ele).next().val();
+
+	console.log(name);
+
+	$(group).attr('hidden', true);
+	$(group).prev().removeAttr('hidden');
+
+	if (name.length === 0) {
+		alert('danger', 'The display name should not be empty');
+		return;
+	}
+
+	$(group).prev().find('span').text(name);
+
+	const query = $.param({ entry: eid });
+	let url = `/api/admin/display_name/${id}/${name}`;
+	if (eid)
+		url += `?${query}`;
+
+	$.ajax({
+		type: 'POST',
+		url: url,
+		contentType: "application/json",
+		dataType: 'json'
+	})
+	.done(data => {
+		console.log(data);
+		if (data.error) {
+			alert('danger', `Failed to update display name. Error: ${data.error}`);
+			return;
+		}
+		location.reload();
+	})
+	.fail((jqXHR, status) => {
+		alert('danger', `Failed to update display name. Error: [${jqXHR.status}] ${jqXHR.statusText}`);
+	});
+};
+
+$(() => {
+	$('.uk-input.title-rename-field').keyup(event => {
+		if (event.keyCode === 13) {
+			renameSubmit($(event.currentTarget).prev());
+		}
+	});
+});

src/library.cr

@@ -51,6 +51,14 @@ class Entry
 		end
 	end
 
+	def display_name
+		@book.display_name @title
+	end
+
+	def encoded_display_name
+		URI.encode display_name
+	end
+
 	def read_page(page_num)
 		Zip::File.open @zip_path do |file|
 			page = file.entries
@@ -191,6 +199,10 @@ class Title
 		dn.empty? ? @title : dn
 	end
 
+	def encoded_display_name
+		URI.encode display_name
+	end
+
 	def display_name(entry_name)
 		info = TitleInfo.new @dir
 		dn = info.entry_display_name[entry_name]?

src/routes/api.cr

@@ -94,13 +94,13 @@ class APIRouter < Router
 			begin
 				title = (@context.library.get_title env.params.url["title"])
 					.not_nil!
-				entry = title.get_entry env.params.query["entry"]?
 				name = env.params.url["name"]
-
+				entry = env.params.query["entry"]?
 				if entry.nil?
 					title.set_display_name name
 				else
-					title.set_display_name entry.title, name
+					eobj = title.get_entry entry
+					title.set_display_name eobj.not_nil!.title, name
 				end
 			rescue e
 				@context.error e

src/views/index.ecr

@@ -36,7 +36,7 @@
 			<%- if t.entries.size > 0 -%>
               <div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
 			<%- end -%>
-			<h3 class="uk-card-title break-word" data-title="<%= t.title.gsub("\"", "&quot;") %>"><%= t.title %></h3>
+			<h3 class="uk-card-title break-word" data-title="<%= t.display_name.gsub("\"", "&quot;") %>"><%= t.display_name %></h3>
               <p><%= t.size %> entries</p>
             </div>
         </div>

src/views/title.ecr

@@ -1,10 +1,18 @@
-<h2 class=uk-title><%= title.title %></h2>
+<div>
+	<h2 class=uk-title><span><%= title.display_name %></span>  <a onclick="rename(this)" class="uk-icon-button" uk-icon="icon:pencil"></a></h2>
+	<div class="uk-margin title-rename" data-id="<%= title.id %>" hidden>
+		<div class="uk-inline">
+			<a class="uk-form-icon uk-form-icon-flip" onclick="renameSubmit(this)" uk-icon="icon:check"></a>
+			<input class="uk-input title-rename-field" type="text" value="<%= title.display_name.gsub("\"", "&quot;") %>">
+		</div>
+	</div>
+</div>
 <ul class="uk-breadcrumb">
 	<li><a href="/">Library</a></li>
 	<%- title.parents.each do |t| -%>
-	<li><a href="/book/<%= t.id %>"><%= t.title %></a></li>
+	<li><a href="/book/<%= t.id %>"><%= t.display_name %></a></li>
 	<%- end -%>
-	<li class="uk-disabled"><a><%= title.title %></a></li>
+	<li class="uk-disabled"><a><%= title.display_name %></a></li>
 </ul>
 <p class="uk-text-meta"><%= title.size %> entries found</p>
 <div class="uk-grid-small" uk-grid>
@@ -42,7 +50,7 @@
 			<%- end -%>
             </div>
             <div class="uk-card-body">
-			<h3 class="uk-card-title break-word" data-title="<%= t.title.gsub("\"", "&quot;") %>"><%= t.title %></h3>
+			<h3 class="uk-card-title break-word" data-title="<%= t.display_name.gsub("\"", "&quot;") %>"><%= t.display_name %></h3>
               <p><%= t.size %> entries</p>
             </div>
         </div>
@@ -52,13 +60,13 @@
   <%- title.entries.each_with_index do |e, i| -%>
   <div class="item" data-mtime="<%= e.mtime.to_unix %>" data-progress="<%= percentage[i] %>">
       <a class="acard">
-		  <div class="uk-card uk-card-default" onclick="showModal(&quot;<%= e.encoded_path %>&quot;, '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, &quot;<%= title.encoded_title %>&quot;, &quot;<%= e.encoded_title %>&quot;, '<%= e.title_id %>', '<%= e.id %>')">
+		  <div class="uk-card uk-card-default" onclick="showModal(&quot;<%= e.encoded_path %>&quot;, '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, &quot;<%= title.encoded_display_name %>&quot;, &quot;<%= e.encoded_display_name %>&quot;, '<%= e.title_id %>', '<%= e.id %>')">
           <div class="uk-card-media-top">
             <img data-src="<%= e.cover_url %>" alt="" data-width data-height uk-img>
           </div>
           <div class="uk-card-body">
             <div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
-			<h3 class="uk-card-title break-word" data-title="<%= e.title.gsub("\"", "&quot;") %>"><%= e.title %></h3>
+			<h3 class="uk-card-title break-word" data-title="<%= e.display_name.gsub("\"", "&quot;") %>"><%= e.display_name %></h3>
               <p><%= e.pages %> pages</p>
           </div>
       </div>
@@ -71,7 +79,15 @@
   <div class="uk-modal-dialog uk-margin-auto-vertical">
     <button class="uk-modal-close-default" type="button" uk-close></button>
     <div class="uk-modal-header">
-      <h3 class="uk-modal-title break-word" id="modal-title"></h3>
+	<div>
+		<h3 class="uk-modal-title break-word" id="modal-title"><span></span>  <a onclick="rename(this)" class="uk-icon-button" uk-icon="icon:pencil"></a></h3>
+		<div class="uk-margin title-rename" data-id="" data-entry-id="" hidden>
+			<div class="uk-inline">
+				<a class="uk-form-icon uk-form-icon-flip" onclick="renameSubmit(this)" uk-icon="icon:check"></a>
+				<input class="uk-input title-rename-field" type="text" value="">
+			</div>
+		</div>
+	</div>
       <p class="uk-text-meta uk-margin-remove-bottom break-word" id="path-text"></p>
       <p class="uk-text-meta uk-margin-remove-top" id="pages-text"></p>
     </div>