Gary Sharp
255 lines
11 KiB
Plaintext
255 lines
11 KiB
Plaintext
@model Disco.Web.Areas.Config.Models.DocumentTemplate.UndetectedPagesModel
|
|
@{
|
|
Authorization.Require(Claims.Config.DocumentTemplate.UndetectedPages);
|
|
|
|
ViewBag.Title = Html.ToBreadcrumb("Configuration", MVC.Config.Config.Index(), "Document Templates", MVC.Config.DocumentTemplate.Index(), "Undetected Pages");
|
|
Html.BundleDeferred("~/ClientScripts/Modules/Knockout");
|
|
Html.BundleDeferred("~/ClientScripts/Modules/jQuery-SignalR");
|
|
}
|
|
<div id="undetectedPagesContainer"
|
|
data-urlundetectedfiles="@(Url.Action(MVC.API.DocumentTemplate.ImporterUndetectedFiles()))"
|
|
data-urlundetectedpagethumbnail="@(new HtmlString(Url.Action(MVC.API.DocumentTemplate.ImporterUndetectedFile(null, false, true))))"
|
|
data-urlundetectedpagepreview="@(new HtmlString(Url.Action(MVC.API.DocumentTemplate.ImporterUndetectedFile(null, false, false))))"
|
|
data-urlundetectedpagesource="@(new HtmlString(Url.Action(MVC.API.DocumentTemplate.ImporterUndetectedFile(null, true, false))))"
|
|
data-urldataidlookupservice="@(Url.Action(MVC.API.DocumentTemplate.ImporterUndetectedDataIdLookup()))/"
|
|
data-urlimporterundetectedassign="@(Url.Action(MVC.API.DocumentTemplate.ImporterUndetectedAssign()))/"
|
|
data-urlimporterundetecteddelete="@(Url.Action(MVC.API.DocumentTemplate.ImporterUndetectedDelete()))">
|
|
<div id="noUndetectedPages" data-bind="visible: noUndetectedPages">
|
|
<h3>No Undetected Pages</h3>
|
|
</div>
|
|
<ul id="undetectedPages" class="clearfix" data-bind="visible: !noUndetectedPages(), foreach: { data: undetectedPages }">
|
|
<li class="undetectedPage" data-bind="style: { backgroundImage: thumbnailUrl }, click: select">
|
|
<div class="pageDetails" data-bind="text: timestampFuzzy, attr: { title: timestamp }">
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="undetectedPageDialog" data-bind="with: selectedUndetectedPage">
|
|
<div class="pagePreview" data-bind="style: { backgroundImage: previewUrl }">
|
|
</div>
|
|
<div class="actions">
|
|
<a href="#" class="button" target="_blank" data-bind="attr: { href: sourceUrl }">Download</a>
|
|
<a href="#" class="button" id="dialogDeleteButton" data-bind="click: deletePage">Delete</a>
|
|
</div>
|
|
<div class="actions">
|
|
Type: @Html.DropDownList("dialogDocumentTemplateId", Model.DocumentTemplatesSelectListItems, new Dictionary<string, object> { { "data-bind", "value: dialogTemplateId" } })
|
|
Data:
|
|
<input id="dialogDataId" type="text" data-bind="value: dialogDataId, autocomplete: { source: dialogDataIdService, minLength: 2, position: { my: 'left bottom', at: 'left top' } }" />
|
|
<button type="button" class="button" id="dialogAssignButton" data-bind="click: assignPage">Assign</button>
|
|
</div>
|
|
</div>
|
|
<div id="dialogRemove" title="Delete this Page?">
|
|
<p>
|
|
<i class="fa fa-exclamation-triangle fa-lg warning"></i>
|
|
Are you sure?
|
|
</p>
|
|
</div>
|
|
<script type="text/javascript">
|
|
ko.bindingHandlers.autocomplete = {
|
|
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
|
|
var autocompleteOptions = ko.utils.unwrapObservable(valueAccessor());
|
|
if (autocompleteOptions.source)
|
|
autocompleteOptions.source = ko.utils.unwrapObservable(autocompleteOptions.source);
|
|
$element = $(element);
|
|
if (!$element.is('.ui-autocomplete-input')) {
|
|
autocompleteOptions.select = function (e, ui) {
|
|
allBindingsAccessor().value(ui.item.value);
|
|
return false;
|
|
}
|
|
$element.autocomplete(autocompleteOptions);
|
|
} else {
|
|
// Update Source Option Only
|
|
if (autocompleteOptions.source)
|
|
$element.autocomplete('option', 'source', autocompleteOptions.source);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
|
|
const vm = new pageViewModel();
|
|
const $undetectedPagesContainer = $(undetectedPagesContainer);
|
|
const urlUndetectedFiles = $undetectedPagesContainer.attr('data-urlundetectedfiles');
|
|
const urlUndetectedPageThumbnail = $undetectedPagesContainer.attr('data-urlundetectedpagethumbnail');
|
|
const urlUndetectedPagePreview = $undetectedPagesContainer.attr('data-urlundetectedpagepreview');
|
|
const urlUndetectedPageSource = $undetectedPagesContainer.attr('data-urlundetectedpagesource');
|
|
const urlDataIdLookupService = $undetectedPagesContainer.attr('data-urldataidlookupservice');
|
|
const urlImporterUndetectedAssign = $undetectedPagesContainer.attr('data-urlimporterundetectedassign');
|
|
const urlImporterUndetectedDelete = $undetectedPagesContainer.attr('data-urlimporterundetecteddelete');
|
|
const $undetectedPageDialog = $('#undetectedPageDialog').dialog({
|
|
modal: true,
|
|
width: 800,
|
|
resizable: false,
|
|
autoOpen: false
|
|
});
|
|
|
|
function resizeUndetectedPageDialog() {
|
|
var dialogHeight = Math.min($(window).height() - 120, 805);
|
|
$undetectedPageDialog.height(dialogHeight);
|
|
$undetectedPageDialog.find('.pagePreview').height(dialogHeight - 105);
|
|
}
|
|
resizeUndetectedPageDialog();
|
|
|
|
$(window).resize(resizeUndetectedPageDialog);
|
|
|
|
$dialogRemove = $('#dialogRemove').dialog({
|
|
resizable: false,
|
|
height: 140,
|
|
modal: true,
|
|
autoOpen: false
|
|
});
|
|
|
|
function pageViewModel() {
|
|
var self = this;
|
|
|
|
self.selectedUndetectedPage = ko.observable(null);
|
|
self.undetectedPages = ko.observableArray();
|
|
self.noUndetectedPages = ko.computed(function () { return self.undetectedPages().length == 0 });
|
|
self.selectNextPage = function () {
|
|
var oldSelected = self.selectedUndetectedPage();
|
|
var oldSelectedIndex = vm.undetectedPages.indexOf(oldSelected);
|
|
|
|
if (vm.undetectedPages().length > 1) {
|
|
if (oldSelectedIndex + 1 <= vm.undetectedPages().length - 1)
|
|
vm.selectedUndetectedPage(vm.undetectedPages()[oldSelectedIndex + 1]);
|
|
else
|
|
vm.selectedUndetectedPage(vm.undetectedPages()[oldSelectedIndex - 1]);
|
|
} else {
|
|
$undetectedPageDialog.dialog('close');
|
|
vm.selectedUndetectedPage(null);
|
|
}
|
|
}
|
|
}
|
|
|
|
function undetectedPageViewModel(id, timestamp, timestampFuzzy) {
|
|
var self = this;
|
|
|
|
self.id = id;
|
|
self.timestamp = timestamp;
|
|
self.timestampFuzzy = timestampFuzzy;
|
|
self.thumbnailUrl = "url(" + urlUndetectedPageThumbnail + "&id=" + id + ")";
|
|
self.previewUrl = "url(" + urlUndetectedPagePreview + "&id=" + id + ")";
|
|
self.sourceUrl = urlUndetectedPageSource + "&id=" + id;
|
|
self.select = function (e, d) {
|
|
vm.selectedUndetectedPage(self);
|
|
$undetectedPageDialog.dialog('open');
|
|
}
|
|
|
|
// Dialog Properties
|
|
self.dialogTemplateId = ko.observable(null);
|
|
self.dialogDataId = ko.observable(null);
|
|
self.dialogDataIdService = ko.computed(function () {
|
|
return urlDataIdLookupService + self.dialogTemplateId();
|
|
});
|
|
self.deletePage = function () {
|
|
$dialogRemove.dialog('option', 'buttons', {
|
|
"Remove": function () {
|
|
$dialogRemove.dialog("close");
|
|
|
|
async function removeAsync() {
|
|
|
|
const body = new FormData();
|
|
body.append('__RequestVerificationToken', document.body.dataset.antiforgery);
|
|
body.append('id', self.id);
|
|
|
|
try {
|
|
const response = await fetch(urlImporterUndetectedDelete, {
|
|
method: 'POST',
|
|
body: body
|
|
});
|
|
if (!response.ok) {
|
|
alert('Unable to delete page: ' + response.statusText);
|
|
return;
|
|
}
|
|
vm.selectNextPage();
|
|
vm.undetectedPages.remove(self);
|
|
} catch (e) {
|
|
alert('Unable to delete page: ' + e);
|
|
}
|
|
}
|
|
removeAsync(self.id);
|
|
},
|
|
"Cancel": function () {
|
|
$dialogRemove.dialog("close");
|
|
$undetectedPageDialog.dialog('option', 'disabled', false);
|
|
}
|
|
});
|
|
|
|
$dialogRemove.dialog('open');
|
|
|
|
return false;
|
|
}
|
|
self.assignPage = async function () {
|
|
var dtId = self.dialogTemplateId();
|
|
var dId = self.dialogDataId();
|
|
if (!dtId || !dId) {
|
|
alert('Please specify a valid Document Type and Data Id');
|
|
} else {
|
|
const body = new FormData();
|
|
body.append('__RequestVerificationToken', document.body.dataset.antiforgery);
|
|
body.append('id', self.id);
|
|
body.append('documentTemplateId', dtId);
|
|
body.append('dataId', dId);
|
|
|
|
try {
|
|
const response = await fetch(urlImporterUndetectedAssign, {
|
|
method: 'POST',
|
|
body: body
|
|
});
|
|
if (response.ok) {
|
|
vm.selectNextPage();
|
|
vm.undetectedPages.remove(self);
|
|
} else {
|
|
alert('Unable to assign page: ' + response.statusText);
|
|
}
|
|
} catch (e) {
|
|
alert('Unable to assign page: ' + e);
|
|
}
|
|
}
|
|
return false;
|
|
};
|
|
}
|
|
|
|
async function init() {
|
|
const body = new FormData();
|
|
body.append('__RequestVerificationToken', document.body.dataset.antiforgery);
|
|
const response = await fetch(urlUndetectedFiles, {
|
|
method: 'POST',
|
|
body: body
|
|
});
|
|
|
|
if (!response.ok) {
|
|
alert('Unable to load content: ' + response.statusText);
|
|
return;
|
|
}
|
|
|
|
const content = await response.json();
|
|
|
|
if (content.length > 0) {
|
|
for (var i = 0; i < content.length; i++) {
|
|
var c = content[i];
|
|
var up = new undetectedPageViewModel(c.Id, c.Timestamp, c.TimestampFuzzy);
|
|
vm.undetectedPages.push(up);
|
|
}
|
|
}
|
|
|
|
ko.applyBindings(vm);
|
|
|
|
var fileId = window.location.hash;
|
|
if (fileId) {
|
|
fileId = fileId.substr(1);
|
|
for (var i = 0; i < vm.undetectedPages().length; i++) {
|
|
var up = vm.undetectedPages()[i];
|
|
if (up.id == fileId) {
|
|
up.select();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
init();
|
|
});
|
|
</script>
|