From 20d71bfa8185c5e640f679c9912cad986aef7c32 Mon Sep 17 00:00:00 2001
From: Alex Ling <hkalexling@gmail.com>
Date: Sun, 19 Apr 2020 16:11:23 +0000
Subject: [PATCH] Finish #30

---
 public/js/title.js  |  4 ++++
 src/views/title.ecr | 39 ++++++++++++++++++++++++---------------
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/public/js/title.js b/public/js/title.js
index 18a39ed..4febf2c 100644
--- a/public/js/title.js
+++ b/public/js/title.js
@@ -97,6 +97,10 @@ const edit = (eid) => {
 		const item = $(`#${eid}`);
 		url = item.find('img').attr('data-src');
 		displayName = item.find('.uk-card-title').attr('data-title');
+		$('#title-progress-control').attr('hidden', '');
+	}
+	else {
+		$('#title-progress-control').removeAttr('hidden');
 	}
 
 	cover.attr('data-src', url);
diff --git a/src/views/title.ecr b/src/views/title.ecr
index e8c39b5..a8f37c8 100644
--- a/src/views/title.ecr
+++ b/src/views/title.ecr
@@ -116,26 +116,35 @@
 				<input class="uk-input" type="text" name="display-name" id="display-name-field">
 			</div>
 		</div>
-		<label class="uk-form-label">Cover Image</label>
-		<div class="uk-grid">
-			<div class="uk-width-1-2@s">
- 				<img id="cover" data-title-cover="<%= title.cover_url %>" alt="" data-width data-height uk-img>
-			</div>
-			<div class="uk-width-1-2@s">
-				<div id="cover-upload" class="upload-field uk-placeholder uk-text-center uk-flex uk-flex-middle" data-title-id="<%= title.id %>">
-					<div>
-						<span uk-icon="icon: cloud-upload"></span>
-						<span class="uk-text-middle">Upload a cover image by dropping it here or</span>
-						<div uk-form-custom>
-							<input type="file" accept="image/*">
-							<span class="uk-link">selecting one</span>
+		<div class="uk-margin">
+			<label class="uk-form-label">Cover Image</label>
+			<div class="uk-grid">
+				<div class="uk-width-1-2@s">
+					<img id="cover" data-title-cover="<%= title.cover_url %>" alt="" data-width data-height uk-img>
+				</div>
+				<div class="uk-width-1-2@s">
+					<div id="cover-upload" class="upload-field uk-placeholder uk-text-center uk-flex uk-flex-middle" data-title-id="<%= title.id %>">
+						<div>
+							<span uk-icon="icon: cloud-upload"></span>
+							<span class="uk-text-middle">Upload a cover image by dropping it here or</span>
+							<div uk-form-custom>
+								<input type="file" accept="image/*">
+								<span class="uk-link">selecting one</span>
+							</div>
 						</div>
 					</div>
-				</div>
 
+				</div>
 			</div>
+			<progress id="upload-progress" class="uk-progress" value="0" max="100" hidden></progress>
+		</div>
+		<div id="title-progress-control" hidden>
+			<label class="uk-form-label">Progress</label>
+			<p class="uk-margin-remove-vertical">
+			<button id="read-btn" class="uk-button uk-button-default" onclick="updateProgress('<%= title.id %>', null, 1)">Mark all as read (100%)</button>
+			<button id="unread-btn" class="uk-button uk-button-default" onclick="updateProgress('<%= title.id %>', null, 0)">Mark all as unread (0%)</button>
+			</p>
 		</div>
-		<progress id="upload-progress" class="uk-progress" value="0" max="100" hidden></progress>
     </div>
   </div>
 </div>