Update templates/proposed-GUI.html

templates/proposed-GUI.html

@@ -597,7 +597,7 @@ proj1.addEventListener('input',function(){
           optn2.text= prjname1sec1[s];
           optn2.value= prjname1sec1[s];
           optn2.id= prjname1sec1[s]+s;
-          if(!(prjname1sec1[s].startsWith('1.0') || prjname1sec1[s].startsWith('3.2') || prjname1sec1[s].startsWith('2.2')))
+          if(!(prjname1sec1[s].startsWith('1.0') || prjname1sec1[s].startsWith('3.2') || prjname1sec1[s].startsWith('2.2') || prjname1sec1[s].startsWith('2.1')))
             {
               optn2.style.color='#bdbcbc';
               optn2.style.cursor='not-allowed';
@@ -613,7 +613,7 @@ proj1.addEventListener('input',function(){
           optn2.text= prjname1sec2[s];
           optn2.value= prjname1sec2[s];
           optn2.id= prjname1sec2[s]+s;
-          if(!(prjname1sec2[s].startsWith('1.0') || prjname1sec2[s].startsWith('3.2') || prjname1sec2[s].startsWith('2.2')))
+          if(!(prjname1sec2[s].startsWith('1.0') || prjname1sec2[s].startsWith('3.2') || prjname1sec2[s].startsWith('2.2') || prjname1sec2[s].startsWith('2.1')))
             {
               optn2.style.color='#555';
               optn2.style.cursor='not-allowed';
@@ -629,7 +629,7 @@ proj1.addEventListener('input',function(){
           optn2.text= prjname1sec3[s];
           optn2.value= prjname1sec3[s];
           optn2.id= prjname1sec3[s]+s;
-          if(!(prjname1sec3[s].startsWith('1.0') || prjname1sec3[s].startsWith('3.2')|| prjname1sec3[s].startsWith('2.2')))
+          if(!(prjname1sec3[s].startsWith('1.0') || prjname1sec3[s].startsWith('3.2')|| prjname1sec3[s].startsWith('2.2') || prjname1sec2[s].startsWith('2.1')))
             {
               optn2.style.color='#555';
               optn2.style.cursor='not-allowed';
@@ -645,7 +645,7 @@ proj1.addEventListener('input',function(){
           optn2.text= prjname1sec4[s];
           optn2.value= prjname1sec4[s];
           optn2.id= prjname1sec4[s]+s;
-          if(!(prjname1sec4[s].startsWith('1.0') || prjname1sec4[s].startsWith('3.2') || prjname1sec4[s].startsWith('2.2')))
+          if(!(prjname1sec4[s].startsWith('1.0') || prjname1sec4[s].startsWith('3.2') || prjname1sec4[s].startsWith('2.2') || prjname1sec2[s].startsWith('2.1')))
             {
               optn2.style.color='#555';
               optn2.style.cursor='not-allowed';
@@ -661,7 +661,7 @@ proj1.addEventListener('input',function(){
           optn2.text= prjname2sec[s];
           optn2.value= prjname2sec[s];
           optn2.id= prjname2sec[s]+s;
-          if(!(prjname2sec[s].startsWith('1.0') || prjname2sec[s].startsWith('3.2') || prjname2sec[s].startsWith('2.2')))
+          if(!(prjname2sec[s].startsWith('1.0') || prjname2sec[s].startsWith('3.2') || prjname2sec[s].startsWith('2.2') || prjname1sec2[s].startsWith('2.1')))
             {
               optn2.style.color='#555';
               optn2.style.cursor='not-allowed';
@@ -677,7 +677,7 @@ proj1.addEventListener('input',function(){
           optn2.text= prjname3sec1[s];
           optn2.value= prjname3sec1[s];
           optn2.id= prjname3sec1[s]+s;
-          if(!(prjname3sec1[s].startsWith('1.0') || prjname3sec1[s].startsWith('3.2') || prjname3sec1[s].startsWith('2.2')))
+          if(!(prjname3sec1[s].startsWith('1.0') || prjname3sec1[s].startsWith('3.2') || prjname3sec1[s].startsWith('2.2') || prjname1sec2[s].startsWith('2.1')))
             {
               optn2.style.color='#555';
               optn2.style.cursor='not-allowed';
@@ -693,7 +693,7 @@ proj1.addEventListener('input',function(){
           optn2.text= prjname3sec2[s];
           optn2.value= prjname3sec2[s];
           optn2.id= prjname3sec2[s]+s;
-          if(!(prjname3sec2[s].startsWith('1.0') || prjname3sec2[s].startsWith('3.2') || prjname3sec2[s].startsWith('2.2')))
+          if(!(prjname3sec2[s].startsWith('1.0') || prjname3sec2[s].startsWith('3.2') || prjname3sec2[s].startsWith('2.2') || prjname1sec2[s].startsWith('2.1')))
             {
               optn2.style.color='#555';
               optn2.style.cursor='not-allowed';
@@ -709,7 +709,7 @@ proj1.addEventListener('input',function(){
           optn2.text= prjname3sec3[s];
           optn2.value= prjname3sec3[s];
           optn2.id= prjname3sec3[s]+s;
-          if(!(prjname3sec3[s].startsWith('1.0') || prjname3sec3[s].startsWith('3.2') || prjname3sec3[s].startsWith('2.2')))
+          if(!(prjname3sec3[s].startsWith('1.0') || prjname3sec3[s].startsWith('3.2') || prjname3sec3[s].startsWith('2.2') || prjname1sec2[s].startsWith('2.1')))
             {
               optn2.style.color='#555';
               optn2.style.cursor='not-allowed';
@@ -986,7 +986,8 @@ function getData(form) {
   document.getElementById('measureADRbutton').style.boxShadow = 'none';
   document.getElementById('measureADRbutton').style.color = 'white';
   document.getElementById('measureADRbutton').style.backgroundColor="rgb(154,152,152)";
-
+ 
+  var underimg=document.getElementById('underimgbuttons');
   var formData = new FormData(form);
   clearInterval(interval)
   
@@ -1017,10 +1018,11 @@ function getData(form) {
   if (canvasimg){
     buf=canvasimg.split("data:image/png;base64,")
     answers.push(tomeasureproj, 220,allcolors , ratio1, ratio2 ,pdfpath,buf[1]); 
- } else
-    answers.push(tomeasureproj, 0,[] , ratio1, ratio2 ,pdfpath);  
-
-  $.ajax({
+ } else{
+      answers.push(tomeasureproj, 0,[] , ratio1, ratio2 ,pdfpath);  
+    }
+if  (!formvalues['selectprojs'].startsWith('2.1'))
+{  $.ajax({
             type: "POST",
             url: "/savebase64Img/",
 
@@ -1083,6 +1085,16 @@ function getData(form) {
       //spreadsheetURL=data[3]
 
 
+   }
+   if (formvalues['selectprojs'].startsWith('2.1'))
+    {
+      //ignore data[0] --> img passed directly
+      //dropboxLink=data[1]
+     
+      //spreadsheetId=data[2]
+      //spreadsheetURL=data[3]
+      spreadsheetURL=data[0]
+
    }
   else{
     SimilarAreaDictionary=data[1];
@@ -1101,8 +1113,7 @@ function getData(form) {
     imgcanvas.id='imgcanvas';
      imgcanvas.alt="Larry";
      imgcanvas.style.zIndex=999;
- 
-     var underimg=document.getElementById('underimgbuttons');
+
  
      backimg.style.backgroundColor="transparent";
      backimg.style.opacity="1";
@@ -1151,7 +1162,75 @@ function getData(form) {
      rightside.append(imgcanvas);
      rightside.insertBefore(imgcanvas,underimg); 
           });
+}
+else{
+  $.ajax({
+            type: "POST",
+            url: "/2.1Trial/",
+
+            // set content type header to use Flask response.get_json()
+            contentType: "application/json",
+
+            // convert data/object to JSON to send
+            data: JSON.stringify({allvalues:answers}),
+
+            // expect JSON data in return (e.g. Flask jsonify)
+            dataType: "json",
+
+            // handle response
+            success: function(response) {
+                console.log(response);
+            },
+            error: function(err) {
+                console.log(err);
+            }
+          }).done(function(data){
+            spreadsheetURL=data[0];
+            var backimg=document.getElementById('backgroundimg');
+  var rightside=document.getElementById('rightside');
+  document.getElementById("loading").hidden = true;
+  
+  document.getElementById('duplicater').removeAttribute('hidden');
+  document.getElementById('doneebackground').removeAttribute('hidden');
+  
+
+  // clearInterval()
+  document.getElementById('measureADRbutton').removeAttribute('disabled');
+  document.getElementById('measureADRbutton').style.cursor='pointer';
+  document.getElementById('measureADRbutton').style.color = 'white';
+  document.getElementById('measureADRbutton').style.backgroundColor="#16c72e";
+  document.getElementById('measureADRbutton').addEventListener('mouseover',function(){
+    document.getElementById('measureADRbutton').style.color='black';
+    document.getElementById('measureADRbutton').style.boxShadow=' 0 0 8px 2px #16c72e';
+  })
+
+
+  document.getElementById('measureADRbutton').addEventListener('mouseout',function(){
+    document.getElementById('measureADRbutton').style.color='white';
+    document.getElementById('measureADRbutton').style.boxShadow='none';
+  });
+
+            var legendbutton= document.createElement("button");
+            legendbutton.id='measureADRbutton2';
+            legendbutton.innerText='Legend and Data created';
+            legendbutton.style.backgroundColor='rgb(5, 43, 235)';
+            legendbutton.addEventListener('mouseover',function(){
+              legendbutton.style.boxShadow='0 0 8px 2px rgb(5, 43, 235)';
+            })
+            legendbutton.addEventListener('mouseout',function(){
+              legendbutton.style.boxShadow='none';
+            })
+        
+        
+            //  legendbutton.margin.horizontal='0';
+            legendbutton.addEventListener('click',function(){
+              window.open( spreadsheetURL);
+          
+            })
+            underimg.append(legendbutton);
 
+          });
+}
 if (ratio1 ==0)
 
     
@@ -2117,6 +2196,7 @@ function colors(){
 
 var ry = [[]];
 var canvas = document.querySelector("#myCanvas");
+
 // let w = (canvas.width = 450);
 // let h = (canvas.height = 280);
 
@@ -2141,40 +2221,13 @@ myCanvas.addEventListener("click", e => {
 
   
   ry[ry.length - 1].push({ x: x, y: y, color:hex2rgb(color) });
-  // delete everything
-  // ctx.clearRect(0, 0, w, h);
-  // draw everything
-  // drawGrid();
-  // console.log(canvaswindow.parentElement.document)
-//  canvaswindow.window.oncontextmenu = function (e) {
-//   e.preventDefault()
-//   alert('Right Click')
-// }
-
   drawChart();
 
 });
 
-
-// NewShapeButtonId.addEventListener("click", e => {
-//   //when NewShapeButtonId is clicked, a new array is pushed into the ry
-  
-//   // 
-
-
-//  drp= generatecolorPickers()
-//  console.log('drppp',drp)
-//   canvaswindow.childNodes[7].onchange = change; //canvas color element --> child 7
-//   ry.push([]);
-//   // ry.push({x: x, y: y, strokecolor:color});
-// });
-
 function drawChart() {
-
-
-
   ctx.lineWidth = 15;
-  
+
   // for every array in the ry array
   for (let index = 0; index < ry.length; index++) {
     // for every point in the ry[index]
@@ -2228,6 +2281,7 @@ var levelsin = document.getElementById('levelcheckbox');
 var canvaswindow= document.getElementById('canvaswindow');
 var undoButtonId=document.getElementById('undoButtonId');
 NewShapeButtonId=document.getElementById('NewShapeButtonId');
+// NewShapeButtonId.style.color='blue';
 var savecanvas=document.getElementById('savecanvas');
 
 levelsin.addEventListener('click',function(){
@@ -2235,8 +2289,9 @@ levelsin.addEventListener('click',function(){
     {
       // console.log(proj.value, proj1.value , projsec.value, pdfname)
       $.get( '/canvaspdftoimgBackground/'+pdfname).then (function(data){ 
+
           var popup = window.open('');   
-  
+          // popup.document.body.style.zoom=0.4;
             var element = popup.document.createElement('div');
             element.setAttribute('id', 'mydiv');
           canvaswindow.childNodes[1].height=data[1]; //canvas -->child 3
@@ -2249,11 +2304,11 @@ levelsin.addEventListener('click',function(){
           imgDrawon.src = 'data:image/gif;base64,' +data[0];
           imgDrawon.width=data[2];
           imgDrawon.id='imgcanvas';
-          imgDrawon.alt="Larry";
-
+          // imgDrawon.alt="Larry";
+       
 
           imgDrawon.onload = function(){
-          ctx.drawImage(imgDrawon,0,0);   
+         
           }
           
 
@@ -2292,14 +2347,6 @@ levelsin.addEventListener('click',function(){
         drp.childNodes[1].onchange=change;
 
         })
-        // [drp.childNodes].forEach(function(elem){
-        //   elem.addEventListener('click',function(){
-        //     // elem.onchange=change;
-        //     console.log('hhahahahhahugaugkd')
-        //   })
-        //   })
-
-
       })
       
       savecanvas.addEventListener('click',function(){
@@ -2307,10 +2354,10 @@ levelsin.addEventListener('click',function(){
         image.id = "pic";
         image.src = canvas.toDataURL("image/png");
         canvasimg=image.src;
-
-
       })
 
+
+     
     }
 })
 
@@ -2448,7 +2495,7 @@ var createdTimeDiv= document.getElementById('createdTimeDiv');
 getlegendstoDirectory()
 function getlegendstoDirectory(){
   $.get( '/getdrivelinks/'+'0').then (function(data){ 
-  
+      console.log(data)
       pathsarr=data
       if (!legendscontent.children[1]){
         var allprjdiv= document.createElement("div");
@@ -2609,7 +2656,7 @@ legendscontent.querySelectorAll('label').forEach(function(elem){
             newlabelsec.textContent=prjname1sec1[cc];
             newlabelsec.id='prjsec';
             newlabelsec.className='prjsecclass';
-            if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') ))
+            if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') || newlabelsec.textContent.startsWith('2.2')  || newlabelsec.textContent.startsWith('2.1')))
           { 
             newlabelsec.style.color='lightgray';
             i.style.color='lightgray'
@@ -2641,7 +2688,7 @@ legendscontent.querySelectorAll('label').forEach(function(elem){
            newlabelsec.textContent=prjname1sec2[cc];
            newlabelsec.id='prjsec';
            newlabelsec.className='prjsecclass';
-           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') ))
+           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') || newlabelsec.textContent.startsWith('2.2')  || newlabelsec.textContent.startsWith('2.1')))
           { 
             newlabelsec.style.color='lightgray';
             i.style.color='lightgray'
@@ -2674,7 +2721,7 @@ legendscontent.querySelectorAll('label').forEach(function(elem){
            newlabelsec.textContent=prjname1sec2[cc];
            newlabelsec.id='prjsec';
            newlabelsec.className='prjsecclass';
-           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') ))
+           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') || newlabelsec.textContent.startsWith('2.2') || newlabelsec.textContent.startsWith('2.1')))
           { 
             newlabelsec.style.color='lightgray';
             i.style.color='lightgray'
@@ -2707,7 +2754,7 @@ legendscontent.querySelectorAll('label').forEach(function(elem){
            newlabelsec.textContent=prjname1sec4[cc];
            newlabelsec.id='prjsec';
            newlabelsec.className='prjsecclass';
-           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') ))
+           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') || newlabelsec.textContent.startsWith('2.2') || newlabelsec.textContent.startsWith('2.1')))
           { 
             newlabelsec.style.color='lightgray';
             i.style.color='lightgray'
@@ -2740,7 +2787,7 @@ legendscontent.querySelectorAll('label').forEach(function(elem){
            newlabelsec.textContent=prjname2sec[cc];
            newlabelsec.id='prjsec';
            newlabelsec.className='prjsecclass';
-           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') ))
+           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') || newlabelsec.textContent.startsWith('2.2') || newlabelsec.textContent.startsWith('2.1')))
           { 
             newlabelsec.style.color='lightgray';
             i.style.color='lightgray'
@@ -2774,7 +2821,7 @@ legendscontent.querySelectorAll('label').forEach(function(elem){
            newlabelsec.textContent=prjname3sec1[cc];
            newlabelsec.id='prjsec';
            newlabelsec.className='prjsecclass';
-           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') ))
+           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') || newlabelsec.textContent.startsWith('2.2')  || newlabelsec.textContent.startsWith('2.1')))
           { 
             newlabelsec.style.color='lightgray';
             i.style.color='lightgray'
@@ -2806,7 +2853,7 @@ legendscontent.querySelectorAll('label').forEach(function(elem){
            newlabelsec.textContent=prjname3sec2[cc];
            newlabelsec.id='prjsec';
            newlabelsec.className='prjsecclass';
-           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') ))
+           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') || newlabelsec.textContent.startsWith('2.2') || newlabelsec.textContent.startsWith('2.1')))
           { 
             newlabelsec.style.color='lightgray';
             i.style.color='lightgray'
@@ -2839,7 +2886,7 @@ legendscontent.querySelectorAll('label').forEach(function(elem){
            newlabelsec.textContent=prjname3sec3[cc];
            newlabelsec.id='prjsec';
            newlabelsec.className='prjsecclass';
-           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2') ))
+           if (!(newlabelsec.textContent.toString().startsWith('1.0') || newlabelsec.textContent.startsWith('3.2')  || newlabelsec.textContent.startsWith('2.2') || newlabelsec.textContent.startsWith('2.1')))
           { 
             newlabelsec.style.color='lightgray';
             i.style.color='lightgray'