Set and load display names in frontend

This commit is contained in:
Alex Ling 2020-04-03 12:07:09 +00:00
parent 51d19328be
commit 75edfcdb5b
6 changed files with 103 additions and 12 deletions

View File

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

View File

@ -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());
}
});
});

View File

@ -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]?

View File

@ -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

View File

@ -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>

View File

@ -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>