diff --git a/www/viewer/css/style.css b/www/viewer/css/style.css index 6e5c46f..787c01b 100644 --- a/www/viewer/css/style.css +++ b/www/viewer/css/style.css @@ -1,5 +1,6 @@ body { - font-family: Abel, Arial; + font-family: Helvetica, Abel, Arial; + font-size: 1em; -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ @@ -7,9 +8,13 @@ body { -ms-user-select: none; /* IE10+ */ } +button { + font-size: 1em; +} + div.item { - width:300px; - height:260px; + width:150px; + height:130px; border:1px solid black; display: inline-block; overflow: hidden; @@ -23,4 +28,18 @@ div.item.selected { div.item input[type='checkbox'] { position: absolute; +} + +#frmUpload { + display: inline; +} + +input[type='file'] { + width: 1px; + opacity:0 +} + +#txtInfo { + float: right; + /*display: inline-block;*/ } \ No newline at end of file diff --git a/www/viewer/index.html b/www/viewer/index.html index b879447..edcc86b 100644 --- a/www/viewer/index.html +++ b/www/viewer/index.html @@ -6,10 +6,17 @@ -Actions: - - - +
+
+ + + + + +
+ + +
@@ -18,5 +25,6 @@ Actions: + \ No newline at end of file diff --git a/www/viewer/js/main.js b/www/viewer/js/main.js index 5ac2411..fe9c867 100644 --- a/www/viewer/js/main.js +++ b/www/viewer/js/main.js @@ -1,104 +1,251 @@ var api = 'http://10.0.0.40/d3dapi/sketch/'; +$("#btnDelete").click(deleteSelectedSketches); +$("#btnSelectAll").click(selectAll); +$("#btnDeselectAll").click(deselectAll); +// $("#btnUpload").click(upload); +$("#uploads").change(upload); +$("#btnDownload").click(download); + +$("#btnUpload").click(function() { + console.log('trigger') + $("#uploads").trigger('click'); +}); + +// $("a").on("click", function () { +// var d = new Date().toISOString().slice(0, 19).replace(/-/g, ""); +// $(this).attr("href", "data:application/octet-stream;"+encodeURIComponent("test")).attr("download", "file-" + d + ".svg"); +// }); + + +var isBusy = true; +// var statusMessage = ""; + +// updateFreeSpace(); +updateButtonStates(); + $.get(api+'list', function(data) { //?id=00003 if (data.status=='success') { var list = data.data.list; + // list.reverse(); + + isBusy = true; + updateButtonStates(); + updateStatusMessage('loading '+list.length+' sketches...'); loadSketch(list, function() { console.log('done'); + isBusy = false; + updateFreeSpace(); + //updateStatusMessage('loading '+list.length+' sketches...'); + updateButtonStates(); }); + + } else { + console.log('failure',data) } - // numSketches = data.data.number_of_sketches; - - // loadSketch(1,function() { - // console.log('done'); - // }); - }); function loadSketch(list,cb) { + var id = list.pop(); + + $.get(api+'?id='+id, function(data) { - // console.log('loadSketch',list.length); - var item = list.pop(); - console.log(item); + if (data.status=='success') { + addItem(id,data.data.data); + } - if (list.length>0) { - loadSketch(list,function() { + updateStatusMessage('loading '+list.length+' sketches...'); + + if (list.length>0) { + loadSketch(list,function() { + cb(); + }) + } else { cb(); - }) - } - - // if (num<=numSketches) { - - // $.get(api+'?id='+num, function(data) { - - // if (data.status=='success') { - // console.log('loaded',num) - // addItem(num,data.data.data); - // } else { - // console.log('failed to load',num) - // } - - // loadSketch(num+1,function() { - // cb(); - // }); - // }); - - // // cb(); - // } else { - // cb(); - // } - // } else { - // console.log('test') - // cb(); - // } + } + }); } -function addItem(num,svgData) { - var path = svgData.split('d="')[1].split('"')[0]; - var item = $('
'); - var svg = ''; +function addItem(id,svgData,doPrepend) { + var path; + + if (!svgData) path = ""; + else if (typeof(svgData)!='string') path = ""; + else if (svgData.indexOf("CDATA")==-1) path = ""; + else path = svgData.split('d="')[1].split('"')[0]; + + var item = $('
'); + var svg = ''; item.click(function() { $(this).toggleClass('selected'); + console.log($(this).attr("data")); + updateButtonStates(); }) item.append(svg); - $('#svgContainer').append(item); + if (doPrepend) $('#svgContainer').prepend(item); + else $('#svgContainer').append(item); + item.hide().fadeIn(); - //''+num+'
'); + updateButtonStates(); } +function deleteSketches(list,cb) { + var id = list.pop(); + + $.post(api+'delete', {id:id}, function(data) { + + $('.item[data='+id+']').fadeOut('slow',function() { + $(this).remove(); //remove when effect is finished + }); + + updateStatusMessage("Deleting " + list.length + ' sketches...'); + + if (list.length>0) { + deleteSketches(list,cb); + } else { + cb(); + } + + }); +} function deleteSelectedSketches() { if (confirm('Do you want to delete '+$('.item.selected').length+' drawings?')) { - $('.item.selected').each(function() { - var id = $(this).attr('data'); - $.post(api+'delete'+id, {id:id}, function(data) { - console.log(data); - }); - - }) - $('.item.selected').fadeOut(); + var ids = []; + $('.item.selected').map(function(){ + ids.push($(this).attr('data')); + }); + + isBusy = true; + updateButtonStates(); + + deleteSketches(ids,function() { + console.log('done deleting sketches'); + isBusy = false; + updateButtonStates(); + updateFreeSpace(); + }); + + deselectAll(); + updateButtonStates(); } } -function deleteSketch(num) { - - //var selectedItems = $("input[type=checkbox]:checked"); - // console.log('deleteSketch',num) - //confirm('Are you sure?'+selectedItems.length); -} - function selectAll() { $('.item').addClass('selected'); + updateButtonStates(); } function deselectAll() { $('.item').removeClass('selected'); + updateButtonStates(); } +function updateButtonStates() { + var numItems = $('.item').length; + var numSelected = $('.item.selected').length; + var noSelection = numSelected==0; + + $("#btnDelete").attr("disabled",isBusy || noSelection); + $("#btnDownload").attr("disabled",isBusy || noSelection); + $("#btnDeselectAll").attr("disabled",isBusy || noSelection); + $("#btnSelectAll").attr("disabled",isBusy || numItems==0); + $("#btnUpload").attr("disabled",isBusy || !noSelection); + $("#btnDelete").text("Delete" + (noSelection ? "" : " ("+numSelected+")")); + $("#btnDownload").text("Download" + (noSelection ? "" : " ("+numSelected+")")); +} + +function uploadFile(files, index, next) { + var reader = new FileReader(); + reader.readAsText(files[index], "UTF-8"); + reader.onload = function (evt) { + console.log("onload",index); //,files[index],evt.target); + + //process file + var svg = convertSvg(evt.target.result); + + // setTimeout(function() { + $.post(api, {data:svg}, function(data) { + if (data.status=='success') { + var id = data.data.id; + addItem(id,svg,true); + + updateStatusMessage('uploading '+(files.length-index)+' sketches...'); + + if (index-1) return svg; //assume this SVG is already ok + + //this fixes SVG's created by the kunstcentraal app + var re = /([a-zA-Z])\s?([0-9]{1,}) ([0-9]{1,})/g; + svg = svg.replace(re,"$1$2,$3"); + re = /<\/svg>/g; + return svg.replace(re,"\n"); +} + +function download() { + $('.item.selected').each(function() { + var id = $(this).attr('data'); + var svgData = $(this).html(); + console.log('downloading',id); + $('')[0].click(); + }); +}