From 5d16620f2a4c496a6ba3ef9ff66995287c98b115 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Wed, 21 Jun 2017 11:30:58 -0400 Subject: [PATCH 01/31] implemented confirmation for deleteMap --- static/js/home.js | 13 +++++++------ static/js/main.js | 9 --------- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/static/js/home.js b/static/js/home.js index 22e1eb6..61dc7bc 100644 --- a/static/js/home.js +++ b/static/js/home.js @@ -9,11 +9,12 @@ function deleteMap(id){ $(document).ready(function(){ console.log("listening for deletes"); $('.delete').click(function(){ - - console.log($(this).parent().attr('id')); - deleteMap($(this).parent().attr('id')); - $(this).parent().remove(); - return false; - + var conf = confirm("Delete this map?"); + if(conf){ + console.log($(this).parent().attr('id')); + deleteMap($(this).parent().attr('id')); + $(this).parent().remove(); + return false; + } }); }); \ No newline at end of file diff --git a/static/js/main.js b/static/js/main.js index aedcfc6..a023eaa 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -8,17 +8,12 @@ function createMapping(e, img){ */ var offset = $(".mapper").offset(); - // x = event.offsetX?(event.offsetX):event.pageX-img.offsetLeft; - // y = event.offsetY?(event.offsetY):event.pageY-img.offsetTop; - var offset_t = $(img).offset().top - $(window).scrollTop(); var offset_l = $(img).offset().left - $(window).scrollLeft(); var left = Math.round( (e.clientX - offset_l) ); var top = Math.round( (e.clientY - offset_t) ); - // console.log("Left: " + left + " Top: " + top); - x = left; y = top; createMode = true; @@ -34,12 +29,9 @@ document.getElementById("save").addEventListener("click", function(){ var mappingString = ""; for (var i = 0; i < ids.length; i++){ if(ids[i] != null){ - // console.log("Converting id: " + i + " into string"); mappingString += i + "," + ids[i] + "\n"; - // console.log("Current maps to store: \n" + mappingString); } } - // console.log("Pushing to database..."); var id = window.location.pathname; id = id.substring(id.indexOf("id=")+3, id.length); @@ -48,7 +40,6 @@ document.getElementById("save").addEventListener("click", function(){ mapID: id, mappings: mappingString }, function(data) { - // console.log(data.mappings); }); }); \ No newline at end of file From 79f8ba48695e7a3b7a34058e64f5bc5cb7173f1a Mon Sep 17 00:00:00 2001 From: IreLynn Date: Mon, 26 Jun 2017 14:28:18 -0400 Subject: [PATCH 02/31] only allow one mapping per data row --- static/js/create_map.js | 7 ++++++- static/js/csv.js | 8 +++++--- static/js/main.js | 1 - templates/map.html | 1 - 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/static/js/create_map.js b/static/js/create_map.js index 713b19a..4e5e8d4 100644 --- a/static/js/create_map.js +++ b/static/js/create_map.js @@ -1,5 +1,6 @@ // createMode indicates if we are or are not in create mode var createMode = false; +var deleteMode = false; var x; var y; var ids = []; @@ -10,6 +11,10 @@ function mapData(x, y, id){ console.log("Invalid ID"); return; } + if(ids[id]){ + console.log("Data already mapped"); + return; + } ids[id] = x + "," + y; // adds to ID array var mapHTML = "\r\n'; } - html += '\r\n'; + html += '\r\n'; + html += '\r\n'; } if(data[0].constructor === Array) { for(var row in data) { @@ -82,6 +83,7 @@ function generateTable(data) { for(var item in data[row]) { html += '' + data[row][item] + '\r\n'; } + html += '\r\n'; html += '\r\n'; } } @@ -91,8 +93,8 @@ function generateTable(data) { for(var item in data[row]) { html += '' + item + ':' + data[row][item] + '\r\n'; } - html += '\r\n'; - } + html += '\r\n'; + html += '\r\n'; } } return html; diff --git a/static/js/main.js b/static/js/main.js index a023eaa..2a0d088 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -23,7 +23,6 @@ function createMapping(e, img){ } - document.getElementById("save").addEventListener("click", function(){ console.log("Saving..."); var mappingString = ""; diff --git a/templates/map.html b/templates/map.html index b0e45a9..41f3880 100644 --- a/templates/map.html +++ b/templates/map.html @@ -27,7 +27,6 @@ -
From aea361c5be9a6e86b7d038450baa5b0450f0ddcd Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 27 Jun 2017 20:30:22 -0400 Subject: [PATCH 03/31] working on delete_mappings --- static/js/create_map.js | 40 ++++++++++++++++++++++++++++++++++++++++ static/js/csv.js | 4 +--- 2 files changed, 41 insertions(+), 3 deletions(-) diff --git a/static/js/create_map.js b/static/js/create_map.js index 4e5e8d4..9fac4a0 100644 --- a/static/js/create_map.js +++ b/static/js/create_map.js @@ -38,6 +38,46 @@ function mapData(x, y, id){ }); } +function unmapData(id){ + var mapHTML; + console.log("Delete tag for id: " + id + " from coords " + ids[id]); + if (id == " "){ + console.log("Invalid ID"); + return; + } + $(".mapper-map").empty(); //clear html ? + ids[id] = ""; + + for (var row in ids){ + var coords = ids[row].split(','); + console.log(coords[0] + "," + coords[1]); + if (coords[1]){ + x = coords[0]; + y = coords[1]; + mapHTML += ""; + + $(".mapper-map").append(mapHTML); + map = $('#mapper'); + map.mapster('unbind') + .mapster(opts) + .bind('mouseover', function () { + if (!inArea) { + map.mapster('set_options', all_opts) + .mapster('set', true, 'all') + .mapster('set_options', single_opts); + } + }).bind('mouseout', function () { + if (!inArea) { + map.mapster('set', false, 'all'); + } + }); + } + row++; + } +} function build_mappings(mappingsString){ var maps = mappingsString.split('\n'); diff --git a/static/js/csv.js b/static/js/csv.js index 7d643b2..1eedcbe 100644 --- a/static/js/csv.js +++ b/static/js/csv.js @@ -73,7 +73,6 @@ function generateTable(data) { for(var item in data) { html += '' + data[item] + '\r\n'; } - html += '\r\n'; html += '\r\n'; } if(data[0].constructor === Array) { @@ -83,7 +82,7 @@ function generateTable(data) { for(var item in data[row]) { html += '' + data[row][item] + '\r\n'; } - html += '\r\n'; + html += '\r\n'; html += '\r\n'; } } @@ -93,7 +92,6 @@ function generateTable(data) { for(var item in data[row]) { html += '' + item + ':' + data[row][item] + '\r\n'; } - html += '\r\n'; html += '\r\n'; } } From c176a794db76ff3dcde1f1d8d1a2e6a1e06110a7 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 27 Jun 2017 20:38:38 -0400 Subject: [PATCH 04/31] fixed for IDs binding to deleted id --- static/js/create_map.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/js/create_map.js b/static/js/create_map.js index 9fac4a0..3d357d8 100644 --- a/static/js/create_map.js +++ b/static/js/create_map.js @@ -55,8 +55,8 @@ function unmapData(id){ x = coords[0]; y = coords[1]; mapHTML += ""; $(".mapper-map").append(mapHTML); From 78df6cc14ec9d63fb8d69a3a94a2b4bf33b761a0 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 27 Jun 2017 21:03:52 -0400 Subject: [PATCH 05/31] re-factored mapData --- static/js/create_map.js | 44 ++++++++++++++--------------------------- 1 file changed, 15 insertions(+), 29 deletions(-) diff --git a/static/js/create_map.js b/static/js/create_map.js index 3d357d8..6566916 100644 --- a/static/js/create_map.js +++ b/static/js/create_map.js @@ -5,7 +5,7 @@ var x; var y; var ids = []; -function mapData(x, y, id){ +function insertAndMapData(x, y, id){ console.log("Mapping id: " + id + " to coordinates " + x + "," + y); if (id == " " || x == null){ console.log("Invalid ID"); @@ -16,6 +16,10 @@ function mapData(x, y, id){ return; } ids[id] = x + "," + y; // adds to ID array + mapData(x,y,id); +} + +function mapData(x,y,id){ var mapHTML = ""; - - $(".mapper-map").append(mapHTML); - map = $('#mapper'); - map.mapster('unbind') - .mapster(opts) - .bind('mouseover', function () { - if (!inArea) { - map.mapster('set_options', all_opts) - .mapster('set', true, 'all') - .mapster('set_options', single_opts); - } - }).bind('mouseout', function () { - if (!inArea) { - map.mapster('set', false, 'all'); - } - }); - } - row++; + mapData(x,y,id); } } @@ -83,13 +69,13 @@ function build_mappings(mappingsString){ var maps = mappingsString.split('\n'); for(var i = 0; i < maps.length - 1; i++){ to_map = maps[i].split(','); - mapData(to_map[1],to_map[2],to_map[0]); + insertAndMapData(to_map[1],to_map[2],to_map[0]); } } function dataClick(id){ if(createMode){ - mapData(x,y,id); + insertAndMapData(x,y,id); } createMode = false; $('.unlinked').removeClass("unlinked"); From 1111c0a373f706c7a6e0d8aa46d3a06258ea7a27 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Sun, 2 Jul 2017 10:13:03 -0400 Subject: [PATCH 06/31] deletion of mappings works properly; hover action still wonky after mapping deletion --- static/js/create_map.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/static/js/create_map.js b/static/js/create_map.js index 6566916..5d882e4 100644 --- a/static/js/create_map.js +++ b/static/js/create_map.js @@ -7,7 +7,7 @@ var ids = []; function insertAndMapData(x, y, id){ console.log("Mapping id: " + id + " to coordinates " + x + "," + y); - if (id == " " || x == null){ + if (id === " " || x == null){ console.log("Invalid ID"); return; } @@ -45,12 +45,12 @@ function mapData(x,y,id){ function unmapData(id){ var mapHTML; console.log("Delete tag for id: " + id + " from coords " + ids[id]); - if (id == " "){ + if (id === ""){ console.log("Invalid ID"); return; } - ids.splice(id, 1); + ids[id] = ""; $(".mapper-map").empty(); //clear html ? @@ -59,9 +59,11 @@ function unmapData(id){ for (var row in ids){ console.log(row + " " + ids[row]); - var coords = ids[row].split(','); - console.log(coords[0] + "," + coords[1]); - mapData(x,y,id); + if(ids[row] != ""){ + var coords = ids[row].split(','); + console.log(coords[0] + "," + coords[1]); + mapData(x,y,id); + } } } From f5ee5aa482455713529866f57aff038eb234839f Mon Sep 17 00:00:00 2001 From: IreLynn Date: Mon, 3 Jul 2017 11:52:43 -0400 Subject: [PATCH 07/31] added a billion comments and working on restructuring things but more importantly fixed unMapData and it actually works now --- diff | 338 ++++++++++++++++++ static/js/create_map.js | 56 ++- .../{csv-to-json.js => csv-to-json-gist.js} | 0 static/js/csv.js | 101 ++++-- ...gemap.js => jQuery-image-mapster-setup.js} | 0 templates/map.html | 4 +- test.js | 32 ++ 7 files changed, 494 insertions(+), 37 deletions(-) create mode 100644 diff rename static/js/{csv-to-json.js => csv-to-json-gist.js} (100%) rename static/js/{imagemap.js => jQuery-image-mapster-setup.js} (100%) create mode 100644 test.js diff --git a/diff b/diff new file mode 100644 index 0000000..64ea54f --- /dev/null +++ b/diff @@ -0,0 +1,338 @@ +diff --git a/static/js/create_map.js b/static/js/create_map.js +index 5d882e4..f634fd4 100644 +--- a/static/js/create_map.js ++++ b/static/js/create_map.js +@@ -1,8 +1,11 @@ + // createMode indicates if we are or are not in create mode + var createMode = false; + var deleteMode = false; +-var x; +-var y; ++ ++/** Coordinates of last point clicked on image. */ ++var x, y; ++ ++/** data store for tagged features/rows */ + var ids = []; + + function insertAndMapData(x, y, id){ +@@ -19,6 +22,17 @@ function insertAndMapData(x, y, id){ + mapData(x,y,id); + } + ++////// ++/*var a = document.createElement('area'); ++a['shape'] = 'circle'; ++a['id'] = '1'; ++a['data-name'] = '1,all'; ++a['coords'] = '191,81,10'; ++a['href'] = '#'; ++$(".mapper-map").append(a);*/ ++ ++////// ++ + function mapData(x,y,id){ + var mapHTML = "\r\n'; +- } +- html += '\r\n'; +- } +- if(data[0].constructor === Array) { +- for(var row in data) { +- //HTML addition for new table row (one for every row in CSV) +- html += '\r\n'; +- for(var item in data[row]) { +- html += '' + data[row][item] + '\r\n'; +- } +- html += '\r\n'; +- html += '\r\n'; ++ ++ data = normalizeCSV(data); ++ ++ /** ++ * constructs html for rows with listeners for tableOver, tableOut, and Click on rows ++ * ++ * * tableData tag with column info ++ * * button tag to delete with unmapData onclick listener ++ * ++ * @param tableOver, tableOut, dataClick, unmapData ++ */ ++ for(var row in data) { ++ //HTML addition for new table row (one for every row in CSV) ++ html += '\r\n'; ++ for(var item in data[row]) { ++ html += '' + data[row][item] + '\r\n'; + } ++ html += '\r\n'; ++ html += '\r\n'; + } +- if(data[0].constructor === Object) { +- for(var row in data) { +- html += '\r\n'; +- for(var item in data[row]) { +- html += '' + item + ':' + data[row][item] + '\r\n'; +- } +- html += '\r\n'; } +- } +- ++ + return html; + } + +@@ -110,6 +152,9 @@ function generateTableFromJSON(json) { + } + } + ++/** ++ * refactor to use $.fn.toggleClass ++ */ + function grey_out(item, index){ + $('#result').find('#' + index).removeClass("unlinked"); + $('#result').find('#' + index).addClass("linked"); +diff --git a/static/js/imagemap.js b/static/js/imagemap.js +deleted file mode 100644 +index 9a8d93b..0000000 +--- a/static/js/imagemap.js ++++ /dev/null +@@ -1,80 +0,0 @@ +-// javascript +- +-// Set up some options objects: 'single_opts' for when a single area is selected, which will show just a border +-// 'all_opts' for when all are highlighted, to use a different effect - shaded white with a white border +-// 'initial_opts' for general options that apply to the whole mapster. 'initial_opts' also includes callbacks +-// onMouseover and onMouseout, which are fired when an area is entered or left. We will use these to show or +-// remove the captions, and also set a flag to let the other code know if we're currently in an area. +-var inArea, +- map = $('#mapper'), +- single_opts = { +- fillColor: 'ff0000', +- fillOpacity: 0.2, +- stroke: true, +- strokeColor: 'ff0000', +- strokeWidth: 2 +- }, +- all_opts = { +- fillColor: 'ffffff', +- fillOpacity: 0.6, +- stroke: true, +- strokeWidth: 2, +- strokeColor: 'ffffff' +- }, +- initial_opts = { +- mapKey: 'data-name', +- isSelectable: false, +- // These are called when user hovers over mapped locations on image +- onMouseover: function (data) { +- inArea = true; +- $( "#" + data.key ).addClass("hovered"); +- }, +- onMouseout: function (data) { +- inArea = false; +- $( "#" + data.key ).removeClass("hovered"); +- } +- }; +- opts = $.extend({}, all_opts, initial_opts, single_opts); +- +- // Bind to the image 'mouseover' and 'mouseout' events to activate or deactivate ALL the areas, like the +- // original demo. Check whether an area has been activated with "inArea" - IE<9 fires "onmouseover" +- // again for the image when entering an area, so all areas would stay highlighted when entering +- // a specific area in those browsers otherwise. It makes no difference for other browsers. +- +- map.mapster('unbind') +- .mapster(opts) +- .bind('mouseover', function () { +- if (!inArea) { +- map.mapster('set_options', all_opts) +- .mapster('set', true, 'all') +- .mapster('set_options', single_opts); +- } +- }).bind('mouseout', function () { +- if (!inArea) { +- map.mapster('set', false, 'all'); +- } +- }); +- +-// These are called when user hovers over data in table +-function tableOver(num){ +- map = $('#mapper'); +- $( "#" + num ).addClass("hovered"); +- map.mapster('set_options', single_opts) +- .mapster('set', true, "" + num); +- +-} +- +-function tableOut(num){ +- map = $('#mapper'); +- $( "#" + num ).removeClass("hovered"); +- map.mapster('set_options', single_opts) +- .mapster('set', false, "" + num); +- +-} +- +-$(document).ready(function() { +- $('img').imgAreaSelect({ +- handles: true +- }); +- +-}); +\ No newline at end of file diff --git a/static/js/create_map.js b/static/js/create_map.js index 5d882e4..45039dc 100644 --- a/static/js/create_map.js +++ b/static/js/create_map.js @@ -1,8 +1,11 @@ // createMode indicates if we are or are not in create mode var createMode = false; var deleteMode = false; -var x; -var y; + +/** Coordinates of last point clicked on image. */ +var x, y; + +/** data store for tagged features/rows */ var ids = []; function insertAndMapData(x, y, id){ @@ -19,6 +22,38 @@ function insertAndMapData(x, y, id){ mapData(x,y,id); } +////// +/*var a = jQuery('', { 'data-name': "1,all" , }); + +var a = $('', { + 'shape': 'circle', + 'id': '1', + 'da' +}) +a['shape'] = 'circle'; +a['id'] = '1'; +a['data-name'] = '1,all'; +a['coords'] = '191,81,10'; +a['href'] = '#'; +$(".mapper-map").append(a); + +map = $('#mapper'); + map.mapster('unbind') + .mapster(opts) + .bind('mouseover', function () { + if (!inArea) { + map.mapster('set_options', all_opts) + .mapster('set', true, 'all') + .mapster('set_options', single_opts); + } + }).bind('mouseout', function () { + if (!inArea) { + map.mapster('set', false, 'all'); + } + });*/ + +////// + function mapData(x,y,id){ var mapHTML = "\r\n'; - } - html += '\r\n'; - } - if(data[0].constructor === Array) { - for(var row in data) { - //HTML addition for new table row (one for every row in CSV) - html += '\r\n'; - for(var item in data[row]) { - html += '' + data[row][item] + '\r\n'; - } - html += '\r\n'; - html += '\r\n'; + + data = normalizeCSV(data); + + /** + * constructs html for rows with listeners for tableOver, tableOut, and Click on rows + * + * * tableData tag with column info + * * button tag to delete with unmapData onclick listener + * + * @param tableOver, tableOut, dataClick, unmapData + */ + for(var row in data) { + //HTML addition for new table row (one for every row in CSV) + html += '\r\n'; + for(var item in data[row]) { + html += '' + data[row][item] + '\r\n'; } + html += '\r\n'; + html += '\r\n'; } - if(data[0].constructor === Object) { - for(var row in data) { - html += '\r\n'; - for(var item in data[row]) { - html += '' + item + ':' + data[row][item] + '\r\n'; - } - html += '\r\n'; } - } - + return html; } @@ -110,6 +152,9 @@ function generateTableFromJSON(json) { } } +/** + * refactor to use $.fn.toggleClass + */ function grey_out(item, index){ $('#result').find('#' + index).removeClass("unlinked"); $('#result').find('#' + index).addClass("linked"); diff --git a/static/js/imagemap.js b/static/js/jQuery-image-mapster-setup.js similarity index 100% rename from static/js/imagemap.js rename to static/js/jQuery-image-mapster-setup.js diff --git a/templates/map.html b/templates/map.html index 41f3880..dd0c560 100644 --- a/templates/map.html +++ b/templates/map.html @@ -32,11 +32,11 @@ - + - + From d84c805f3e94bc98e9576a36847185e64b6385ab Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 11 Jul 2017 11:34:39 -0400 Subject: [PATCH 12/31] added cancel button to redirect to homepage without saving map --- static/js/main.js | 6 ++++++ static/style.css | 8 +++++++- templates/map.html | 2 ++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/static/js/main.js b/static/js/main.js index dec13a8..be8a9fa 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -43,6 +43,12 @@ document.getElementById("save").addEventListener("click", function(){ }); +document.getElementById("cancel").addEventListener("click", function(){ + if(confirm("Leave map without saving?")){ + document.location.replace('/'); + } +}) + document.getElementById("help").addEventListener("click",function(){ var instr = alert("To add a tag, click anywhere on the image, then click the data row you wish to tag to that location. A red X will appear which allows you to delete tags you've created. Click 'Save' in the bottom right to save your tags once you've finished.") }); \ No newline at end of file diff --git a/static/style.css b/static/style.css index e0b8b00..90a9d40 100644 --- a/static/style.css +++ b/static/style.css @@ -161,12 +161,18 @@ margin:0; right: 10px; } -#help { +#cancel { position: fixed; bottom: 50px; right: 70px; } +#help { + position: fixed; + bottom: 50px; + right: 141px; +} + .csvstuff { position: fixed; top: 51px; diff --git a/templates/map.html b/templates/map.html index edc2310..63262cd 100644 --- a/templates/map.html +++ b/templates/map.html @@ -5,6 +5,7 @@
+ Th

@@ -28,6 +29,7 @@
+
From 877187361d1d7aa4666a13bd18131935e1d5fefe Mon Sep 17 00:00:00 2001 From: IreLynn Date: Wed, 12 Jul 2017 12:18:36 -0400 Subject: [PATCH 13/31] sidebar scrolls across image with u --- static/js/create_map.js | 6 ++++++ static/js/csv.js | 5 ++++- static/js/main.js | 6 +++++- static/style.css | 7 ++++--- templates/map.html | 2 +- 5 files changed, 20 insertions(+), 6 deletions(-) diff --git a/static/js/create_map.js b/static/js/create_map.js index 136e4da..4234f7a 100644 --- a/static/js/create_map.js +++ b/static/js/create_map.js @@ -12,6 +12,7 @@ function insertAndMapData(x, y, id){ console.log("Mapping id: " + id + " to coordinates " + x + "," + y); if (id === " " || x == null){ console.log("Invalid ID"); + alert("ID is not valid."); return; } if(ids[id]){ @@ -92,6 +93,11 @@ function unmapData(id){ } } + +/** + * gets called from map.html document ready function if + * data already exists for map + */ function build_mappings(mappingsString){ var maps = mappingsString.split('\n'); for(var i = 0; i < maps.length - 1; i++){ diff --git a/static/js/csv.js b/static/js/csv.js index c09993a..ae65159 100644 --- a/static/js/csv.js +++ b/static/js/csv.js @@ -155,6 +155,9 @@ function grey_out(item, index){ function create_visual(ids){ $('.mapper').addClass("greyOut") $('#result').find('tr').addClass("unlinked"); - // $('#result').find('#0').removeClass("unlinked"); + console.log(String(document.getElementById("has_header").value)); + // if(document.getElementById("has_header")){ + // $('#result').find('#0').removeClass("unlinked"); + // } ids.forEach(grey_out); } \ No newline at end of file diff --git a/static/js/main.js b/static/js/main.js index be8a9fa..6b557ca 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -22,7 +22,10 @@ function createMapping(e, img){ } - +/** + * stores current mappings in mappingString + * ? + */ document.getElementById("save").addEventListener("click", function(){ console.log("Saving..."); var mappingString = ""; @@ -45,6 +48,7 @@ document.getElementById("save").addEventListener("click", function(){ document.getElementById("cancel").addEventListener("click", function(){ if(confirm("Leave map without saving?")){ + console.log("Redirecting to homepage"); document.location.replace('/'); } }) diff --git a/static/style.css b/static/style.css index 90a9d40..9af8368 100644 --- a/static/style.css +++ b/static/style.css @@ -170,7 +170,7 @@ margin:0; #help { position: fixed; bottom: 50px; - right: 141px; + right: 142px; } .csvstuff { @@ -184,12 +184,13 @@ margin:0; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ background-color: #f5f5f5; border-right: 1px solid #eee; + z-index: 1; } .map-loader { text-align: center; - margin-left: auto ; - margin-right: auto ; + margin-left: auto; + margin-right: auto; } .maploadbox { diff --git a/templates/map.html b/templates/map.html index 63262cd..72e7735 100644 --- a/templates/map.html +++ b/templates/map.html @@ -5,7 +5,7 @@
- Th +

From 1cde9f080888d90ac84a29290d72a712c9f4836f Mon Sep 17 00:00:00 2001 From: IreLynn Date: Wed, 12 Jul 2017 12:38:47 -0400 Subject: [PATCH 14/31] fixed wonky column widths in table, centered text --- static/js/create_map.js | 2 +- static/js/csv.js | 5 +---- static/style.css | 5 +++++ templates/map.html | 1 - 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/static/js/create_map.js b/static/js/create_map.js index 4234f7a..88d7acf 100644 --- a/static/js/create_map.js +++ b/static/js/create_map.js @@ -10,7 +10,7 @@ var ids = []; function insertAndMapData(x, y, id){ console.log("Mapping id: " + id + " to coordinates " + x + "," + y); - if (id === " " || x == null){ + if (id == " " || x == null){ console.log("Invalid ID"); alert("ID is not valid."); return; diff --git a/static/js/csv.js b/static/js/csv.js index ae65159..93c2e46 100644 --- a/static/js/csv.js +++ b/static/js/csv.js @@ -155,9 +155,6 @@ function grey_out(item, index){ function create_visual(ids){ $('.mapper').addClass("greyOut") $('#result').find('tr').addClass("unlinked"); - console.log(String(document.getElementById("has_header").value)); - // if(document.getElementById("has_header")){ - // $('#result').find('#0').removeClass("unlinked"); - // } + $('#result').find('#0').removeClass("unlinked"); ids.forEach(grey_out); } \ No newline at end of file diff --git a/static/style.css b/static/style.css index 9af8368..b111810 100644 --- a/static/style.css +++ b/static/style.css @@ -173,6 +173,11 @@ margin:0; right: 142px; } +td { + min-width: 20px; + text-align: center; +} + .csvstuff { position: fixed; top: 51px; diff --git a/templates/map.html b/templates/map.html index 72e7735..e1c3ff2 100644 --- a/templates/map.html +++ b/templates/map.html @@ -5,7 +5,6 @@
-

From 8f522a9563025f01947eb7d0eff5d947b7fcf029 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Wed, 12 Jul 2017 15:52:42 -0400 Subject: [PATCH 15/31] played with table CSS a little --- static/js/create_map.js | 5 +++-- static/js/csv.js | 30 +++++++++++++++++++++++++++++- static/js/main.js | 21 +++++++++++++++++++-- static/style.css | 28 +++++++++++++++++++++++++++- templates/map.html | 2 +- 5 files changed, 79 insertions(+), 7 deletions(-) diff --git a/static/js/create_map.js b/static/js/create_map.js index 88d7acf..9982ece 100644 --- a/static/js/create_map.js +++ b/static/js/create_map.js @@ -47,8 +47,9 @@ function mapData(x,y,id){ mapHTML += "data-name=\"" + id + ",all\" "; mapHTML += "coords=\"" + x + "," + y + ",10\" href=\"#\">"; $(".mapper-map").append(mapHTML); - - $('#deleteTag' + id).show(); + + if(!deleteMode) + $('#tagged' + id).show(); map = $('#mapper'); map.mapster('unbind') diff --git a/static/js/csv.js b/static/js/csv.js index 93c2e46..c261fe7 100644 --- a/static/js/csv.js +++ b/static/js/csv.js @@ -122,7 +122,10 @@ function generateTable(data) { for(var row in data) { //HTML addition for new table row (one for every row in CSV) html += '\r\n'; - html += '\r\n'; + if(row != 0) + html += '\r\n'; + else + html += '' for(var item in data[row]) { html += '' + data[row][item] + '\r\n'; } @@ -157,4 +160,29 @@ function create_visual(ids){ $('#result').find('tr').addClass("unlinked"); $('#result').find('#0').removeClass("unlinked"); ids.forEach(grey_out); +} + +/** + * show delete buttons for tagged objects + */ +function showDeletes(){ + $('#delete').hide(); + $('#create').show(); + for (var row in ids){ + if(ids[row]){ + $('#tagged' + row).hide(); + $('#deleteTag' + row).show(); + } + } +} + +function hideDeletes(){ + $('#create').hide(); + $('#delete').show(); + for (var row in ids){ + if(ids[row]){ + $('#tagged' + row).show(); + $('#deleteTag' + row).hide(); + } + } } \ No newline at end of file diff --git a/static/js/main.js b/static/js/main.js index 6b557ca..3f84620 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -6,6 +6,12 @@ function createMapping(e, img){ 3. Wait for user to click data to map to (TODO) 4. Send to "mapData" function that takes x, y, and id, and adds to map (TODO) */ + + //don't allow creation of mappings while delete mode active + if(deleteMode){ + return; + } + var offset = $(".mapper").offset(); var offset_t = $(img).offset().top - $(window).scrollTop(); @@ -54,5 +60,16 @@ document.getElementById("cancel").addEventListener("click", function(){ }) document.getElementById("help").addEventListener("click",function(){ - var instr = alert("To add a tag, click anywhere on the image, then click the data row you wish to tag to that location. A red X will appear which allows you to delete tags you've created. Click 'Save' in the bottom right to save your tags once you've finished.") -}); \ No newline at end of file + alert("To add a tag, click anywhere on the image, then click the data row you wish to tag to that location. A red X will appear which allows you to delete tags you've created. Click 'Save' in the bottom right to save your tags once you've finished.") +}); + +document.getElementById("deleteTags").addEventListener("click", function(){ + if(deleteMode === true){ + deleteMode = false; + hideDeletes(); + } + else{ + deleteMode = true; + showDeletes(); + } +}) \ No newline at end of file diff --git a/static/style.css b/static/style.css index b111810..434043d 100644 --- a/static/style.css +++ b/static/style.css @@ -155,6 +155,13 @@ margin:0; background-color: grey; } +#deleteTags { + position: fixed; + bottom: 50px; + left: 10px; + z-index: 2; +} + #save { position: fixed; bottom: 50px; @@ -173,9 +180,28 @@ margin:0; right: 142px; } +#result { + border: 0; + margin-left: auto; + margin-right: auto; + margin-bottom: 100px; +} + td { - min-width: 20px; + min-width: 25px; + min-height: 25px; text-align: center; + border-color: #bcbcbc; +} + +tr td:first-child { + border: 0; + background-color: #f5f5f5 !important; +} + +tr:first-child td:not(:first-child){ + background-color: #bcbcbc; + border-color: #000000 !important; } .csvstuff { diff --git a/templates/map.html b/templates/map.html index e1c3ff2..316c5c0 100644 --- a/templates/map.html +++ b/templates/map.html @@ -12,7 +12,6 @@
-
@@ -27,6 +26,7 @@
+
From b378e292a40421c8f538c1edfe7a1c5c70d32c94 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 18 Jul 2017 16:19:41 -0400 Subject: [PATCH 16/31] added alert on click of Save button --- static/js/csv.js | 2 +- static/js/jQuery-image-mapster-setup.js | 3 +++ static/js/main.js | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/static/js/csv.js b/static/js/csv.js index c261fe7..ebe2c21 100644 --- a/static/js/csv.js +++ b/static/js/csv.js @@ -163,7 +163,7 @@ function create_visual(ids){ } /** - * show delete buttons for tagged objects + * show/hide delete buttons next to tagged objects */ function showDeletes(){ $('#delete').hide(); diff --git a/static/js/jQuery-image-mapster-setup.js b/static/js/jQuery-image-mapster-setup.js index 9a8d93b..a159410 100644 --- a/static/js/jQuery-image-mapster-setup.js +++ b/static/js/jQuery-image-mapster-setup.js @@ -57,6 +57,9 @@ var inArea, // These are called when user hovers over data in table function tableOver(num){ + //no hover action for title row + if(num === 0) + return; map = $('#mapper'); $( "#" + num ).addClass("hovered"); map.mapster('set_options', single_opts) diff --git a/static/js/main.js b/static/js/main.js index 3f84620..30f5c2d 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -49,7 +49,7 @@ document.getElementById("save").addEventListener("click", function(){ mappings: mappingString }, function(data) { }); - + alert("Map saved."); }); document.getElementById("cancel").addEventListener("click", function(){ From 30fc0c33725b85eb216640230633c484b9bcac57 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 18 Jul 2017 16:25:11 -0400 Subject: [PATCH 17/31] hid login button, renamed main.py to __init__.py because that's a thing --- main.py => __init__.py | 0 templates/base.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename main.py => __init__.py (100%) diff --git a/main.py b/__init__.py similarity index 100% rename from main.py rename to __init__.py diff --git a/templates/base.html b/templates/base.html index 858e600..95760ad 100644 --- a/templates/base.html +++ b/templates/base.html @@ -46,7 +46,7 @@
From bcd5c5702189631f66a6058df0500018441ffcde Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 18 Jul 2017 16:29:00 -0400 Subject: [PATCH 18/31] edited verbiage tag==>mapping --- static/js/main.js | 2 +- templates/map.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index 30f5c2d..0bd516c 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -60,7 +60,7 @@ document.getElementById("cancel").addEventListener("click", function(){ }) document.getElementById("help").addEventListener("click",function(){ - alert("To add a tag, click anywhere on the image, then click the data row you wish to tag to that location. A red X will appear which allows you to delete tags you've created. Click 'Save' in the bottom right to save your tags once you've finished.") + alert("To add a mapping, click anywhere on the image, then click the data row you wish to map to that location. A red X will appear which allows you to delete mappings you've created. Click 'Save' in the bottom right to save your map once you've finished.") }); document.getElementById("deleteTags").addEventListener("click", function(){ diff --git a/templates/map.html b/templates/map.html index 316c5c0..8621597 100644 --- a/templates/map.html +++ b/templates/map.html @@ -26,7 +26,7 @@
-
+
From 1b25553c64779cbb216789f3229366e27d8402a0 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Sun, 23 Jul 2017 23:07:53 -0400 Subject: [PATCH 19/31] fixed version number lol --- templates/base.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/base.html b/templates/base.html index 95760ad..a8b6c3b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -57,7 +57,7 @@
-
Image Map for MetPet v0.8
+
Image Map for MetPet v1.0
\ No newline at end of file From 1632fd6f9887c97c16b9ffb67fce081d1e838ce0 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Sun, 23 Jul 2017 23:32:25 -0400 Subject: [PATCH 20/31] added 'hint' on CSV upload page informing user that point number should go in first column of file being uploaded --- static/js/csv.js | 2 ++ static/js/main.js | 2 +- templates/map.html | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/static/js/csv.js b/static/js/csv.js index ebe2c21..16ebd76 100644 --- a/static/js/csv.js +++ b/static/js/csv.js @@ -30,11 +30,13 @@ function hide_csv_import(){ $('#result').empty(); $('#upload').hide(); $('#files').hide(); + $('#hint').hide(); } function show_csv_import(){ $('#upload').show(); $('#files').show(); + $('#hint').show(); } function processFile(e) { diff --git a/static/js/main.js b/static/js/main.js index 0bd516c..e9b640e 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -60,7 +60,7 @@ document.getElementById("cancel").addEventListener("click", function(){ }) document.getElementById("help").addEventListener("click",function(){ - alert("To add a mapping, click anywhere on the image, then click the data row you wish to map to that location. A red X will appear which allows you to delete mappings you've created. Click 'Save' in the bottom right to save your map once you've finished.") + alert("To add a mapping, click anywhere on the image, then click the data row you wish to map to that location. If you click the 'Delete Mappings' button, a red X will appear next to each mapped row which allows you to delete mappings you've created. Click 'Save' in the bottom right to save your map once you've finished.") }); document.getElementById("deleteTags").addEventListener("click", function(){ diff --git a/templates/map.html b/templates/map.html index 8621597..b5138e9 100644 --- a/templates/map.html +++ b/templates/map.html @@ -5,6 +5,7 @@
+

From 785c275c2590b26846c38a4ff31a595ec4bc8400 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Mon, 24 Jul 2017 00:13:18 -0400 Subject: [PATCH 21/31] trying something with hide button --- templates/map.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/map.html b/templates/map.html index b5138e9..3cdfe69 100644 --- a/templates/map.html +++ b/templates/map.html @@ -5,7 +5,7 @@
- +

From 97e6947a6fa3eae9c0a26b2072fb29485831ed8a Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 25 Jul 2017 18:30:33 -0400 Subject: [PATCH 22/31] set high max content length (trying to fix csv issue) --- __init__.py | 1 + static/js/main.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/__init__.py b/__init__.py index b17acee..17ba85c 100644 --- a/__init__.py +++ b/__init__.py @@ -5,6 +5,7 @@ app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://postgres:test@localhost/immp' app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True; +app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024 # 100MB limit db = SQLAlchemy(app) # Database schema diff --git a/static/js/main.js b/static/js/main.js index e9b640e..a5c77b2 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -60,7 +60,7 @@ document.getElementById("cancel").addEventListener("click", function(){ }) document.getElementById("help").addEventListener("click",function(){ - alert("To add a mapping, click anywhere on the image, then click the data row you wish to map to that location. If you click the 'Delete Mappings' button, a red X will appear next to each mapped row which allows you to delete mappings you've created. Click 'Save' in the bottom right to save your map once you've finished.") + alert("To add a mapping, click anywhere on the image, then click the data row you wish to map to that location. If you click the 'Delete Mappings' button, a red X will appear next to each mapped row which allows you to delete mappings you've created. Click 'Create Mappings to return to create mode. Click 'Save' in the bottom right to save your map once you've finished.") }); document.getElementById("deleteTags").addEventListener("click", function(){ From 157913cb7324e3e8e980d09af979d2f34e0f4c37 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 25 Jul 2017 18:37:53 -0400 Subject: [PATCH 23/31] undid hide button thing --- templates/map.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/map.html b/templates/map.html index 3cdfe69..b5138e9 100644 --- a/templates/map.html +++ b/templates/map.html @@ -5,7 +5,7 @@
- +

From 7c1dc906beada1d534eb474d609bc37da9cb9ef5 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 25 Jul 2017 18:49:48 -0400 Subject: [PATCH 24/31] attempting try/exception in postcsv --- __init__.py | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/__init__.py b/__init__.py index 17ba85c..077d233 100644 --- a/__init__.py +++ b/__init__.py @@ -44,12 +44,17 @@ def postmap(): @app.route('/postcsv') def postcsv(): - id = request.args.get('mapID', 0, type=int) - csv = request.args.get('csv') - map = Maps.query.filter_by(id=id).first() - map.csv = csv - db.session.commit() - return jsonify(csv=csv) + try: + id = request.args.get('mapID', 0, type=int) + csv = request.args.get('csv') + map = Maps.query.filter_by(id=id).first() + map.csv = csv + db.session.commit() + return jsonify(csv=csv) + except Exception: + db.session.rollback() + win32api.Messagebox(0,'CSV failed to save.','WARNING') + return jsonify{'Failure'}; @app.route('/postmappings') def postmappings(): From 4e98f60dc9941080adffc4d1a040c2c9beeca31f Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 25 Jul 2017 18:56:03 -0400 Subject: [PATCH 25/31] Revert "attempting try/exception in postcsv" This reverts commit 7c1dc906beada1d534eb474d609bc37da9cb9ef5. try/exception appears to have broken the site lol nice good --- __init__.py | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/__init__.py b/__init__.py index 077d233..17ba85c 100644 --- a/__init__.py +++ b/__init__.py @@ -44,17 +44,12 @@ def postmap(): @app.route('/postcsv') def postcsv(): - try: - id = request.args.get('mapID', 0, type=int) - csv = request.args.get('csv') - map = Maps.query.filter_by(id=id).first() - map.csv = csv - db.session.commit() - return jsonify(csv=csv) - except Exception: - db.session.rollback() - win32api.Messagebox(0,'CSV failed to save.','WARNING') - return jsonify{'Failure'}; + id = request.args.get('mapID', 0, type=int) + csv = request.args.get('csv') + map = Maps.query.filter_by(id=id).first() + map.csv = csv + db.session.commit() + return jsonify(csv=csv) @app.route('/postmappings') def postmappings(): From ec4a50c9833097b862205c29e058f98513cd3566 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Mon, 31 Jul 2017 17:36:01 -0400 Subject: [PATCH 26/31] added cancel mapping button; having issue with display:none --- static/js/main.js | 10 ++++++++++ static/style.css | 6 ++++++ templates/map.html | 1 + 3 files changed, 17 insertions(+) diff --git a/static/js/main.js b/static/js/main.js index a5c77b2..ab9fea1 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -12,6 +12,8 @@ function createMapping(e, img){ return; } + $('#canceltag').show(); + var offset = $(".mapper").offset(); var offset_t = $(img).offset().top - $(window).scrollTop(); @@ -28,6 +30,14 @@ function createMapping(e, img){ } +document.getElementById("canceltag").addEventListener("click", function(){ + createMode = false; + $('.unlinked').removeClass("unlinked"); + $('.linked').removeClass("linked"); + $('.greyOut').removeClass("greyOut"); + $('#canceltag').hide(); +}) + /** * stores current mappings in mappingString * ? diff --git a/static/style.css b/static/style.css index 434043d..77e2fb2 100644 --- a/static/style.css +++ b/static/style.css @@ -155,6 +155,12 @@ margin:0; background-color: grey; } +#canceltag { + position: fixed; + top: 60px; + right: 10px; +} + #deleteTags { position: fixed; bottom: 50px; diff --git a/templates/map.html b/templates/map.html index b5138e9..13fc5b5 100644 --- a/templates/map.html +++ b/templates/map.html @@ -28,6 +28,7 @@
+
From 3b9bbca4ed04a21c341767a19d608b6c18faab14 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Mon, 31 Jul 2017 18:04:24 -0400 Subject: [PATCH 27/31] fixed show/hide issue with cancel mappings button --- static/js/main.js | 4 ++-- templates/map.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index ab9fea1..4090650 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -12,7 +12,7 @@ function createMapping(e, img){ return; } - $('#canceltag').show(); + $('#cancelTag').show(); var offset = $(".mapper").offset(); @@ -35,7 +35,7 @@ document.getElementById("canceltag").addEventListener("click", function(){ $('.unlinked').removeClass("unlinked"); $('.linked').removeClass("linked"); $('.greyOut').removeClass("greyOut"); - $('#canceltag').hide(); + $('#cancelTag').hide(); }) /** diff --git a/templates/map.html b/templates/map.html index 13fc5b5..cc7450a 100644 --- a/templates/map.html +++ b/templates/map.html @@ -28,7 +28,7 @@
-
+
From abe8355498d85aa59e662901e1313a91ace72684 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Mon, 31 Jul 2017 19:49:49 -0400 Subject: [PATCH 28/31] fixed cancel mapping button --- static/js/create_map.js | 5 +---- static/js/jQuery-image-mapster-setup.js | 6 +----- 2 files changed, 2 insertions(+), 9 deletions(-) diff --git a/static/js/create_map.js b/static/js/create_map.js index 9982ece..886e330 100644 --- a/static/js/create_map.js +++ b/static/js/create_map.js @@ -9,6 +9,7 @@ var x, y; var ids = []; function insertAndMapData(x, y, id){ + $('#cancelTag').hide(); console.log("Mapping id: " + id + " to coordinates " + x + "," + y); if (id == " " || x == null){ console.log("Invalid ID"); @@ -60,10 +61,6 @@ function mapData(x,y,id){ .mapster('set', true, 'all') .mapster('set_options', single_opts); } - }).bind('mouseout', function () { - if (!inArea) { - map.mapster('set', false, 'all'); - } }); } diff --git a/static/js/jQuery-image-mapster-setup.js b/static/js/jQuery-image-mapster-setup.js index a159410..a739ade 100644 --- a/static/js/jQuery-image-mapster-setup.js +++ b/static/js/jQuery-image-mapster-setup.js @@ -16,7 +16,7 @@ var inArea, }, all_opts = { fillColor: 'ffffff', - fillOpacity: 0.6, + fillOpacity: 0.4, stroke: true, strokeWidth: 2, strokeColor: 'ffffff' @@ -49,10 +49,6 @@ var inArea, .mapster('set', true, 'all') .mapster('set_options', single_opts); } - }).bind('mouseout', function () { - if (!inArea) { - map.mapster('set', false, 'all'); - } }); // These are called when user hovers over data in table From 72eb659d6a5ecf77b41fff497574dd5e52f90796 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 26 Sep 2017 12:13:47 -0400 Subject: [PATCH 29/31] implemented scroll to row in table on hover functionality but it's not very visually pleasing (immediately scrolls such that desired cell is at top of sidebar, even if the cell is already in view) --- __init__.py | 2 +- static/js/jQuery-image-mapster-setup.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/__init__.py b/__init__.py index 17ba85c..ef78f3b 100644 --- a/__init__.py +++ b/__init__.py @@ -12,7 +12,7 @@ class Maps(db.Model): id = db.Column(db.Integer(), primary_key=True) url = db.Column(db.String(512), unique=True) - csv = db.Column(db.String()) + csv = db.Column(db.Text()) mapping = db.Column(db.String()) def __init__(self, url): diff --git a/static/js/jQuery-image-mapster-setup.js b/static/js/jQuery-image-mapster-setup.js index a739ade..7fa7c10 100644 --- a/static/js/jQuery-image-mapster-setup.js +++ b/static/js/jQuery-image-mapster-setup.js @@ -28,6 +28,8 @@ var inArea, onMouseover: function (data) { inArea = true; $( "#" + data.key ).addClass("hovered"); + var e1 = document.getElementById(data.key); + e1.scrollIntoView(true); }, onMouseout: function (data) { inArea = false; From 3f690429a4ad038d013556b4cfdfe8ec15690f03 Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 31 Oct 2017 23:03:04 -0400 Subject: [PATCH 30/31] tried to fix csv issue. appears to be working on my end but tryna push so i can deploy it & see if it works in my droplet --- __init__.py | 8 +- diff | 338 ----------------------------------------------- static/js/csv.js | 17 +++ 3 files changed, 22 insertions(+), 341 deletions(-) delete mode 100644 diff diff --git a/__init__.py b/__init__.py index ef78f3b..09ae29d 100644 --- a/__init__.py +++ b/__init__.py @@ -42,10 +42,12 @@ def postmap(): return redirect('/map/id='+str(map.id)) -@app.route('/postcsv') +@app.route('/postcsv', methods=['POST']) def postcsv(): - id = request.args.get('mapID', 0, type=int) - csv = request.args.get('csv') + #id = request.args.get('mapID', 0, type=int) + id = request.json['mapID'] + #csv = request.args.get('csv') + csv = request.json['csv'] map = Maps.query.filter_by(id=id).first() map.csv = csv db.session.commit() diff --git a/diff b/diff deleted file mode 100644 index 64ea54f..0000000 --- a/diff +++ /dev/null @@ -1,338 +0,0 @@ -diff --git a/static/js/create_map.js b/static/js/create_map.js -index 5d882e4..f634fd4 100644 ---- a/static/js/create_map.js -+++ b/static/js/create_map.js -@@ -1,8 +1,11 @@ - // createMode indicates if we are or are not in create mode - var createMode = false; - var deleteMode = false; --var x; --var y; -+ -+/** Coordinates of last point clicked on image. */ -+var x, y; -+ -+/** data store for tagged features/rows */ - var ids = []; - - function insertAndMapData(x, y, id){ -@@ -19,6 +22,17 @@ function insertAndMapData(x, y, id){ - mapData(x,y,id); - } - -+////// -+/*var a = document.createElement('area'); -+a['shape'] = 'circle'; -+a['id'] = '1'; -+a['data-name'] = '1,all'; -+a['coords'] = '191,81,10'; -+a['href'] = '#'; -+$(".mapper-map").append(a);*/ -+ -+////// -+ - function mapData(x,y,id){ - var mapHTML = "\r\n'; -- } -- html += '\r\n'; -- } -- if(data[0].constructor === Array) { -- for(var row in data) { -- //HTML addition for new table row (one for every row in CSV) -- html += '\r\n'; -- for(var item in data[row]) { -- html += '' + data[row][item] + '\r\n'; -- } -- html += '\r\n'; -- html += '\r\n'; -+ -+ data = normalizeCSV(data); -+ -+ /** -+ * constructs html for rows with listeners for tableOver, tableOut, and Click on rows -+ * -+ * * tableData tag with column info -+ * * button tag to delete with unmapData onclick listener -+ * -+ * @param tableOver, tableOut, dataClick, unmapData -+ */ -+ for(var row in data) { -+ //HTML addition for new table row (one for every row in CSV) -+ html += '\r\n'; -+ for(var item in data[row]) { -+ html += '' + data[row][item] + '\r\n'; - } -+ html += '\r\n'; -+ html += '\r\n'; - } -- if(data[0].constructor === Object) { -- for(var row in data) { -- html += '\r\n'; -- for(var item in data[row]) { -- html += '' + item + ':' + data[row][item] + '\r\n'; -- } -- html += '\r\n'; } -- } -- -+ - return html; - } - -@@ -110,6 +152,9 @@ function generateTableFromJSON(json) { - } - } - -+/** -+ * refactor to use $.fn.toggleClass -+ */ - function grey_out(item, index){ - $('#result').find('#' + index).removeClass("unlinked"); - $('#result').find('#' + index).addClass("linked"); -diff --git a/static/js/imagemap.js b/static/js/imagemap.js -deleted file mode 100644 -index 9a8d93b..0000000 ---- a/static/js/imagemap.js -+++ /dev/null -@@ -1,80 +0,0 @@ --// javascript -- --// Set up some options objects: 'single_opts' for when a single area is selected, which will show just a border --// 'all_opts' for when all are highlighted, to use a different effect - shaded white with a white border --// 'initial_opts' for general options that apply to the whole mapster. 'initial_opts' also includes callbacks --// onMouseover and onMouseout, which are fired when an area is entered or left. We will use these to show or --// remove the captions, and also set a flag to let the other code know if we're currently in an area. --var inArea, -- map = $('#mapper'), -- single_opts = { -- fillColor: 'ff0000', -- fillOpacity: 0.2, -- stroke: true, -- strokeColor: 'ff0000', -- strokeWidth: 2 -- }, -- all_opts = { -- fillColor: 'ffffff', -- fillOpacity: 0.6, -- stroke: true, -- strokeWidth: 2, -- strokeColor: 'ffffff' -- }, -- initial_opts = { -- mapKey: 'data-name', -- isSelectable: false, -- // These are called when user hovers over mapped locations on image -- onMouseover: function (data) { -- inArea = true; -- $( "#" + data.key ).addClass("hovered"); -- }, -- onMouseout: function (data) { -- inArea = false; -- $( "#" + data.key ).removeClass("hovered"); -- } -- }; -- opts = $.extend({}, all_opts, initial_opts, single_opts); -- -- // Bind to the image 'mouseover' and 'mouseout' events to activate or deactivate ALL the areas, like the -- // original demo. Check whether an area has been activated with "inArea" - IE<9 fires "onmouseover" -- // again for the image when entering an area, so all areas would stay highlighted when entering -- // a specific area in those browsers otherwise. It makes no difference for other browsers. -- -- map.mapster('unbind') -- .mapster(opts) -- .bind('mouseover', function () { -- if (!inArea) { -- map.mapster('set_options', all_opts) -- .mapster('set', true, 'all') -- .mapster('set_options', single_opts); -- } -- }).bind('mouseout', function () { -- if (!inArea) { -- map.mapster('set', false, 'all'); -- } -- }); -- --// These are called when user hovers over data in table --function tableOver(num){ -- map = $('#mapper'); -- $( "#" + num ).addClass("hovered"); -- map.mapster('set_options', single_opts) -- .mapster('set', true, "" + num); -- --} -- --function tableOut(num){ -- map = $('#mapper'); -- $( "#" + num ).removeClass("hovered"); -- map.mapster('set_options', single_opts) -- .mapster('set', false, "" + num); -- --} -- --$(document).ready(function() { -- $('img').imgAreaSelect({ -- handles: true -- }); -- --}); -\ No newline at end of file diff --git a/static/js/csv.js b/static/js/csv.js index 16ebd76..4d5c99e 100644 --- a/static/js/csv.js +++ b/static/js/csv.js @@ -67,11 +67,28 @@ function build_table(csv){ function push_csv_to_db(csv){ var id = window.location.pathname; id = id.substring(id.indexOf("id=")+3, id.length); + $.ajax({ + type: 'POST', + url: $SCRIPT_ROOT + '/postcsv', + data: JSON.stringify({ mapID: id, csv: csv }), + contentType: 'application/json', + success: function(data){console.log("success")}, + error: function(data){console.log("failure")} + }); + /* + $.post($SCRIPT_ROOT + '/postcsv', JSON.stringify({ + mapID: id, + csv: csv + }), function(data) { + }, 'json'); + */ + /* $.getJSON($SCRIPT_ROOT + '/postcsv', { mapID: id, csv: csv }, function(data) { }); + */ } /** From f7aec828792e84315df1355e7e9c06f4b36de0be Mon Sep 17 00:00:00 2001 From: IreLynn Date: Tue, 31 Oct 2017 23:39:36 -0400 Subject: [PATCH 31/31] cleaned up a little. csv issue appears to actually be fixed --- __init__.py | 2 -- static/js/csv.js | 14 -------------- 2 files changed, 16 deletions(-) diff --git a/__init__.py b/__init__.py index 09ae29d..4accd8c 100644 --- a/__init__.py +++ b/__init__.py @@ -44,9 +44,7 @@ def postmap(): @app.route('/postcsv', methods=['POST']) def postcsv(): - #id = request.args.get('mapID', 0, type=int) id = request.json['mapID'] - #csv = request.args.get('csv') csv = request.json['csv'] map = Maps.query.filter_by(id=id).first() map.csv = csv diff --git a/static/js/csv.js b/static/js/csv.js index 4d5c99e..b8e6d2a 100644 --- a/static/js/csv.js +++ b/static/js/csv.js @@ -75,20 +75,6 @@ function push_csv_to_db(csv){ success: function(data){console.log("success")}, error: function(data){console.log("failure")} }); - /* - $.post($SCRIPT_ROOT + '/postcsv', JSON.stringify({ - mapID: id, - csv: csv - }), function(data) { - }, 'json'); - */ - /* - $.getJSON($SCRIPT_ROOT + '/postcsv', { - mapID: id, - csv: csv - }, function(data) { - }); - */ } /**