2018-02-18 03:12:34 +00:00
|
|
|
<!DOCTYPE html5>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
{% import "header.html" as header %}
|
|
|
|
|
{% import "clipboard_tray.html" as clipboard_tray %}
|
|
|
|
|
<title>Clipboard</title>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
2018-02-24 20:51:36 +00:00
|
|
|
<link rel="stylesheet" href="/static/css/common.css">
|
2018-02-24 08:58:43 +00:00
|
|
|
<link rel="stylesheet" href="/static/css/photo_card.css">
|
2018-02-24 09:06:27 +00:00
|
|
|
<link rel="stylesheet" href="/static/css/clipboard_tray.css">
|
2018-02-24 20:51:36 +00:00
|
|
|
<script src="/static/js/common.js"></script>
|
2018-09-23 23:53:49 +00:00
|
|
|
<script src="/static/js/api.js"></script>
|
2018-07-14 21:19:13 +00:00
|
|
|
<script src="/static/js/hotkeys.js"></script>
|
2018-09-23 22:17:31 +00:00
|
|
|
<script src="/static/js/photo_clipboard.js"></script>
|
2018-07-23 03:45:16 +00:00
|
|
|
<script src="/static/js/tag_autocomplete.js"></script>
|
2018-02-18 03:12:34 +00:00
|
|
|
|
|
|
|
|
<style>
|
2018-10-22 01:46:27 +00:00
|
|
|
#content_body
|
2018-02-21 04:20:20 +00:00
|
|
|
{
|
2018-02-22 23:23:57 +00:00
|
|
|
display: grid;
|
2018-10-22 01:46:27 +00:00
|
|
|
grid-template:
|
|
|
|
|
"left right" 1fr
|
|
|
|
|
/1fr 300px;
|
2018-02-22 23:23:57 +00:00
|
|
|
}
|
|
|
|
|
#header
|
|
|
|
|
{
|
|
|
|
|
grid-area: header;
|
|
|
|
|
}
|
|
|
|
|
#left
|
|
|
|
|
{
|
|
|
|
|
word-break: break-word;
|
|
|
|
|
grid-area: left;
|
|
|
|
|
}
|
|
|
|
|
#right
|
|
|
|
|
{
|
2018-10-22 01:46:27 +00:00
|
|
|
grid-template:
|
2018-02-22 23:23:57 +00:00
|
|
|
"add_tag_area"
|
|
|
|
|
"remove_tag_area"
|
2018-02-24 21:23:35 +00:00
|
|
|
"refresh_metadata_area"
|
2018-03-10 01:10:27 +00:00
|
|
|
"searchhidden_area"
|
2018-08-15 06:02:06 +00:00
|
|
|
"download_zip_area"
|
2018-10-22 01:46:27 +00:00
|
|
|
"message_area" 1fr;
|
2018-02-22 23:23:57 +00:00
|
|
|
}
|
2018-10-22 01:46:27 +00:00
|
|
|
#right > *
|
|
|
|
|
{
|
|
|
|
|
display: flex;
|
|
|
|
|
padding: 8px;
|
|
|
|
|
}
|
|
|
|
|
#right button
|
|
|
|
|
{
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
2018-11-05 02:36:17 +00:00
|
|
|
#add_tag_area { grid-area: add_tag_area; }
|
|
|
|
|
#remove_tag_area { grid-area: remove_tag_area; }
|
|
|
|
|
|
2018-10-22 01:46:27 +00:00
|
|
|
#add_tag_area input,
|
|
|
|
|
#remove_tag_area input
|
|
|
|
|
{
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
#add_tag_area button,
|
|
|
|
|
#remove_tag_area button
|
|
|
|
|
{
|
|
|
|
|
flex: initial;
|
2018-02-22 23:23:57 +00:00
|
|
|
}
|
2018-11-05 02:36:17 +00:00
|
|
|
|
|
|
|
|
#refresh_metadata_area { grid-area: refresh_metadata_area; }
|
|
|
|
|
#searchhidden_area { grid-area: searchhidden_area; }
|
|
|
|
|
#download_zip_area { grid-area: download_zip_area; }
|
2018-02-22 23:23:57 +00:00
|
|
|
#message_area
|
|
|
|
|
{
|
|
|
|
|
grid-area: message_area;
|
|
|
|
|
margin: 8px;
|
2018-02-21 04:20:20 +00:00
|
|
|
}
|
2018-10-22 01:46:27 +00:00
|
|
|
@media screen and (max-width: 800px)
|
|
|
|
|
{
|
|
|
|
|
#content_body
|
|
|
|
|
{
|
|
|
|
|
grid-template:
|
|
|
|
|
"left" 1fr
|
|
|
|
|
"right" 200px;
|
|
|
|
|
}
|
|
|
|
|
#right
|
|
|
|
|
{
|
|
|
|
|
top: unset;
|
|
|
|
|
width: unset;
|
|
|
|
|
left: 8px;
|
|
|
|
|
right: 8px;
|
|
|
|
|
bottom: 8px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
|
|
|
|
|
grid-template:
|
|
|
|
|
"add_tag_area message_area"
|
|
|
|
|
"remove_tag_area message_area"
|
|
|
|
|
"refresh_metadata_area message_area"
|
|
|
|
|
"searchhidden_area message_area"
|
|
|
|
|
"download_zip_area message_area"
|
|
|
|
|
"extra message_area" 1fr
|
|
|
|
|
/1fr minmax(50px, 200px);
|
|
|
|
|
}
|
|
|
|
|
}
|
2018-02-18 03:12:34 +00:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
2018-02-22 23:23:57 +00:00
|
|
|
{{header.make_header(session=session)}}
|
2018-10-22 01:46:27 +00:00
|
|
|
<div id="content_body">
|
2018-02-22 23:23:57 +00:00
|
|
|
<div id="left">
|
2018-02-25 07:00:28 +00:00
|
|
|
<span>The clipboard contains <span class="clipboard_count">0</span> items.</span>
|
2018-07-23 02:43:07 +00:00
|
|
|
<button id="clear_clipboard_button" class="red_button" onclick="photo_clipboard.clear_clipboard()">Clear it.</button>
|
2018-02-22 23:23:57 +00:00
|
|
|
<div id="photo_card_holder">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-11-05 02:32:55 +00:00
|
|
|
<div id="right" class="sticky_side_right">
|
2018-02-22 23:23:57 +00:00
|
|
|
<div id="add_tag_area">
|
2018-07-23 03:45:16 +00:00
|
|
|
<input type="text" id="add_tag_textbox" list="tag_autocomplete_datalist">
|
2018-08-15 06:24:12 +00:00
|
|
|
<button class="add_tag_button green_button" id="add_tag_button" onclick="add_tag_form();">Add tag</button>
|
2018-02-18 03:12:34 +00:00
|
|
|
</div>
|
2018-03-10 01:10:27 +00:00
|
|
|
|
2018-02-22 23:23:57 +00:00
|
|
|
<div id="remove_tag_area">
|
2018-07-23 03:45:16 +00:00
|
|
|
<input type="text" id="remove_tag_textbox" list="tag_autocomplete_datalist">
|
2018-08-15 06:24:12 +00:00
|
|
|
<button class="red_button" id="remove_tag_button" onclick="remove_tag_form();">Remove tag</button>
|
2018-02-24 21:23:35 +00:00
|
|
|
</div>
|
2018-03-10 01:10:27 +00:00
|
|
|
|
2018-02-24 21:23:35 +00:00
|
|
|
<div id="refresh_metadata_area">
|
2018-08-15 06:24:12 +00:00
|
|
|
<button class="green_button" id="refresh_metadata_button" onclick="refresh_metadata_form();">Refresh metadata</button>
|
2018-02-22 23:23:57 +00:00
|
|
|
</div>
|
2018-03-10 01:10:27 +00:00
|
|
|
|
|
|
|
|
<div id="searchhidden_area">
|
2018-08-15 06:24:12 +00:00
|
|
|
<button class="yellow_button" id="set_searchhidden_button" onclick="set_searchhidden_form()">Searchhide</button>
|
|
|
|
|
<button class="yellow_button" id="unset_searchhidden_button" onclick="unset_searchhidden_form()">Unhide</button>
|
2018-03-10 01:10:27 +00:00
|
|
|
</div>
|
|
|
|
|
|
2018-08-15 06:02:06 +00:00
|
|
|
<div id="download_zip_area">
|
2018-08-15 06:24:12 +00:00
|
|
|
<button class="yellow_button" id="download_zip_button" onclick="download_zip_form()">Download .zip</button>
|
2018-08-15 06:02:06 +00:00
|
|
|
</div>
|
|
|
|
|
|
2018-02-22 23:23:57 +00:00
|
|
|
<div id="message_area">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-10-22 01:46:27 +00:00
|
|
|
</div>
|
2018-02-18 03:12:34 +00:00
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var divs = {};
|
|
|
|
|
var needed = new Set();
|
|
|
|
|
var holder = document.getElementById("photo_card_holder");
|
|
|
|
|
|
2018-02-22 23:23:57 +00:00
|
|
|
var add_box = document.getElementById("add_tag_textbox");
|
|
|
|
|
var add_button = document.getElementById("add_tag_button");
|
2018-07-23 02:12:08 +00:00
|
|
|
add_box.addEventListener("keyup", common.entry_with_history_hook);
|
|
|
|
|
common.bind_box_to_button(add_box, add_button);
|
2018-02-24 21:23:35 +00:00
|
|
|
|
2018-02-22 23:23:57 +00:00
|
|
|
var remove_box = document.getElementById("remove_tag_textbox");
|
|
|
|
|
var remove_button = document.getElementById("remove_tag_button");
|
2018-07-23 02:12:08 +00:00
|
|
|
remove_box.addEventListener("keyup", common.entry_with_history_hook);
|
|
|
|
|
common.bind_box_to_button(remove_box, remove_button);
|
2018-02-22 23:23:57 +00:00
|
|
|
|
2018-02-18 03:12:34 +00:00
|
|
|
function recalculate_needed()
|
|
|
|
|
{
|
|
|
|
|
needed = new Set();
|
2018-07-23 02:43:07 +00:00
|
|
|
photo_clipboard.clipboard.forEach(function(photo_id)
|
2018-02-18 03:12:34 +00:00
|
|
|
{
|
|
|
|
|
if (!(photo_id in divs))
|
|
|
|
|
{
|
|
|
|
|
needed.add(photo_id);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function refresh_divs()
|
|
|
|
|
{
|
|
|
|
|
for (var photo_id in divs)
|
|
|
|
|
{
|
|
|
|
|
var photo_div = divs[photo_id];
|
2018-07-23 02:43:07 +00:00
|
|
|
var should_keep = photo_clipboard.clipboard.has(photo_id);
|
2018-02-18 03:12:34 +00:00
|
|
|
var on_page = holder.contains(photo_div);
|
|
|
|
|
if (on_page && !should_keep)
|
|
|
|
|
{
|
|
|
|
|
holder.removeChild(photo_div)
|
|
|
|
|
}
|
|
|
|
|
if (!on_page && should_keep)
|
|
|
|
|
{
|
|
|
|
|
holder.appendChild(photo_div)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function request_more_divs()
|
|
|
|
|
{
|
|
|
|
|
if (needed.size == 0)
|
|
|
|
|
{
|
|
|
|
|
return;
|
|
|
|
|
}
|
2018-02-20 07:44:24 +00:00
|
|
|
var url = "/batch/photos/photo_card";
|
2018-02-18 03:12:34 +00:00
|
|
|
var data = new FormData();
|
|
|
|
|
var photo_ids = Array.from(needed).join(",");
|
|
|
|
|
data.append("photo_ids", photo_ids);
|
|
|
|
|
function callback(response)
|
|
|
|
|
{
|
|
|
|
|
if (response["meta"]["status"] !== 200)
|
|
|
|
|
{
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
response = response["data"];
|
|
|
|
|
var holder = document.getElementById("photo_card_holder");
|
|
|
|
|
for (photo_id in response)
|
|
|
|
|
{
|
2018-07-23 02:12:08 +00:00
|
|
|
photo_div = common.html_to_element(response[photo_id]);
|
2018-02-18 03:12:34 +00:00
|
|
|
divs[photo_id] = photo_div;
|
|
|
|
|
needed.delete(photo_id)
|
|
|
|
|
holder.appendChild(photo_div);
|
|
|
|
|
}
|
2018-07-23 02:43:07 +00:00
|
|
|
photo_clipboard.apply_check_all();
|
2018-02-18 03:12:34 +00:00
|
|
|
}
|
2018-07-23 02:12:08 +00:00
|
|
|
common.post(url, data, callback);
|
2018-02-18 03:12:34 +00:00
|
|
|
}
|
|
|
|
|
|
2018-08-15 06:24:12 +00:00
|
|
|
function my_clipboard_load_save_hook()
|
2018-02-18 03:12:34 +00:00
|
|
|
{
|
|
|
|
|
recalculate_needed();
|
|
|
|
|
request_more_divs();
|
|
|
|
|
refresh_divs();
|
|
|
|
|
}
|
|
|
|
|
|
2018-07-23 03:45:16 +00:00
|
|
|
tag_autocomplete.init_datalist();
|
2018-08-15 06:24:12 +00:00
|
|
|
photo_clipboard.on_load_hooks.push(my_clipboard_load_save_hook);
|
|
|
|
|
photo_clipboard.on_save_hooks.push(my_clipboard_load_save_hook);
|
2018-02-22 23:23:57 +00:00
|
|
|
|
2018-08-15 06:24:12 +00:00
|
|
|
////////////////////////////////////////////////////////////////////////////////////////////////////
|
2018-02-22 23:23:57 +00:00
|
|
|
|
2018-08-15 06:24:12 +00:00
|
|
|
function add_remove_tag(action, tagname)
|
2018-02-22 23:23:57 +00:00
|
|
|
{
|
2018-07-23 02:43:07 +00:00
|
|
|
if (photo_clipboard.clipboard.size == 0)
|
2018-02-24 21:23:35 +00:00
|
|
|
{return;}
|
2018-02-22 23:23:57 +00:00
|
|
|
var url = "/batch/photos/" + action + "_tag";
|
2018-07-23 02:43:07 +00:00
|
|
|
var photo_ids = Array.from(photo_clipboard.clipboard).join(",");
|
2018-02-24 21:23:35 +00:00
|
|
|
var data = new FormData();
|
2018-02-22 23:23:57 +00:00
|
|
|
data.append("photo_ids", photo_ids);
|
|
|
|
|
data.append("tagname", tagname);
|
2018-08-15 06:24:12 +00:00
|
|
|
common.post(url, data, add_remove_tag_callback);
|
2018-02-22 23:23:57 +00:00
|
|
|
}
|
2018-08-15 06:24:12 +00:00
|
|
|
function add_remove_tag_callback(response)
|
2018-02-22 23:23:57 +00:00
|
|
|
{
|
|
|
|
|
response = response["data"];
|
|
|
|
|
var tagname = response["tagname"];
|
2018-02-24 21:23:35 +00:00
|
|
|
var message_area = document.getElementById("message_area");
|
2018-02-22 23:23:57 +00:00
|
|
|
var message_positivity;
|
|
|
|
|
var message_text;
|
|
|
|
|
|
|
|
|
|
if ("error_type" in response)
|
|
|
|
|
{
|
|
|
|
|
message_positivity = "message_negative";
|
|
|
|
|
message_text = response["error_message"];
|
|
|
|
|
}
|
|
|
|
|
else if ("action" in response)
|
|
|
|
|
{
|
|
|
|
|
var action = response["action"];
|
|
|
|
|
message_positivity = "message_positive";
|
|
|
|
|
if (action == "add")
|
|
|
|
|
{message_text = "Added tag " + tagname;}
|
|
|
|
|
|
|
|
|
|
else if (action == "remove")
|
|
|
|
|
{message_text = "Removed tag " + tagname;}
|
|
|
|
|
}
|
2018-07-23 02:12:08 +00:00
|
|
|
common.create_message_bubble(message_area, message_positivity, message_text, 8000);
|
2018-02-22 23:23:57 +00:00
|
|
|
}
|
2018-08-15 06:24:12 +00:00
|
|
|
function add_tag_form()
|
|
|
|
|
{
|
|
|
|
|
var box = document.getElementById("add_tag_textbox");
|
|
|
|
|
var tagname = box.value.trim();
|
|
|
|
|
if (! tagname)
|
|
|
|
|
{return}
|
2018-02-24 21:23:35 +00:00
|
|
|
|
2018-08-15 06:24:12 +00:00
|
|
|
box.value = "";
|
|
|
|
|
return add_remove_tag("add", tagname);
|
|
|
|
|
}
|
|
|
|
|
function remove_tag_form()
|
2018-08-15 06:02:06 +00:00
|
|
|
{
|
2018-08-15 06:24:12 +00:00
|
|
|
var box = document.getElementById("remove_tag_textbox");
|
|
|
|
|
var tagname = box.value.trim();
|
|
|
|
|
if (! tagname)
|
|
|
|
|
{return}
|
2018-08-15 06:02:06 +00:00
|
|
|
|
2018-08-15 06:24:12 +00:00
|
|
|
box.value = "";
|
|
|
|
|
return add_remove_tag("remove", tagname);
|
2018-08-15 06:02:06 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function download_zip_callback(response)
|
|
|
|
|
{
|
|
|
|
|
var zip_token = response["data"]["zip_token"];
|
|
|
|
|
var url = `/batch/photos/download_zip/${zip_token}.zip`;
|
|
|
|
|
window.location.href = url;
|
|
|
|
|
}
|
2018-08-15 06:24:12 +00:00
|
|
|
function download_zip_form()
|
2018-02-24 21:23:35 +00:00
|
|
|
{
|
2018-07-23 02:43:07 +00:00
|
|
|
if (photo_clipboard.clipboard.size == 0)
|
2018-02-24 21:23:35 +00:00
|
|
|
{return;}
|
|
|
|
|
|
2018-08-15 06:24:12 +00:00
|
|
|
var url = "/batch/photos/download_zip";
|
2018-07-23 02:43:07 +00:00
|
|
|
var photo_ids = Array.from(photo_clipboard.clipboard).join(",");
|
2018-02-24 21:23:35 +00:00
|
|
|
var data = new FormData();
|
|
|
|
|
data.append("photo_ids", photo_ids);
|
2018-08-15 06:24:12 +00:00
|
|
|
common.post(url, data, download_zip_callback);
|
2018-02-24 21:23:35 +00:00
|
|
|
}
|
2018-08-15 06:24:12 +00:00
|
|
|
|
|
|
|
|
var refresh_in_progress = false;
|
2018-02-24 21:23:35 +00:00
|
|
|
function refresh_metadata_callback(response)
|
|
|
|
|
{
|
2018-02-27 03:06:27 +00:00
|
|
|
response = response["data"];
|
2018-02-24 21:23:35 +00:00
|
|
|
refresh_in_progress = false;
|
|
|
|
|
if ("error_type" in response)
|
|
|
|
|
{
|
|
|
|
|
var message_area = document.getElementById("message_area");
|
|
|
|
|
var message_positivity = "message_negative";
|
|
|
|
|
var message_text = response["error_message"];
|
2018-07-23 02:12:08 +00:00
|
|
|
common.create_message_bubble(message_area, message_positivity, message_text, 8000);
|
2018-02-24 21:23:35 +00:00
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
2018-07-29 08:25:53 +00:00
|
|
|
common.refresh();
|
2018-02-24 21:23:35 +00:00
|
|
|
}
|
|
|
|
|
}
|
2018-08-15 06:24:12 +00:00
|
|
|
function refresh_metadata_form()
|
|
|
|
|
{
|
|
|
|
|
if (refresh_in_progress)
|
|
|
|
|
{return;}
|
|
|
|
|
|
|
|
|
|
if (photo_clipboard.clipboard.size == 0)
|
|
|
|
|
{return;}
|
2018-03-10 01:10:27 +00:00
|
|
|
|
2018-08-15 06:24:12 +00:00
|
|
|
var url = "/batch/photos/refresh_metadata";
|
|
|
|
|
var photo_ids = Array.from(photo_clipboard.clipboard).join(",");
|
|
|
|
|
var data = new FormData();
|
|
|
|
|
data.append("photo_ids", photo_ids);
|
|
|
|
|
refresh_in_progress = true;
|
|
|
|
|
common.post(url, data, refresh_metadata_callback);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function set_unset_searchhidden_callback(response)
|
2018-03-10 01:10:27 +00:00
|
|
|
{
|
|
|
|
|
response = response["data"];
|
|
|
|
|
var message_area = document.getElementById("message_area");
|
|
|
|
|
var message_positivity;
|
|
|
|
|
var message_text;
|
|
|
|
|
if ("error_type" in response)
|
|
|
|
|
{
|
|
|
|
|
message_positivity = "message_negative";
|
|
|
|
|
message_text = response["error_message"];
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
message_positivity = "message_positive";
|
|
|
|
|
message_text = "Success."
|
|
|
|
|
}
|
2018-07-23 02:12:08 +00:00
|
|
|
common.create_message_bubble(message_area, message_positivity, message_text, 8000);
|
2018-03-10 01:10:27 +00:00
|
|
|
}
|
2018-08-15 06:24:12 +00:00
|
|
|
function set_searchhidden_form()
|
2018-03-10 01:10:27 +00:00
|
|
|
{
|
2018-07-23 02:43:07 +00:00
|
|
|
if (photo_clipboard.clipboard.size == 0)
|
2018-07-20 05:42:21 +00:00
|
|
|
{return;}
|
|
|
|
|
|
2018-03-10 01:10:27 +00:00
|
|
|
var url = "/batch/photos/set_searchhidden";
|
|
|
|
|
var data = new FormData();
|
2018-07-23 02:43:07 +00:00
|
|
|
var photo_ids = Array.from(photo_clipboard.clipboard).join(",");
|
2018-07-20 05:42:21 +00:00
|
|
|
|
|
|
|
|
data.append("photo_ids", photo_ids);
|
2018-08-15 06:24:12 +00:00
|
|
|
common.post(url, data, set_unset_searchhidden_callback);
|
2018-03-10 01:10:27 +00:00
|
|
|
}
|
2018-08-15 06:24:12 +00:00
|
|
|
function unset_searchhidden_form()
|
2018-03-10 01:10:27 +00:00
|
|
|
{
|
2018-07-23 02:43:07 +00:00
|
|
|
if (photo_clipboard.clipboard.size == 0)
|
2018-07-20 05:42:21 +00:00
|
|
|
{return;}
|
|
|
|
|
|
2018-03-10 01:10:27 +00:00
|
|
|
var url = "/batch/photos/unset_searchhidden";
|
|
|
|
|
var data = new FormData();
|
2018-07-23 02:43:07 +00:00
|
|
|
var photo_ids = Array.from(photo_clipboard.clipboard).join(",");
|
2018-07-20 05:42:21 +00:00
|
|
|
|
|
|
|
|
data.append("photo_ids", photo_ids);
|
2018-08-15 06:24:12 +00:00
|
|
|
common.post(url, data, set_unset_searchhidden_callback);
|
2018-03-10 01:10:27 +00:00
|
|
|
}
|
2018-02-18 03:12:34 +00:00
|
|
|
</script>
|
|
|
|
|
</html>
|
