Marthee commited on
Commit
04212b0
·
1 Parent(s): 4d37bdb

Update templates/proposed-GUI.html

Browse files
Files changed (1) hide show
  1. templates/proposed-GUI.html +971 -660
templates/proposed-GUI.html CHANGED
@@ -6,7 +6,7 @@
6
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
7
  <link rel="stylesheet" href="static/style.css">
8
  <meta charset="utf-8">
9
- <title>ADR Console - V2</title>
10
 
11
  </head>
12
  <body >
@@ -29,17 +29,37 @@
29
  <div id="loading" hidden>
30
 
31
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  <div id="rightside">
33
  <div id="backgroundimg" >
34
 
35
  <!-- <iframe id="pdfiframeid0" src="https://research.google.com/pubs/archive/44678.pdf" style=" visibility:hidden; width:700px; height: 400px;"> </iframe>
36
  -->
 
 
 
 
 
 
37
  </div>
38
- <div id="underimgbuttons"> </div>
39
 
40
  </div>
41
 
42
- <form method="post" onsubmit=getData() id="myForm" >
43
  <div id ="">
44
  <select name="selectproj" class="selectionsProj" required >
45
 
@@ -70,14 +90,22 @@
70
  <option value="NRM Section-B">NRM Section-B</option> -->
71
  </select>
72
  </div>
73
-
74
 
75
  <div id ="tomeasurediv">
76
  <label id="measureLabel">Document To Measure</label> <br>
77
  <div id="measureCheckbox">
78
- <select style="margin-left: -1%;" hidden name="measureselectname" id="measureselectid" required multiple size="5">
79
  <!-- <option value="" disabled selected hidden>Measure this Document</option> -->
80
  </select>
 
 
 
 
 
 
 
 
81
  </div>
82
  </div>
83
 
@@ -94,15 +122,15 @@
94
 
95
  </div>
96
  <!-- <br> -->
97
- <div id="radiosColors" >
98
- <label id=nLevels name="levelsnamelabel" >Number of levels: </label>
99
-
100
- <input id=lvlinput type="number" name="levelsnameinput" oninput="generatecolorPickers()" min="1" value="1"> <i class="fa fa-info-circle" id="infotool" > <span class="tooltiptext">Choose whether this project contains levels or not. If you wish to measure all of the plan, let the number of plans equal to one. If you wish to measure certain regions of the plan or have the plan divided into levels,
101
- please type in a number greater than 1 (number of levels). </span> </i>
102
-
 
103
  <div id="colorpickers">
104
- <!-- -->
105
- </div>
106
 
107
  </div>
108
  <br>
@@ -112,34 +140,25 @@
112
  <script src="https://cdn.lordicon.com/bhenfmcm.js"></script>
113
  <lord-icon
114
  src="https://cdn.lordicon.com/ynwbvguu.json"
115
- trigger="hover" colors="primary:black" id="addicon" onclick="duplicate({{mylist}})">
116
  </lord-icon>
117
  </div>
118
  <audio id="myAudio" autoplay></audio>
119
- <!-- <br> -->
120
  </form>
121
-
122
-
123
- <!-- <form action="/forward/" method="post"> -->
124
- <!-- <form method="post" id="myFormsecond" > -->
125
- <div id ="duplicater" class="duplicaterclass">
126
  <select name="measurementscripts" class="measurementselections" id="measurementselectionsid" oninput=get3rddropdown() >
127
- <option id="hiddenselect" value="" disabled selected hidden > Select </option>
128
- <!-- <option value="ground beams" >Ground Beams </option>
129
- <option value="pile caps"> Pile Caps</option> -->
130
  </select>
131
 
132
  <select name="select" class="selections" id="selectionsid" oninput=get3rddropdown()>
133
-
134
  </select>
135
  <select name="measureitem" class="measureitems" id="measureitemsid">
136
-
137
  </select>
138
-
139
  <br>
140
- <div id="repeatforloop" class="repeatforloopclass00" name="repeatforloopname " > <!-- onchange="getmctName()"> -->
141
-
142
-
143
  <input type="text" id="text0" name="text1name" placeholder="GB-1" class=gb>
144
  <input type="text" id="text1" name="text2name" placeholder="A" class=a>
145
  <input type="text" id="text2" name="text3name" placeholder="Depth" class=depth>
@@ -148,44 +167,28 @@
148
  onclick="addmctnameicon()"
149
  src="https://cdn.lordicon.com/mecwbjnp.json"
150
  trigger="hover"
 
151
  id="addmctnameid"
152
  colors="primary:black,secondary:black">
153
  </lord-icon>
154
-
155
  </div>
156
-
157
-
158
- </div>
159
-
160
- <button id="doneebackground" onclick="getSecondData()" > Export Summary
161
- <!-- <script src="https://cdn.lordicon.com/bhenfmcm.js"></script>
162
- <lord-icon
163
- src="https://cdn.lordicon.com/egiwmiit.json"
164
- trigger="hover"
165
- colors="primary:black"
166
- onclick="getSecondData()"
167
- id="donebutton" >
168
- </lord-icon> -->
169
- </button>
170
 
171
  <!-- </form> -->
172
 
173
  <div hidden id ="duplicaterhidden" class="duplicaterclasshidden">
 
174
  <select name="measurementscripts" class="measurementselections" id="measurementselectionsid" oninput="get3rddropdown()">
175
  <option value="" disabled selected hidden>Select</option>
176
- <!-- <option value="ground beams" >Ground Beams </option>
177
- <option value="pile caps"> Pile Caps</option> -->
178
  </select>
179
 
180
  <select name="select" class="selections" id="selectionsid" oninput=get3rddropdown()>
181
 
182
  </select>
183
  <select name="measureitem" class="measureitems" id="measureitemsid">
184
- <!-- <option value="" disabled selected hidden>Area</option> -->
185
- <!-- <option value="area" >Area </option>
186
- <option value="perimeter"> Perimeter</option>
187
- <option value="length" disabled> Length</option>
188
- <option value="count" disabled> Count</option> -->
189
  </select>
190
 
191
  <br>
@@ -200,17 +203,23 @@
200
  onclick="addmctnameicon()"
201
  src="https://cdn.lordicon.com/mecwbjnp.json"
202
  trigger="hover"
 
203
  id="addmctnameid"
204
  colors="primary:black,secondary:black">
205
  </lord-icon>
206
-
 
 
 
 
 
 
 
 
207
  </div>
208
-
209
-
210
  </div>
211
-
212
-
213
-
214
  </div>
215
 
216
  <div id="legends" class="tabcontent">
@@ -235,75 +244,73 @@
235
 
236
  </div>
237
 
238
- <div class="dropdown-content">
239
- <div id="userguidetext">
240
- <div id="textfirstpage">
241
- <label style="font-style: oblique;"> <br>
242
- Please read the following before you use this tool. </label>
243
- <br><br>
244
- <label style="font-style: oblique;" >Note : The algorithm is based on detecting shapes and colors from the plan. Some shapes such as tables and textboxes carrying plan-related information, may also be viewed as shapes and so added to the algorithm.
245
- To avoid this, please tidy up the plan before choosing to measure it, by using an outside tool to either erase them or to put a white rectangle over them.</label>
246
- <br>
247
-
248
- <br>
249
- The tool is divided into two main parts:
250
- <br>
251
- <li id="userguideheadings"> First Part </li>
252
- <br> There are three dropdowns available. Select the name of the project you wish to measure, along with the project part, and the project section.
253
- <br > <br>
254
- <label style="font-style: italic;"> Please double check the project section chosen as this determines the code that will be applied to the plan. </label>
255
- <br>
256
- <br>
257
- Mark the project you want to meaure from the section labeled 'To measure'. Additionally, you have the ability to view any relevant documents you might want.(optional).
258
- <br> <label style="font-style: italic;">Pixel to Metric conversion important notes : </label> Once you have selected a specific plan to measure, you will be provided with a pdf with
259
- a colored rectangle drawn in it. Please open this pdf in Bluebeam, measure its area and perimeter, and then enter those values in the textboxes that will shown below the relevant documents.
260
- You may think of this rectangle's measurement as a scale check for Bluebeam.
261
- <br> <br> <label style="font-style: italic;">Notes when measuring secion 1.0: </label>
262
- <label id=info >You can measure several levels independently using the textbox below the Scale document heading, which is titled "Number of levels." </label>
263
- <br> Before selecting this plan from the 'To Measure' option, please draw shapes around the relevant regions on Bluebeam or using any other external tool if the project you want to measure contains more than 1 level.
264
- <br> Additionally, you must include the levels' colors in RGB (Red - Green - Blue) format.
265
-
266
- <br>
267
-
268
- <i id="secondpage" class="fa fa-arrow-right" aria-hidden="true"></i>
269
- <br>
270
- </div>
271
- <div id="textsecondpage" hidden=until-found>
272
  <br>
273
- <li id="userguideheadings" > Second part </li>
274
- <br>
275
- First, please open the google sheets link labeled 'Legend' and fill in the names of each shape.
276
- <br>Ex. The first row shows the measurement of GB-1 , in the first column type in GB-1.
277
- <br> After you are done with filling in the legend, go back to the ADR Console.
278
- You will find three dropdowns and three textboxes.
279
-
280
- <li style="list-style-type:square;"> The first dropdown will allow you to choose whether the shape is a ground beam or a pile cap. </li>
281
- <li style="list-style-type:square;"> The second dropdown is the choice of (Area-perimeter-Length-Count).</li>
282
- <li style="list-style-type:square;"> The third dropdown gives you the first part of the MC-T Name.</li>
283
- <br> Then fill in the rows below the dropdowns with the corresponding detail and depth.
284
- The plus button allows you to add more rows within this block.
285
- <br>
286
- There is another button above the dropdowns (to the right) that allows you to add another block and repeat the process for another item (Ground Beam or Pile Cap) or (Area-perimeter-Length-Count).
287
- <br><br>
288
- <i id="firstpage" class="fa fa-arrow-left" aria-hidden="true"></i>
289
- <br>
290
-
291
- </div>
292
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
293
  </div>
294
- </div>
295
-
296
-
297
-
298
-
299
  </body>
300
-
301
  </html>
302
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
303
  <script >
304
- ////////////////////////////////////////////////////////////////////////////////
305
- /* link to dropbox to view pdfs */
306
- ////////////////////////////////////////////////////////////////////////////////
 
 
 
307
  document.getElementById('secondpage').addEventListener('click',function(){
308
  document.getElementById('textsecondpage').removeAttribute('hidden');
309
  document.getElementById('textfirstpage').setAttribute('hidden',true)
@@ -314,6 +321,11 @@ document.getElementById('firstpage').addEventListener('click',function(){
314
  document.getElementById('textsecondpage').setAttribute('hidden',true)
315
 
316
  });
 
 
 
 
 
317
  document.getElementById('measureADRbutton').addEventListener('click',function(){
318
  if (!document.getElementsByClassName('selectionsProj')[0].value)
319
  document.getElementsByClassName('selectionsProj')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
@@ -321,12 +333,10 @@ document.getElementById('measureADRbutton').addEventListener('click',function(){
321
  document.getElementsByClassName('selectionsProjp')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
322
  if (!document.getElementsByClassName('selectionsProjs')[0].value)
323
  document.getElementsByClassName('selectionsProjs')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
324
- // if (!document.getElementById('measureselectid').value)
325
- // document.getElementById('measureselectid').style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
326
-
327
- // document.getElementById("loading").hidden = false;
328
  var rightside=document.getElementById('rightside');
329
- var rightchidren= rightside.children
330
  for (let ch=0;ch<rightchidren.length; ch++)
331
  {
332
  if (rightchidren[ch].id == 'imgcanvas')
@@ -335,16 +345,13 @@ document.getElementById('measureADRbutton').addEventListener('click',function(){
335
  document.getElementById('underimgbuttons').innerHTML=''
336
  clearInterval()
337
  clearTimeout()
338
-
339
  }
340
-
341
  }
342
-
343
-
344
  });
345
 
346
-
347
- //////////////////////////////////////////////////////////////////////////
 
348
  function openTab(evt, tabname) {
349
  // Declare all variables
350
  var i, tabcontent, tablinks;
@@ -368,64 +375,37 @@ function openTab(evt, tabname) {
368
  }
369
  document.getElementById("pagetitle").click();
370
 
371
-
372
- /////////////////////////////////////////////////////////////////////////////////
373
-
374
- var listoftitles=[];
375
- var listofids=[];
376
- // let interval0= setInterval( function() {
377
- // const delay = ms => new Promise(res => setTimeout(res, ms));
378
- function retrieveLinks(){
379
- var linkscontent= document.getElementsByClassName('dropbtnLinks-content')[0]
380
-
381
- $.get( '/getdrivelinks/'+'0').then (function(data){ //data= [id , path] -path: prjname/part/sec
382
- for (let iter=0 ; iter <data.length ; iter++)
383
- {
384
- console.log(data[iter])
385
- // var optn = document.createElement("a")
386
- // console.log(data[1][iter])
387
- // optn.href= 'https://docs.google.com/spreadsheets/d/'+data[1][iter]
388
- // optn.target="_blank"
389
-
390
- // optn.textContent=data[0][iter]
391
-
392
- // if (listoftitles.includes(data[0][iter] )){
393
- // console.log('mwgod')
394
- // }
395
- // else{
396
- // linkscontent.append(optn)
397
- // listoftitles.push(data[0][iter])
398
- // }
399
- }
400
-
401
- });
402
- }
403
- // retrieveLinks()
404
- // }, 500)
405
- ////////////////////////////////////////////////////////////////////////////////
406
  var dupliatei = 0; // i
407
  var clonedDivId=0;
408
  var original = document.getElementById('duplicaterhidden');
409
  var addciconval=0; //div duplicate
410
  var jj=0;
411
  const vals = [];
412
- function duplicate(mylist) {
 
 
413
  addciconval+=1;
414
  jj=0;
 
 
 
 
 
 
415
  var clone = original.cloneNode(true); // "deep" clone
416
-
417
- // or clone.id = ""; if the divs don't need an ID
418
  clone.id = 'duplicater' + ++dupliatei;
419
  clonedDivId=clone.id;
420
- // clone.style.marginLeft='3px';
421
-
422
- // console.log(clone.children)
423
- clone.children[4].style.marginLeft='2px';
424
- clone.children[0].style.marginBottom='10px';
425
-
426
  clone.removeAttribute("hidden");
427
  clone.setAttribute('class','duplicaterclass'+dupliatei);
428
-
429
  clone.getElementsByClassName('measurementselections')[0].setAttribute('name', 'measurementscripts'+dupliatei);
430
  clone.getElementsByClassName('measurementselections')[0].setAttribute('class', 'measurementselections'+dupliatei);
431
  clone.getElementsByClassName('measureitems')[0].setAttribute('name', 'measureitem'+dupliatei);
@@ -435,19 +415,19 @@ console.log(data[iter])
435
  clone.getElementsByClassName('repeatforloopclasshidden')[0].setAttribute('id', 'repeatforloop'+addciconval+'0');
436
  clone.getElementsByClassName('repeatforloopclasshidden')[0].setAttribute('name', 'repeatforloopname'+addciconval+'0');
437
  clone.getElementsByClassName('repeatforloopclasshidden')[0].setAttribute('class', 'repeatforloopclass'+addciconval+'0');
438
-
439
- original.parentNode.appendChild(clone).insertBefore(document.getElementById('doneebackground'),null);
 
 
 
440
  console.log( original.parentNode)
441
 
442
  var section = document.getElementsByClassName("selectionsProjs")[0]
443
-
444
- // console.log(section.value);
445
- // drpdwn.innerHTML='';
446
  if (addciconval>0){
447
  var drpdwn1 = document.getElementsByClassName("measurementselections"+dupliatei)[0]; //groundbeams
448
  if (section.value.startsWith('1.0'))
449
  {
450
-
451
  var opt = document.createElement("OPTION");
452
  opt.text= 'Select';
453
  opt.value= "";
@@ -480,54 +460,30 @@ if (addciconval>0){
480
  }
481
  }
482
  }
483
- //accordion funv
 
 
 
 
484
  function userguideclick(){
485
  var acc = document.getElementsByClassName("dropdown-content")[0];
486
  var i;
 
487
 
488
- // for (i = 0; i < acc.length; i++) {
489
- // acc.addEventListener("click", function() {
490
- /* Toggle between adding and removing the "active" class,
491
- to highlight the button that controls the panel */
492
- acc.classList.toggle("active");
493
-
494
- /* Toggle between hiding and showing the active panel */
495
- // var panel = this.nextElementSibling;
496
- if (acc.style.display === "block") {
497
- acc.style.display = "none";
498
 
499
- } else {
500
- acc.style.display = "block";
501
- acc.style.backgroundColor=(0, 153, 255);
502
- }
503
- // });
504
  }
505
-
506
- // var acc1 = document.getElementsByClassName("dropbtnLinks")[0];
507
-
508
-
509
- // // for (i = 0; i < acc.length; i++) {
510
- // acc1.addEventListener("click", function() {
511
- // /* Toggle between adding and removing the "active" class,
512
- // to highlight the button that controls the panel */
513
- // this.classList.toggle("active");
514
-
515
- // /* Toggle between hiding and showing the active panel */
516
- // var panel1 = document.getElementsByClassName('dropbtnLinks-content')[0]
517
- // if (panel1.style.display === "block") {
518
- // panel1.style.display = "none";
519
-
520
- // } else {
521
- // panel1.style.display = "block";
522
- // acc1.style.backgroundColor=(0, 153, 255);
523
- // }
524
- // });
525
- // }
526
-
527
  var areainpixels=0;
528
  var prminpixels=0;
529
 
530
- ///////////////
531
  prjname1=['2340 United Living Low Rise Building','2341 Bouygues-Cotswold','2342 GF Tomlinson - Hardingstone Primary School']
532
  prjname1parts=['Block O Pumphouse','Hawthorn','Ling','Red Oak']
533
  prjname2parts=['Block B','Block G']
@@ -542,11 +498,16 @@ function userguideclick(){
542
  prjname3sec2=['2.2 RC Slabs','8.1 Site Preparation Works','8.4 Fencing, Railing, Walls','8.5 External Fixtures', ' 8.6 External Drainage']
543
  prjname3sec3=['1.0 Substructure','2.2 RC Slabs','2.3 Roof','2.4 Stairs','3.2 Floor Finishes','3.3 Ceiling Finishes','4.0 Fittings, Furnishings and Equipments','5.1 Sanitary']
544
 
 
 
 
545
 
 
546
  var proj = document.getElementsByClassName("selectionsProj")[0];
547
  var proj1 = document.getElementsByClassName("selectionsProjp")[0];
548
  var projsec = document.getElementsByClassName("selectionsProjs")[0];
549
-
 
550
  proj.addEventListener('input',function(){
551
  proj.style.boxShadow=( '2px 2px 2px gray')
552
  proj1.innerHTML='';
@@ -561,17 +522,18 @@ function userguideclick(){
561
  opt.value= "";
562
  opt.hidden=true;
563
  projsec.add(opt);
 
564
  if (proj.value==prjname1[0]){
565
- for (let p=0 ; p<prjname1parts.length;p++)
566
- {
567
- var optn1 = document.createElement("OPTION");
568
- optn1.text= prjname1parts[p];
569
- optn1.value= prjname1parts[p];
570
- optn1.id= prjname1parts[p]+p;
571
- proj1.add(optn1);
572
 
573
- }
574
- }
575
  if (proj.value==prjname1[1]){
576
  for (let p=0 ; p<prjname2parts.length;p++)
577
  {
@@ -603,7 +565,7 @@ proj1.addEventListener('input',function(){
603
  optn.value= "";
604
  optn.hidden=true;
605
  projsec.add(optn);
606
- console.log(proj1.value,prjname1parts[0])
607
 
608
  if (proj1.value==prjname1parts[0].toString())
609
  {
@@ -734,14 +696,6 @@ console.log(proj1.value,prjname1parts[0])
734
  }
735
  }
736
 
737
- // for (let p=0 ; p<=prjname1parts.length;p++)
738
- // {
739
- // var optn1 = document.createElement("OPTION");
740
- // optn1.text= prjname1parts[p];
741
- // optn1.value= prjname1parts[p];
742
- // optn1.id= prjname1parts[p]+p;
743
- // proj1.add(optn1);
744
- // }
745
 
746
  })
747
 
@@ -749,15 +703,11 @@ projsec.addEventListener('input',function(){
749
  projsec.style.boxShadow=( '2px 2px 2px gray')
750
  })
751
 
752
-
 
753
 
754
  function getproj(){
755
-
756
- // var audio = new Audio('templates/x.mp3');
757
-
758
- // audio.loop = false;
759
- // audio.play();
760
- // console.log('clicked')
761
  var proj = document.getElementsByClassName("selectionsProj")[0];
762
  var projectVal=proj.value.toString() //selected project
763
 
@@ -789,9 +739,9 @@ projsec.addEventListener('input',function(){
789
  // meas.innerHTML='';
790
  // relv.innerHTML='';
791
  var measSelect = document.getElementById("measureselectid");
792
-
793
  var relvSelect = document.getElementById("relvselectid");
794
- console.log(relvSelect)
795
 
796
  measSelect.removeAttribute("hidden");
797
  relvSelect.removeAttribute("hidden");
@@ -857,7 +807,7 @@ document.getElementById('measureADRbutton').onclick= function()
857
  measids.forEach(function(elem) {
858
  elem.addEventListener("change", function() {
859
 
860
- console.log(elem.value);
861
  measSelect.style.boxShadow='none';
862
 
863
  document.getElementById("all").style.display = "block";
@@ -865,7 +815,7 @@ measids.forEach(function(elem) {
865
  $.get( '/pixelimg/'+JSON.stringify(pixelArr)) .then( function(data) {
866
  // alert('Measure the white square drawn in the pdf on Bluebeam, then enter its area and perimeter in ur desired scale. \n' );
867
  if(window.confirm("Measure the white square drawn in the pdf on Bluebeam, then enter its area and perimeter in ur desired scale. \n")){
868
-
869
  window.open(data[2]);
870
 
871
  }
@@ -879,7 +829,7 @@ measids.forEach(function(elem) {
879
  prmRatio.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
880
 
881
  }
882
-
883
  var scalelbl= document.createElement("label");
884
  scalelbl.innerText='Scale Document';
885
  scalelbl.id='measureLabel';
@@ -903,7 +853,10 @@ measids.forEach(function(elem) {
903
  areaRatio.style.boxShadow='none';
904
  })
905
  areaRatio.required=true;
906
- areadiv.append(areaRatiolbl,areaRatio)
 
 
 
907
  var br2= document.createElement("br");
908
  var br3= document.createElement("br");
909
  var prmdiv=document.createElement("div");
@@ -925,30 +878,36 @@ measids.forEach(function(elem) {
925
  prmRatio.style.boxShadow='none';
926
  })
927
  prmRatio.required=true;
928
- prmdiv.append(prmRatiolbl, prmRatio)
 
 
 
929
  var ratiosdiv= document.getElementById("ratios");
930
  ratiosdiv.innerHTML='';
931
  ratiosdiv.append(scalelbl);
932
  ratiosdiv.append(br1);
933
  ratiosdiv.append(areadiv)
934
- // ratiosdiv.append(areaRatiolbl);
935
- // ratiosdiv.append(areaRatio);
936
- // ratiosdiv.append(br2);
937
- // ratiosdiv.append(br3);
938
  ratiosdiv.append(prmdiv)
939
- // ratiosdiv.append(prmRatiolbl);
940
- // ratiosdiv.append(prmRatio);
941
-
942
  areainpixels=data[0];
943
- prminpixels=data[1];
944
- console.log(data)
945
-
946
 
947
 
948
  });
949
- // console.log(elem)
950
- // });
951
-
 
 
 
 
 
 
 
 
 
 
 
 
952
  });
953
 
954
  });
@@ -956,6 +915,33 @@ measids.forEach(function(elem) {
956
  });
957
  }
958
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
959
  var spreadsheetId='';
960
  var spreadsheetURL='';
961
  var colorsUsed='';
@@ -965,6 +951,8 @@ var tomeasureproj=''
965
  var pdfpath=[];
966
  var interval = null;
967
  var namepathArr=''
 
 
968
  function getData(form) {
969
 
970
 
@@ -988,7 +976,7 @@ function getData(form) {
988
  tomeasureproj='';
989
  pdfpath=[];
990
  formvalues=Object.fromEntries(formData);
991
- console.log(formvalues);
992
 
993
  // iterate through entries...
994
  for (var pair of formData.entries()) {
@@ -998,28 +986,46 @@ function getData(form) {
998
  }
999
  }
1000
  tomeasureproj=formvalues['measureselectname']; //proj name
1001
- ratio1=formvalues['areaRatio']/areainpixels;
 
1002
 
1003
- ratio2=formvalues['prmRatio']/prminpixels;
1004
  pdfpath.push(formvalues['selectproj'],formvalues['selectprojp'] ,formvalues['selectprojs'])
1005
 
1006
- if (colorsarr.length>0)
1007
- answers.push(tomeasureproj, 220,colorsarr , ratio1, ratio2 ,pdfpath);
1008
- else
1009
- answers.push(tomeasureproj, 0,colorsarr , ratio1, ratio2 ,pdfpath);
1010
- if (ratio1 >0)
1011
 
1012
-
 
 
1013
 
1014
- $.get('/projecttomeasure/'+ JSON.stringify(answers)).then( function(data) {
1015
- try{
1016
- // var mp3_url = 'https://media.geeksforgeeks.org/wp-content/uploads/20190531135120/beep.mp3';
1017
- // (new Audio(mp3_url)).play()
1018
- retrieveLinks()
1019
- var backimg=document.getElementById('backgroundimg');
 
 
 
 
 
 
 
 
 
 
 
 
1020
  var rightside=document.getElementById('rightside');
1021
  document.getElementById("loading").hidden = true;
1022
- // rightside.removeChild(0);
 
 
 
 
1023
  // clearInterval()
1024
  document.getElementById('measureADRbutton').removeAttribute('disabled');
1025
  document.getElementById('measureADRbutton').style.cursor='pointer';
@@ -1121,86 +1127,207 @@ $.get('/projecttomeasure/'+ JSON.stringify(answers)).then( function(data) {
1121
  underimg.style.display='flex';
1122
  rightside.append(imgcanvas);
1123
  rightside.insertBefore(imgcanvas,underimg);
1124
- } catch (error) {
1125
- console.log(error)
1126
- alert('Error '+error+' occured. Please Refresh the page')
1127
- }
1128
- //////////////////////////////////////////////////////////////////////////////////////////
1129
- let delrows2 = {
1130
- content : {},
1131
- id : {},
1132
- subject :{}
1133
- };
1134
 
1135
- var delrows1='';
1136
- var flag=0;
1137
- pdfpath=[];
1138
- pdfpath.push(formvalues['selectproj'],formvalues['selectprojp'] ,formvalues['selectprojs'])
1139
- var rightsideids=[];
1140
- if (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].startsWith('3.2') )
1141
- interval= setInterval( function() {
1142
-
1143
- const delay = ms => new Promise(res => setTimeout(res, ms));
1144
- delay(2000)
1145
- $.getJSON('/_submission', {
1146
-
1147
- // dict: JSON.stringify(SimilarAreaDictionary),
1148
- dict1: JSON.stringify(list1),
1149
- spreadsheetId:spreadsheetId,
1150
- pdfpathpath:JSON.stringify(pdfpath),
1151
- path:Object.fromEntries(formData)['measureselectname'],
1152
-
1153
- },function(data1){
1154
-
1155
- if(data1.length >0){
1156
- delrows1=data1[0];
1157
- console.log(data1, delrows1,delrows2)
1158
- console.log(typeof delrows1)
1159
- console.log(typeof delrows2)
1160
- if (JSON.stringify(delrows1)=== JSON.stringify(delrows2))
1161
- {
1162
- console.log('same')
1163
- }
1164
- else{
1165
- // if (data1[0]==1){
1166
- // return data1[0];
1167
- flag=1
1168
- if (confirm("Changes have been made in the markups. Would you like to save and view them in the legend?")) {
1169
-
1170
-
1171
- $.getJSON('/deletemarkupsroute', {
1172
- dict: JSON.stringify(SimilarAreaDictionary),
1173
- deletedrows: JSON.stringify(delrows1),
1174
- path:Object.fromEntries(formData)['measureselectname'],
1175
- spreadsheetId:spreadsheetId,
1176
- areaPermArr: JSON.stringify(data[7]),
1177
- section: Object.fromEntries(formData)['selectprojs'],
1178
- pdfpathpath:JSON.stringify(pdfpath),
1179
-
1180
-
1181
-
1182
- }, function(data2){
1183
- console.log(data2)
1184
- })
1185
- }
1186
- }
1187
- }
1188
- });
1189
-
1190
- delay(6000);
1191
- $.getJSON('/_submission', {
1192
- // dict: JSON.stringify(SimilarAreaDictionary),
1193
- dict1: JSON.stringify(list1),
1194
- spreadsheetId:spreadsheetId,
1195
- pdfpathpath:JSON.stringify(pdfpath),
1196
- path:Object.fromEntries(formData)['measureselectname'],
1197
 
1198
- },function(data11){
1199
- delrows2=data11[0];
1200
-
1201
- })
1202
- },9000)
1203
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1204
 
1205
 
1206
  /////////////////////////
@@ -1222,118 +1349,100 @@ document.getElementById("myForm").addEventListener("submit", function (e) {
1222
  var measitemVal=''
1223
 
1224
  function get3rddropdown(){
1225
-
1226
-
1227
  var divduplicater= document.getElementsByClassName('duplicaterclass')[0].children;
1228
- console.log(divduplicater)
1229
- var inputs =divduplicater[0];// document.getElementsByClassName("measurementselections")[0]; //groundbeams
1230
- console.log(inputs.value);
1231
-
1232
- var measitem = divduplicater[2];//document.getElementsByClassName("measureitems")[0]; //area
1233
- measitemVal=measitem.value.toString() //selected project
1234
- console.log(measitemVal);
1235
 
1236
- var selections = divduplicater[1]; //document.getElementsByClassName("selections")[0]; //second dropdown(project part)
1237
-
1238
 
1239
  if (addciconval>0){
1240
 
1241
  for (let i =1 ; i <=addciconval ; i++){
1242
- var inputs1 = document.getElementsByClassName("measurementselections"+i)[0]; //groundbeams
1243
- console.log(inputs1.value);
1244
-
1245
- // 17:59 21/06/202317:59 21/06/2023//area
1246
-
1247
- var measitem1 = document.getElementsByClassName("measureitems"+i)[0]; //groundbeams
1248
- measitemVal1=measitem1.value.toString() //selected project
1249
- console.log(measitemVal1);
1250
-
1251
- var selections1 = document.getElementsByClassName("selections"+i)[0]; //second dropdown(project part)
1252
- console.log(selections1, measitem1)
1253
- // remove old dropdown options
1254
-
1255
- ////////////////////////////////////////
1256
- inputs1.addEventListener('click',function(){
1257
- if (inputs1.value=='ground beams' & (selections1.value.startsWith('Pile') || !selections1.value )){
1258
-
1259
- selections1.innerHTML=''
1260
- // if (measitemVal=='area'){
1261
-
1262
- var opt0 = document.createElement("OPTION") ;
1263
- opt0.text= 'Ground Beams:m2';
1264
- opt0.value= 'Ground Beams:m2';
1265
- opt0.id='gbA' ;
1266
- selections1.add(opt0);
1267
- // }
1268
- // else if (measitemVal=='perimeter') {
1269
- var opt1 = document.createElement("OPTION") ;
1270
- opt1.text= 'Ground Beams:m';
1271
- opt1.value= 'Ground Beams:m';
1272
- opt1.id='gbP';
1273
- selections1.add(opt1);
1274
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1275
 
1276
- }
1277
-
1278
- if (inputs1.value=='Floor' & (selections1.value.startsWith('Wall') || !selections1.value )){
1279
- selections1.innerHTML='';
1280
- var optn = document.createElement("OPTION") ;
1281
- optn.text= 'Floor:m2';
1282
- optn.value= 'Floor:m2';
1283
- optn.id='floorA' ;
1284
- selections1.add(optn);
1285
 
1286
- }
1287
-
1288
- if (inputs1.value=='Wall' & (selections1.value.startsWith('Floor') || !selections1.value ) ){
1289
- selections1.innerHTML='';
1290
 
1291
- var opt = document.createElement("OPTION") ;
1292
- opt.text= 'Wall:m';
1293
- opt.value= 'Wall:m';
1294
- opt.id='WallP';
1295
- selections1.add(opt);
 
 
1296
 
1297
- }
1298
 
1299
- if (selections1.value=='Ground Beams:m' || selections1.value=='Wall:m'){
1300
- // measitem1.innerHTML='';
1301
- var ii, L = measitem1.options.length - 1;
1302
- for(ii = L; ii >= 0; ii--) {
1303
- if (measitem1.options[ii].value=='Area')
1304
- measitem1.remove(ii);
1305
- }
1306
- if (measitem1.options.length <2){
1307
- var opt2= document.createElement("option");
1308
- opt2.text= 'Length';
1309
- opt2.value= 'Length';
1310
- opt2.id= 'Length';
1311
- measitem1.add(opt2);
1312
-
1313
- var opt3= document.createElement("option");
1314
- opt3.text= 'Perimeter';
1315
- opt3.value= 'Perimeter';
1316
- opt3.id= 'Perimeter';
1317
- measitem1.add(opt3);
1318
-
1319
- var opt33= document.createElement("option");
1320
- opt33.text= 'Count';
1321
- opt33.value= 'Count';
1322
- opt33.id= 'Count';
1323
- measitem1.add(opt33);
1324
- }
1325
- }
1326
 
1327
- if (selections1.value=='Ground Beams:m2' || selections1.value=='Floor:m2'){
1328
- measitem1.innerHTML='';
1329
- var opt4= document.createElement("option");
1330
- opt4.text= 'Area';
1331
- opt4.value= 'Area';
1332
- opt4.id= 'Area';
1333
- measitem1.add(opt4);
1334
 
1335
- }
1336
-
1337
  });
1338
  if (selections1.value=='Ground Beams:m' || selections1.value=='Wall:m'){
1339
  // measitem1.innerHTML='';
@@ -1349,12 +1458,20 @@ function get3rddropdown(){
1349
  opt21.id= 'Length';
1350
  measitem1.add(opt21);
1351
 
1352
- var opt31= document.createElement("option");
1353
- opt31.text= 'Perimeter';
1354
- opt31.value= 'Perimeter';
1355
- opt31.id= 'Perimeter';
1356
- measitem1.add(opt31);
1357
- }}
 
 
 
 
 
 
 
 
1358
 
1359
  if (selections1.value=='Ground Beams:m2' || selections1.value=='Floor:m2'){
1360
  measitem1.innerHTML='';
@@ -1365,7 +1482,7 @@ function get3rddropdown(){
1365
  measitem1.add(opt41);
1366
 
1367
  }
1368
- inputs1.addEventListener('click',function(){
1369
  if (inputs1.value=='pile caps' & (selections1.value.startsWith('Ground') || !selections1.value ) ){
1370
  selections1.innerHTML='';
1371
  var opt51 = document.createElement("OPTION") ;
@@ -1381,27 +1498,9 @@ function get3rddropdown(){
1381
  opt61.id='pcP';
1382
  selections1.add(opt61);
1383
 
 
1384
  }
1385
 
1386
- // if (selections1.value=='Pile Caps:m'){
1387
- // // measitem1.innerHTML='';
1388
- // var ii, L = measitem1.options.length - 1;
1389
- // for(ii = L; ii >= 0; ii--) {
1390
- // if (measitem1.options[ii].value=='Area')
1391
- // measitem1.remove(ii);
1392
- // }
1393
- // var opt71= document.createElement("option");
1394
- // opt71.text= 'Length';
1395
- // opt71.value= 'Length';
1396
- // opt71.id= 'Length';
1397
- // measitem1.add(opt71);
1398
-
1399
- // var opt81= document.createElement("option");
1400
- // opt81.text= 'Perimeter';
1401
- // opt81.value= 'Perimeter';
1402
- // opt81.id= 'Perimeter';
1403
- // measitem1.add(opt81);
1404
- // }
1405
 
1406
  if (selections1.value=='Pile Caps:m2'){
1407
  measitem1.innerHTML='';
@@ -1413,7 +1512,7 @@ function get3rddropdown(){
1413
 
1414
  }
1415
 
1416
- });
1417
  if (selections1.value=='Pile Caps:m'){
1418
  // measitem1.innerHTML='';
1419
  var ii, L = measitem1.options.length - 1;
@@ -1493,6 +1592,21 @@ function get3rddropdown(){
1493
  opt.id='WallP';
1494
  selections.add(opt);
1495
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1496
  }
1497
 
1498
  if (selections.value=='Ground Beams:m' || selections.value=='Wall:m'){
@@ -1527,6 +1641,8 @@ function get3rddropdown(){
1527
  }
1528
 
1529
  });
 
 
1530
  if (selections.value=='Ground Beams:m'){
1531
  measitem.innerHTML='';
1532
  var op2= document.createElement("option");
@@ -1559,23 +1675,7 @@ function get3rddropdown(){
1559
  measitem.add(op4);
1560
 
1561
  }
1562
- inputs.addEventListener('click',function(){
1563
-
1564
- if (inputs.value=='pile caps' & (selections.value.startsWith('Ground') || !selections.value )){
1565
- selections.innerHTML='';
1566
- var optn = document.createElement("OPTION") ;
1567
- optn.text= 'Pile Caps:m2';
1568
- optn.value= 'Pile Caps:m2';
1569
- optn.id='pcA' ;
1570
- selections.add(optn);
1571
 
1572
- var opt = document.createElement("OPTION") ;
1573
- opt.text= 'Pile Caps:m';
1574
- opt.value= 'Pile Caps:m';
1575
- opt.id='pcP';
1576
- selections.add(opt);
1577
-
1578
- }
1579
  if (selections.value=='Pile Caps:m'){
1580
  measitem.innerHTML='';
1581
  var op2= document.createElement("option");
@@ -1606,42 +1706,11 @@ function get3rddropdown(){
1606
  measitem.add(op4);
1607
 
1608
  }
 
1609
 
1610
- });
1611
- if (selections.value=='Pile Caps:m'){
1612
- measitem.innerHTML='';
1613
- var op2= document.createElement("option");
1614
- op2.text= 'Length';
1615
- op2.value= 'Length';
1616
- op2.id= 'Length';
1617
- measitem.add(op2);
1618
-
1619
- var op3= document.createElement("option");
1620
- op3.text= 'Perimeter';
1621
- op3.value= 'Perimeter';
1622
- op3.id= 'Perimeter';
1623
- measitem.add(op3);
1624
-
1625
- var optk1= document.createElement("option");
1626
- optk1.text= 'Count';
1627
- optk1.value= 'Count';
1628
- optk1.id= 'Count';
1629
- measitem.add(optk1);
1630
- }
1631
-
1632
- if (selections.value=='Pile Caps:m2'){
1633
- measitem.innerHTML='';
1634
- var op4= document.createElement("option");
1635
- op4.text= 'Area';
1636
- op4.value= 'Area';
1637
- op4.id= 'Area';
1638
- measitem.add(op4);
1639
-
1640
- }
1641
 
1642
  }
1643
 
1644
-
1645
 
1646
  var repeatforloopI=0;
1647
  function getmctName(){
@@ -1658,27 +1727,23 @@ function getmctName(){
1658
  })
1659
 
1660
  for (ii=0 ; ii<=addciconval; ii++){
1661
-
1662
-
1663
- // arrFinalMCNames=[];
1664
- if (ii==0){
1665
  var divduplicater= document.getElementsByClassName('duplicaterclass')[0].children;
1666
- console.log('divv ',divduplicater); //
1667
-
1668
- var selections = divduplicater[1];//
1669
- measitemVal=divduplicater[2].value;
1670
- var div=divduplicater[4].children;//
1671
 
1672
  var divValues=['text1'+div[0].value, div[1].value , div[2].value];
1673
  mctname=[selections.value ,divValues , measitemVal ];
1674
- console.log(',ccc',mctname)
1675
  if(div[0].value && div[1].value && div[2].value)
1676
  {
1677
  flag=1;
1678
  arrmctNames.push( mctname);
1679
  }
1680
  else if (div[0].value && !div[1].value && !div[2].value) {
1681
- mctname=[selections.value ,'text1'+div[0].value , measitemVal ];
1682
  flag=1;
1683
  arrmctNames.push( mctname);
1684
  }
@@ -1687,24 +1752,71 @@ function getmctName(){
1687
  flag=1;
1688
  arrmctNames.push( mctname);
1689
  }
1690
- console.log(arrmctNames)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1691
  }
 
1692
  else if (ii>0){
1693
  var divduplicater= document.getElementsByClassName('duplicaterclass'+ii)[0].children;
1694
- console.log('dddd',divduplicater);
1695
- selections = divduplicater[1];//document.getElementsByClassName("selections")[0];
1696
- measitemVal=divduplicater[2].value;
1697
- div=divduplicater[4].children;
 
1698
  var divValues=['text1'+div[0].value, div[1].value , div[2].value];
1699
  mctname=[selections.value ,divValues , measitemVal ];
1700
- console.log(mctname)
1701
  if(div[0].value && div[1].value && div[2].value)
1702
  {
1703
  flag=1;
1704
  arrmctNames.push( mctname);
1705
  }
1706
  else if (div[0].value && !div[1].value && !div[2].value) {
1707
- mctname=[selections.value ,'text1'+div[0].value , measitemVal ];
1708
  flag=1;
1709
  arrmctNames.push( mctname);
1710
  }
@@ -1716,97 +1828,63 @@ function getmctName(){
1716
 
1717
  }
1718
 
1719
-
1720
- console.log(arrmctNames)
1721
- // if (repeatforloopI>0){
1722
- if (ii==0 ){
1723
-
1724
- count=0;
1725
- var ii0selections='';
1726
- var cc= (document.getElementsByClassName('repeatforloopclass'+ii.toString()+'0')[0]).parentNode.children;
1727
- console.log('jjj',cc)
1728
- for (let o =0;o <=cc.length;o++)
1729
- {
1730
- if( cc[o] instanceof(HTMLDivElement) )
1731
- count++;
1732
- ii0selections=cc[1].value;
1733
- measitemVal=cc[2].value;
1734
-
1735
- }
1736
- console.log(count);
1737
- for (let i =1 ; i <count ; i++){
1738
- console.log('inloop',ii.toString()+i.toString())
1739
-
1740
- var replicatedDivChildren=document.getElementsByClassName('repeatforloopclass'+ii.toString()+i.toString())[0].children;
1741
-
1742
- var divValues2=['text1'+replicatedDivChildren[0].value, replicatedDivChildren[1].value , replicatedDivChildren[2].value];
1743
- mctname1=[ii0selections ,divValues2 , measitemVal];
1744
- if(replicatedDivChildren[0].value && replicatedDivChildren[1].value && replicatedDivChildren[2].value)
1745
- {
1746
- // console.log(mctname1);
1747
- flag=1;
1748
- arrmctNames.push(mctname1);
1749
- }
1750
-
1751
- else if(replicatedDivChildren[0].value && !replicatedDivChildren[1].value && !replicatedDivChildren[2].value) {
1752
- mctname1=[ii0selections , 'text1'+replicatedDivChildren[0].value , measitemVal ];
1753
- flag=1;
1754
- arrmctNames.push( mctname1);
1755
- }
1756
- else if(replicatedDivChildren[0].value && replicatedDivChildren[1].value && !replicatedDivChildren[2].value) {
1757
- mctname1=[ii0selections ,['text1'+replicatedDivChildren[0].value , replicatedDivChildren[1].value] , measitemVal];
1758
- flag=1;
1759
- arrmctNames.push( mctname1);
1760
- }
1761
- }
1762
- // console.log(arrmctNames[0][1]);
1763
- }
1764
- else if (ii>0 && addciconval >0 && jj>0)
1765
  {
1766
  count=0;
1767
  var ii0selections='';
1768
- var cc= (document.getElementsByClassName('repeatforloopclass'+ii.toString()+'0')[0]).parentNode.children;
 
1769
 
1770
- for (let o =0;o <=cc.length;o++)
1771
  {
1772
- if( cc[o] instanceof(HTMLDivElement) )
1773
  { count++;
1774
- console.log('divvvv',cc[o])}
1775
- // var selectionsval= cc[o][1];
1776
- // console.log(cc[o].children[1]);
1777
- ii0selections=cc[1].value;
1778
- measitemVal=cc[2].value;
1779
  // count++;
1780
  // ii0selections=cc[3].value;
1781
  }
 
 
1782
  console.log(count);
1783
 
1784
- for (let i =1 ; i < count ; i++){
1785
  console.log('aaaanloop',addciconval.toString()+i.toString())
1786
 
1787
- var replicatedDivChildren=document.getElementsByClassName('repeatforloopclass'+ii.toString()+i.toString())[0].children;
 
 
 
 
 
 
1788
  // console.log(document.getElementsByClassName('repeatforloopclass'+ii.toString()+i.toString())[0].parentElement)
1789
-
1790
- var divValues2=['text1'+replicatedDivChildren[0].value, replicatedDivChildren[1].value , replicatedDivChildren[2].value];
1791
  mctname1=[ii0selections ,divValues2 , measitemVal];
1792
- if(replicatedDivChildren[0].value && replicatedDivChildren[1].value && replicatedDivChildren[2].value)
1793
  {
1794
  arrmctNames.push(mctname1);
1795
  flag=1;
1796
  }
1797
- else if(replicatedDivChildren[0].value && !replicatedDivChildren[1].value && !replicatedDivChildren[2].value)
1798
  {
1799
- mctname1=[ii0selections ,'text1'+replicatedDivChildren[0].value , measitemVal];
1800
  arrmctNames.push(mctname1);
1801
  flag=1;
1802
  }
1803
- else if(replicatedDivChildren[0].value && replicatedDivChildren[1].value && !replicatedDivChildren[2].value)
1804
  {
1805
- mctname1=[ii0selections ,['text1'+replicatedDivChildren[0].value, replicatedDivChildren[1].value] , measitemVal];
1806
  arrmctNames.push(mctname1);
1807
  flag=1;
1808
  }
 
1809
  }
 
 
1810
 
1811
  }
1812
 
@@ -1816,16 +1894,15 @@ if (ii==0 ){
1816
  // {
1817
  //first entry only
1818
  arrFinalMCNames= arrmctNames.slice();
1819
- // }
1820
- console.log(arrmctNames)
1821
 
1822
  if(arrmctNames.length >1){
1823
  var name=[];
1824
  allnames=[];
1825
  arrFinalMCNames = arrmctNames.slice();
1826
- console.log('finalnameflawel',arrFinalMCNames)
1827
  var newarr=[];
1828
- console.log('NAME = ' ,arrmctNames);
1829
  for (let i=0;i<arrmctNames.length; i++)
1830
  { str='';
1831
  newarr=[];
@@ -1835,10 +1912,11 @@ if(arrmctNames.length >1){
1835
 
1836
 
1837
 
1838
- if (arrmctNames[i][1][1] == arrmctNames[j][1][1] && arrmctNames[i][1][2] == arrmctNames[j][1][2])
1839
  { var selectionsname=arrmctNames[i][0] ;
 
1840
  flag=1;
1841
- console.log('foorrr',arrmctNames[i][1][1])
1842
 
1843
  if (allnames.includes(arrmctNames[i][1][0]) )
1844
  {
@@ -1885,7 +1963,7 @@ if(arrmctNames.length >1){
1885
  }
1886
 
1887
  console.log('finals',arrFinalMCNames);
1888
- console.log('fl='+flag)
1889
 
1890
 
1891
  }
@@ -1903,12 +1981,12 @@ if (flag==1){
1903
  return element = arrallvalues[arrallvalues.indexOf(element)];
1904
  }
1905
  });
1906
- console.log(is_same);
1907
  // if (is_same)
1908
  // {
1909
 
1910
  spreadsheetURL=spreadsheetURL+ '/edit#gid='+data[0].toString()
1911
- console.log(spreadsheetURL);
1912
  window.open(spreadsheetURL.toString()) //sheetid
1913
 
1914
  // }
@@ -1921,40 +1999,72 @@ if (flag==1){
1921
  }
1922
 
1923
  }
1924
-
1925
-
1926
 
1927
  function addmctnameicon(){
1928
 
1929
  repeatforloopI+=1
1930
-
1931
  if (clonedDivId==0){
1932
-
1933
  var dupDiv=document.getElementById('duplicater'); //pass kol div hna
1934
-
1935
- }
1936
  else{
1937
-
1938
  var dupDiv=document.getElementById(clonedDivId); //pass kol div hna //akher div et3mlt
1939
-
1940
  }
 
1941
  var div=document.getElementById('repeatforloophidden');
1942
  // console.log('vcc, ' ,dupDiv.children[5]);
1943
  var clone = div.cloneNode(true); // "deep" clone
1944
 
1945
- clone.id = 'repeatforloop'+ addciconval + ++jj;
1946
- clone.setAttribute('class','repeatforloopclass'+addciconval+jj);
1947
- clone.setAttribute('name','repeatforloopname'+addciconval+jj);
1948
  if (clonedDivId==0)
1949
  clone.style.marginLeft='5px';
1950
  else
1951
  clone.style.marginLeft='1px';
1952
 
1953
- dupDiv.appendChild(clone)
1954
- dupDiv.insertBefore(clone,document.getElementById('doneebackground'));
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1955
 
1956
- console.log(dupDiv.children);
1957
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1958
  }
1959
 
1960
  function colors(){
@@ -1980,30 +2090,230 @@ function colors(){
1980
  }
1981
 
1982
  }
1983
- var levelsin = document.getElementsByName('levelsnameinput')[0]; //number of colors -- color pickers
1984
- console.log(levelsin.value)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1985
  function generatecolorPickers(){
1986
- var drp = document.getElementById("colorpickers");
1987
  var section = document.getElementsByClassName('selectionsProjs')[0];
1988
  console.log('section::', section.value)
1989
- if (levelsin.value>1)
1990
- {
1991
  if (section.value.startsWith('3.2')){
1992
  alert('Levels are not supported in section 3.2.')
1993
- levelsin.value=1;
1994
  }
1995
  else if (section.value.startsWith('1.0'))
1996
  {
1997
- drp.innerHTML = '';
1998
- console.log(levelsin.value)
1999
- for (let i=0 ; i<levelsin.value ; i++)
2000
- {
2001
  var color = document.createElement("input");
2002
  color.type='color';
2003
  color.value=getRandomColor();
 
2004
  color.id= 'color';
2005
- color.name='color'+i;
2006
- if ( (drp.offsetWidth) >250)
2007
  drp.style.display='block';
2008
 
2009
  drp.append(color);
@@ -2013,17 +2323,18 @@ else if (section.value.startsWith('1.0'))
2013
 
2014
  }
2015
  console.log(drp)
 
2016
  }
2017
- else{
2018
- drp.innerHTML = '';
2019
- levelsin.value=1;
2020
- }
2021
- }
2022
- else
2023
- {
2024
- drp.innerHTML = '';
2025
- }
2026
- }
2027
  // var tooltipelem = document.getElementById("tooltip");
2028
  // console.log(tooltipelem)
2029
  // tooltipelem.addEventListener('mouseover',function(){
@@ -2062,7 +2373,7 @@ function chooseFirstdrpdwn()
2062
  {
2063
  var section = document.getElementsByClassName("selectionsProjs")[0]
2064
  var drpdwn= document.getElementById('measurementselectionsid');
2065
- console.log(section.value);
2066
  drpdwn.innerHTML='';
2067
 
2068
  if (section.value.startsWith('1.0'))
 
6
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
7
  <link rel="stylesheet" href="static/style.css">
8
  <meta charset="utf-8">
9
+ <title>ADR Console</title>
10
 
11
  </head>
12
  <body >
 
29
  <div id="loading" hidden>
30
 
31
  </div>
32
+
33
+ <div id="canvaswindow" hidden="until-found">
34
+ <canvas id="myCanvas"></canvas>
35
+
36
+
37
+ <input type="button" value="Draw New Shape" id="NewShapeButtonId" />
38
+ <input type="button" value="Undo" id="undoButtonId" />
39
+ <div id="colorpickers">
40
+ <input type="color" id="color" value="#2FFFFF" >
41
+ </div>
42
+ <input type="button" value="save" id="savecanvas" />
43
+ </div>
44
+ <!-- <canvas id="myCanvas2"></canvas> -->
45
+
46
+
47
  <div id="rightside">
48
  <div id="backgroundimg" >
49
 
50
  <!-- <iframe id="pdfiframeid0" src="https://research.google.com/pubs/archive/44678.pdf" style=" visibility:hidden; width:700px; height: 400px;"> </iframe>
51
  -->
52
+ </div>
53
+
54
+
55
+
56
+
57
+ <div id="underimgbuttons">
58
  </div>
 
59
 
60
  </div>
61
 
62
+ <form method="post" id="myForm" >
63
  <div id ="">
64
  <select name="selectproj" class="selectionsProj" required >
65
 
 
90
  <option value="NRM Section-B">NRM Section-B</option> -->
91
  </select>
92
  </div>
93
+
94
 
95
  <div id ="tomeasurediv">
96
  <label id="measureLabel">Document To Measure</label> <br>
97
  <div id="measureCheckbox">
98
+ <select style="margin-left: -1%;" hidden name="measureselectname" id="measureselectid" multiple size="5" required>
99
  <!-- <option value="" disabled selected hidden>Measure this Document</option> -->
100
  </select>
101
+ <select id='selectunitA' hidden>
102
+ <option id="m2" value="m2" >m&#xb2; </option>
103
+ <option id="mm2" value="mm2" >mm&#xb2; </option>
104
+ </select>
105
+ <select id='selectunitP' hidden>
106
+ <option id="m" value="m" >m </option>
107
+ <option id="mm"value="mm" >mm </option>
108
+ </select>
109
  </div>
110
  </div>
111
 
 
122
 
123
  </div>
124
  <!-- <br> -->
125
+ <div id="radiosColors" hidden="until-found">
126
+
127
+ <input type="checkbox" id="levelcheckbox" >
128
+ <label id=nLevels name="levelsnamelabel" >Leveled Plan </label>
129
+ <i class="fa fa-info-circle" id="infotool" > <span class="tooltiptext">Choose whether this project contains levels or not. If you wish to measure all of the plan, leave the checkbox unchecked. If you wish to measure certain regions of the plan or have the plan divided into levels,
130
+ please check the checkbox found on this line. Once you check it, a window will be opened that will allow you to draw on the pdf. When you are done, click the save button found at the end of the page. </span> </i>
131
+ <!--
132
  <div id="colorpickers">
133
+ </div> -->
 
134
 
135
  </div>
136
  <br>
 
140
  <script src="https://cdn.lordicon.com/bhenfmcm.js"></script>
141
  <lord-icon
142
  src="https://cdn.lordicon.com/ynwbvguu.json"
143
+ trigger="hover" colors="primary:black" id="addicon" onclick="duplicate()">
144
  </lord-icon>
145
  </div>
146
  <audio id="myAudio" autoplay></audio>
147
+
148
  </form>
149
+
150
+ <div id ="duplicater" class="duplicaterclass" hidden="until-found">
151
+ <label id="labelArrayId" hidden="until-found"> </label>
 
 
152
  <select name="measurementscripts" class="measurementselections" id="measurementselectionsid" oninput=get3rddropdown() >
153
+ <option id="hiddenselect" value="" disabled selected hidden > Select </option>
 
 
154
  </select>
155
 
156
  <select name="select" class="selections" id="selectionsid" oninput=get3rddropdown()>
 
157
  </select>
158
  <select name="measureitem" class="measureitems" id="measureitemsid">
 
159
  </select>
 
160
  <br>
161
+ <div id="repeatforloop" class="repeatforloopclass00" name="repeatforloopname " >
 
 
162
  <input type="text" id="text0" name="text1name" placeholder="GB-1" class=gb>
163
  <input type="text" id="text1" name="text2name" placeholder="A" class=a>
164
  <input type="text" id="text2" name="text3name" placeholder="Depth" class=depth>
 
167
  onclick="addmctnameicon()"
168
  src="https://cdn.lordicon.com/mecwbjnp.json"
169
  trigger="hover"
170
+ class="addmctnameclass"
171
  id="addmctnameid"
172
  colors="primary:black,secondary:black">
173
  </lord-icon>
 
174
  </div>
175
+
176
+ </div>
177
+ <button hidden id="doneebackground" onclick="getSecondData()" > Export Summary </button>
 
 
 
 
 
 
 
 
 
 
 
178
 
179
  <!-- </form> -->
180
 
181
  <div hidden id ="duplicaterhidden" class="duplicaterclasshidden">
182
+ <label id="labelArrayId" hidden="until-found"> </label>
183
  <select name="measurementscripts" class="measurementselections" id="measurementselectionsid" oninput="get3rddropdown()">
184
  <option value="" disabled selected hidden>Select</option>
185
+
 
186
  </select>
187
 
188
  <select name="select" class="selections" id="selectionsid" oninput=get3rddropdown()>
189
 
190
  </select>
191
  <select name="measureitem" class="measureitems" id="measureitemsid">
 
 
 
 
 
192
  </select>
193
 
194
  <br>
 
203
  onclick="addmctnameicon()"
204
  src="https://cdn.lordicon.com/mecwbjnp.json"
205
  trigger="hover"
206
+ class="addmctnameclass"
207
  id="addmctnameid"
208
  colors="primary:black,secondary:black">
209
  </lord-icon>
210
+ <script src="https://cdn.lordicon.com/bhenfmcm.js"></script>
211
+ <lord-icon
212
+ onclick="deletemctnameicon()"
213
+ src="https://cdn.lordicon.com/rivoakkk.json"
214
+ trigger="hover"
215
+ class="deletemctnameclass"
216
+ id="deletemctnameid"
217
+ colors="primary:black,secondary:black">
218
+ </lord-icon>
219
  </div>
220
+
 
221
  </div>
222
+
 
 
223
  </div>
224
 
225
  <div id="legends" class="tabcontent">
 
244
 
245
  </div>
246
 
247
+ <div class="dropdown-content">
248
+ <div id="userguidetext">
249
+ <div id="textfirstpage">
250
+ <label style="font-style: oblique;"> <br>
251
+ Please read the following before you use this tool. </label>
252
+ <br><br>
253
+ <label style="font-style: oblique;" >Note : The algorithm is based on detecting shapes and colors from the plan. Some shapes such as tables and textboxes carrying plan-related information, may also be viewed as shapes and so added to the algorithm.
254
+ To avoid this, please tidy up the plan before choosing to measure it, by using an outside tool to either erase them or to put a white rectangle over them.</label>
255
+ <br>
256
+
257
+ <br>
258
+ The tool is divided into two main parts:
259
+ <br>
260
+ <li id="userguideheadings"> First Part </li>
261
+ <br> There are three dropdowns available. Select the name of the project you wish to measure, along with the project part, and the project section.
262
+ <br > <br>
263
+ <label style="font-style: italic;"> Please double check the project section chosen as this determines the code that will be applied to the plan. </label>
264
+ <br>
265
+ <br>
266
+ Mark the project you want to meaure from the section labeled 'To measure'. Additionally, you have the ability to view any relevant documents you might want.(optional).
267
+ <br> <label style="font-style: italic;">Pixel to Metric conversion important notes : </label> Once you have selected a specific plan to measure, you will be provided with a pdf with
268
+ a colored rectangle drawn in it. Please open this pdf in Bluebeam, measure its area and perimeter, and then enter those values in the textboxes that will shown below the relevant documents.
269
+ You may think of this rectangle's measurement as a scale check for Bluebeam.
270
+ <br> <br> <label style="font-style: italic;">Notes when measuring secion 1.0: </label>
271
+ <label id=info >You can measure several levels independently using the textbox below the Scale document heading, which is titled "Number of levels." </label>
272
+ <br> Before selecting this plan from the 'To Measure' option, please draw shapes around the relevant regions on Bluebeam or using any other external tool if the project you want to measure contains more than 1 level.
273
+ <br> Additionally, you must include the levels' colors in RGB (Red - Green - Blue) format.
274
+
 
 
 
 
 
 
275
  <br>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
276
 
277
+ <i id="secondpage" class="fa fa-arrow-right" aria-hidden="true"></i>
278
+ <br>
279
+ </div>
280
+ <div id="textsecondpage" hidden=until-found>
281
+ <br>
282
+ <li id="userguideheadings" > Second part </li>
283
+ <br>
284
+ First, please open the google sheets link labeled 'Legend' and fill in the names of each shape.
285
+ <br>Ex. The first row shows the measurement of GB-1 , in the first column type in GB-1.
286
+ <br> After you are done with filling in the legend, go back to the ADR Console.
287
+ You will find three dropdowns and three textboxes.
288
+
289
+ <li style="list-style-type:square;"> The first dropdown will allow you to choose whether the shape is a ground beam or a pile cap. </li>
290
+ <li style="list-style-type:square;"> The second dropdown is the choice of (Area-perimeter-Length-Count).</li>
291
+ <li style="list-style-type:square;"> The third dropdown gives you the first part of the MC-T Name.</li>
292
+ <br> Then fill in the rows below the dropdowns with the corresponding detail and depth.
293
+ The plus button allows you to add more rows within this block.
294
+ <br>
295
+ There is another button above the dropdowns (to the right) that allows you to add another block and repeat the process for another item (Ground Beam or Pile Cap) or (Area-perimeter-Length-Count).
296
+ <br><br>
297
+ <i id="firstpage" class="fa fa-arrow-left" aria-hidden="true"></i>
298
+ <br>
299
+
300
  </div>
301
+
302
+ </div>
303
+ </div>
 
 
304
  </body>
 
305
  </html>
306
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
307
  <script >
308
+ ///////////////////////////////////////////////BEGIN JS CODE//////////////////////////////////////////////////
309
+ console.log(document.getElementById('duplicater').childNodes)
310
+ document.getElementById('duplicater').childNodes[1].value=[0,0]
311
+ //___________________________________________________________________________________________________________
312
+ //___________________________________________________________________________________________________________
313
+ /*Tab View*/
314
  document.getElementById('secondpage').addEventListener('click',function(){
315
  document.getElementById('textsecondpage').removeAttribute('hidden');
316
  document.getElementById('textfirstpage').setAttribute('hidden',true)
 
321
  document.getElementById('textsecondpage').setAttribute('hidden',true)
322
 
323
  });
324
+
325
+
326
+ //___________________________________________________________________________________________________________
327
+ //___________________________________________________________________________________________________________
328
+ /*Red Alert to fill in the first 3 dropdowns: prj name, part, section*/
329
  document.getElementById('measureADRbutton').addEventListener('click',function(){
330
  if (!document.getElementsByClassName('selectionsProj')[0].value)
331
  document.getElementsByClassName('selectionsProj')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
 
333
  document.getElementsByClassName('selectionsProjp')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
334
  if (!document.getElementsByClassName('selectionsProjs')[0].value)
335
  document.getElementsByClassName('selectionsProjs')[0].style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
336
+
337
+ /*Clear output everytime the user clicks on measureADR button*/
 
 
338
  var rightside=document.getElementById('rightside');
339
+ var rightchidren= rightside.children;
340
  for (let ch=0;ch<rightchidren.length; ch++)
341
  {
342
  if (rightchidren[ch].id == 'imgcanvas')
 
345
  document.getElementById('underimgbuttons').innerHTML=''
346
  clearInterval()
347
  clearTimeout()
 
348
  }
 
349
  }
 
 
350
  });
351
 
352
+ //___________________________________________________________________________________________________________
353
+ //___________________________________________________________________________________________________________
354
+ /*Toggle Tab View*/
355
  function openTab(evt, tabname) {
356
  // Declare all variables
357
  var i, tabcontent, tablinks;
 
375
  }
376
  document.getElementById("pagetitle").click();
377
 
378
+ //___________________________________________________________________________________________________________
379
+ //___________________________________________________________________________________________________________
380
+ /*Add icon to duplicate 'duplicater' div (big section that includes 3 dropdowns,3 textboxes, 2 buttons(add,delete)*/
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
381
  var dupliatei = 0; // i
382
  var clonedDivId=0;
383
  var original = document.getElementById('duplicaterhidden');
384
  var addciconval=0; //div duplicate
385
  var jj=0;
386
  const vals = [];
387
+ function duplicate() {
388
+ /*Create array of addciconval w jj */
389
+
390
  addciconval+=1;
391
  jj=0;
392
+
393
+ // labelArrayId=document.createElement('label');
394
+ // labelArrayId.id='labelArrayId';
395
+ // labelArrayId.value=[addciconval,jj];
396
+ // labelArrayId.setAttribute('hidden','until-found')
397
+
398
  var clone = original.cloneNode(true); // "deep" clone
 
 
399
  clone.id = 'duplicater' + ++dupliatei;
400
  clonedDivId=clone.id;
401
+ console.log(clone.children)
402
+ clone.children[0].value=[addciconval,jj]
403
+ clone.children[5].style.marginLeft='2px';
404
+ clone.children[1].style.marginBottom='10px';
405
+ clone.children[5].children[4].id='addmctnameid'+dupliatei
406
+ clone.children[5].children[6].style.display='none'
407
  clone.removeAttribute("hidden");
408
  clone.setAttribute('class','duplicaterclass'+dupliatei);
 
409
  clone.getElementsByClassName('measurementselections')[0].setAttribute('name', 'measurementscripts'+dupliatei);
410
  clone.getElementsByClassName('measurementselections')[0].setAttribute('class', 'measurementselections'+dupliatei);
411
  clone.getElementsByClassName('measureitems')[0].setAttribute('name', 'measureitem'+dupliatei);
 
415
  clone.getElementsByClassName('repeatforloopclasshidden')[0].setAttribute('id', 'repeatforloop'+addciconval+'0');
416
  clone.getElementsByClassName('repeatforloopclasshidden')[0].setAttribute('name', 'repeatforloopname'+addciconval+'0');
417
  clone.getElementsByClassName('repeatforloopclasshidden')[0].setAttribute('class', 'repeatforloopclass'+addciconval+'0');
418
+ console.log(clone.childNodes)
419
+ // clone.childNodes
420
+ // clone.append(labelArrayId);
421
+ original.parentNode.appendChild(clone);
422
+ clone.parentElement.insertBefore(clone, document.getElementById('doneebackground'));
423
  console.log( original.parentNode)
424
 
425
  var section = document.getElementsByClassName("selectionsProjs")[0]
426
+ /*Based on the NRM section , populate the second part of the interface*/
 
 
427
  if (addciconval>0){
428
  var drpdwn1 = document.getElementsByClassName("measurementselections"+dupliatei)[0]; //groundbeams
429
  if (section.value.startsWith('1.0'))
430
  {
 
431
  var opt = document.createElement("OPTION");
432
  opt.text= 'Select';
433
  opt.value= "";
 
460
  }
461
  }
462
  }
463
+
464
+ //___________________________________________________________________________________________________________
465
+ //___________________________________________________________________________________________________________
466
+ /*User Guide button toggle*/
467
+
468
  function userguideclick(){
469
  var acc = document.getElementsByClassName("dropdown-content")[0];
470
  var i;
471
+ acc.classList.toggle("active");
472
 
473
+ /* Toggle between hiding and showing the active panel */
474
+ if (acc.style.display === "block") {
475
+ acc.style.display = "none";
 
 
 
 
 
 
 
476
 
477
+ } else {
478
+ acc.style.display = "block";
479
+ acc.style.backgroundColor=(0, 153, 255);
 
 
480
  }
481
+ }
482
+ //to be retrieved from python code
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
483
  var areainpixels=0;
484
  var prminpixels=0;
485
 
486
+ ///////////////temporary lists of prj names, parts, sections just to populate the dropdowns
487
  prjname1=['2340 United Living Low Rise Building','2341 Bouygues-Cotswold','2342 GF Tomlinson - Hardingstone Primary School']
488
  prjname1parts=['Block O Pumphouse','Hawthorn','Ling','Red Oak']
489
  prjname2parts=['Block B','Block G']
 
498
  prjname3sec2=['2.2 RC Slabs','8.1 Site Preparation Works','8.4 Fencing, Railing, Walls','8.5 External Fixtures', ' 8.6 External Drainage']
499
  prjname3sec3=['1.0 Substructure','2.2 RC Slabs','2.3 Roof','2.4 Stairs','3.2 Floor Finishes','3.3 Ceiling Finishes','4.0 Fittings, Furnishings and Equipments','5.1 Sanitary']
500
 
501
+ //___________________________________________________________________________________________________________
502
+ //___________________________________________________________________________________________________________
503
+ /*Populate dropdowns*/
504
 
505
+ //get the 3 dropdown elements
506
  var proj = document.getElementsByClassName("selectionsProj")[0];
507
  var proj1 = document.getElementsByClassName("selectionsProjp")[0];
508
  var projsec = document.getElementsByClassName("selectionsProjs")[0];
509
+ var pdfname;
510
+
511
  proj.addEventListener('input',function(){
512
  proj.style.boxShadow=( '2px 2px 2px gray')
513
  proj1.innerHTML='';
 
522
  opt.value= "";
523
  opt.hidden=true;
524
  projsec.add(opt);
525
+
526
  if (proj.value==prjname1[0]){
527
+ for (let p=0 ; p<prjname1parts.length;p++)
528
+ {
529
+ var optn1 = document.createElement("OPTION");
530
+ optn1.text= prjname1parts[p];
531
+ optn1.value= prjname1parts[p];
532
+ optn1.id= prjname1parts[p]+p;
533
+ proj1.add(optn1);
534
 
535
+ }
536
+ }
537
  if (proj.value==prjname1[1]){
538
  for (let p=0 ; p<prjname2parts.length;p++)
539
  {
 
565
  optn.value= "";
566
  optn.hidden=true;
567
  projsec.add(optn);
568
+
569
 
570
  if (proj1.value==prjname1parts[0].toString())
571
  {
 
696
  }
697
  }
698
 
 
 
 
 
 
 
 
 
699
 
700
  })
701
 
 
703
  projsec.style.boxShadow=( '2px 2px 2px gray')
704
  })
705
 
706
+ var ratioAunit=1;
707
+ var ratioPunit=1;
708
 
709
  function getproj(){
710
+
 
 
 
 
 
711
  var proj = document.getElementsByClassName("selectionsProj")[0];
712
  var projectVal=proj.value.toString() //selected project
713
 
 
739
  // meas.innerHTML='';
740
  // relv.innerHTML='';
741
  var measSelect = document.getElementById("measureselectid");
742
+
743
  var relvSelect = document.getElementById("relvselectid");
744
+
745
 
746
  measSelect.removeAttribute("hidden");
747
  relvSelect.removeAttribute("hidden");
 
807
  measids.forEach(function(elem) {
808
  elem.addEventListener("change", function() {
809
 
810
+ pdfname=elem.value;
811
  measSelect.style.boxShadow='none';
812
 
813
  document.getElementById("all").style.display = "block";
 
815
  $.get( '/pixelimg/'+JSON.stringify(pixelArr)) .then( function(data) {
816
  // alert('Measure the white square drawn in the pdf on Bluebeam, then enter its area and perimeter in ur desired scale. \n' );
817
  if(window.confirm("Measure the white square drawn in the pdf on Bluebeam, then enter its area and perimeter in ur desired scale. \n")){
818
+ pdfname=data[2];
819
  window.open(data[2]);
820
 
821
  }
 
829
  prmRatio.style.boxShadow='0 0 8px 2px rgb(255, 0, 0)';
830
 
831
  }
832
+ document.getElementById('radiosColors').removeAttribute('hidden');
833
  var scalelbl= document.createElement("label");
834
  scalelbl.innerText='Scale Document';
835
  scalelbl.id='measureLabel';
 
853
  areaRatio.style.boxShadow='none';
854
  })
855
  areaRatio.required=true;
856
+ selectunitA=document.getElementById('selectunitA')
857
+ selectunitA.removeAttribute('hidden')
858
+
859
+ areadiv.append(areaRatiolbl,areaRatio,selectunitA)
860
  var br2= document.createElement("br");
861
  var br3= document.createElement("br");
862
  var prmdiv=document.createElement("div");
 
878
  prmRatio.style.boxShadow='none';
879
  })
880
  prmRatio.required=true;
881
+ selectunitP=document.getElementById('selectunitP')
882
+ selectunitP.removeAttribute('hidden')
883
+
884
+ prmdiv.append(prmRatiolbl, prmRatio,selectunitP)
885
  var ratiosdiv= document.getElementById("ratios");
886
  ratiosdiv.innerHTML='';
887
  ratiosdiv.append(scalelbl);
888
  ratiosdiv.append(br1);
889
  ratiosdiv.append(areadiv)
 
 
 
 
890
  ratiosdiv.append(prmdiv)
 
 
 
891
  areainpixels=data[0];
892
+ prminpixels=data[1];
 
 
893
 
894
 
895
  });
896
+ selectunitA.addEventListener('change',function(){
897
+ value=document.getElementById('selectunitA').value
898
+ if (value=='mm2')
899
+ ratioAunit=1000000;
900
+ else
901
+ ratioAunit=1;
902
+ })
903
+ selectunitP.addEventListener('change',function(){
904
+ value=document.getElementById('selectunitP').value
905
+ if (value=='mm')
906
+ ratioPunit=1000;
907
+ else
908
+ ratioPunit=1;
909
+
910
+ })
911
  });
912
 
913
  });
 
915
  });
916
  }
917
 
918
+
919
+ function dataURItoBlob(dataURI)
920
+ {
921
+ // convert base64/URLEncoded data component to raw binary data held in a string
922
+ var byteString;
923
+
924
+ if(dataURI.split(',')[0].indexOf('base64') >= 0)
925
+ byteString = atob(dataURI.split(',')[1]);
926
+ else
927
+ byteString = unescape(dataURI.split(',')[1]);
928
+
929
+ // separate out the mime component
930
+ var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
931
+
932
+ // write the bytes of the string to a typed array
933
+ var ia = new Uint8Array(byteString.length);
934
+ for(var i = 0; i < byteString.length; i++)
935
+ {
936
+ ia[i] = byteString.charCodeAt(i);
937
+ }
938
+
939
+ return new Blob([ia], {type: mimeString});
940
+ }
941
+
942
+
943
+
944
+
945
  var spreadsheetId='';
946
  var spreadsheetURL='';
947
  var colorsUsed='';
 
951
  var pdfpath=[];
952
  var interval = null;
953
  var namepathArr=''
954
+ var canvasimg;
955
+ var allcolors=['#2FFFFF'];
956
  function getData(form) {
957
 
958
 
 
976
  tomeasureproj='';
977
  pdfpath=[];
978
  formvalues=Object.fromEntries(formData);
979
+
980
 
981
  // iterate through entries...
982
  for (var pair of formData.entries()) {
 
986
  }
987
  }
988
  tomeasureproj=formvalues['measureselectname']; //proj name
989
+ ratio1=(formvalues['areaRatio']/ratioAunit)/areainpixels;
990
+ ratio2=(formvalues['prmRatio']/ratioPunit)/prminpixels;
991
 
 
992
  pdfpath.push(formvalues['selectproj'],formvalues['selectprojp'] ,formvalues['selectprojs'])
993
 
994
+ if (canvasimg){
995
+ buf=canvasimg.split("data:image/png;base64,")
996
+ answers.push(tomeasureproj, 220,allcolors , ratio1, ratio2 ,pdfpath,buf[1]);
997
+ } else
998
+ answers.push(tomeasureproj, 0,[] , ratio1, ratio2 ,pdfpath);
999
 
1000
+ $.ajax({
1001
+ type: "POST",
1002
+ url: "/savebase64Img/",
1003
 
1004
+ // set content type header to use Flask response.get_json()
1005
+ contentType: "application/json",
1006
+
1007
+ // convert data/object to JSON to send
1008
+ data: JSON.stringify({allvalues:answers}),
1009
+
1010
+ // expect JSON data in return (e.g. Flask jsonify)
1011
+ dataType: "json",
1012
+
1013
+ // handle response
1014
+ success: function(response) {
1015
+ console.log(response);
1016
+ },
1017
+ error: function(err) {
1018
+ console.log(err);
1019
+ }
1020
+ }).done(function(data){
1021
+ var backimg=document.getElementById('backgroundimg');
1022
  var rightside=document.getElementById('rightside');
1023
  document.getElementById("loading").hidden = true;
1024
+
1025
+ document.getElementById('duplicater').removeAttribute('hidden');
1026
+ document.getElementById('doneebackground').removeAttribute('hidden');
1027
+
1028
+
1029
  // clearInterval()
1030
  document.getElementById('measureADRbutton').removeAttribute('disabled');
1031
  document.getElementById('measureADRbutton').style.cursor='pointer';
 
1127
  underimg.style.display='flex';
1128
  rightside.append(imgcanvas);
1129
  rightside.insertBefore(imgcanvas,underimg);
1130
+ });
 
 
 
 
 
 
 
 
 
1131
 
1132
+ if (ratio1 ==0)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1133
 
1134
+
 
 
 
 
1135
 
1136
+ $.get('/projecttomeasure/'+ JSON.stringify(answers)).then( function(data) {
1137
+ try{
1138
+ // var mp3_url = 'https://media.geeksforgeeks.org/wp-content/uploads/20190531135120/beep.mp3';
1139
+ // (new Audio(mp3_url)).play()
1140
+ // retrieveLinks()
1141
+ var backimg=document.getElementById('backgroundimg');
1142
+ var rightside=document.getElementById('rightside');
1143
+ document.getElementById("loading").hidden = true;
1144
+
1145
+ document.getElementById('duplicater').removeAttribute('hidden');
1146
+ document.getElementById('doneebackground').removeAttribute('hidden');
1147
+
1148
+
1149
+ // clearInterval()
1150
+ document.getElementById('measureADRbutton').removeAttribute('disabled');
1151
+ document.getElementById('measureADRbutton').style.cursor='pointer';
1152
+ document.getElementById('measureADRbutton').style.color = 'white';
1153
+ document.getElementById('measureADRbutton').style.backgroundColor="#16c72e";
1154
+ document.getElementById('measureADRbutton').addEventListener('mouseover',function(){
1155
+ document.getElementById('measureADRbutton').style.color='black';
1156
+ document.getElementById('measureADRbutton').style.boxShadow=' 0 0 8px 2px #16c72e';
1157
+ })
1158
+
1159
+
1160
+ document.getElementById('measureADRbutton').addEventListener('mouseout',function(){
1161
+ document.getElementById('measureADRbutton').style.color='white';
1162
+ document.getElementById('measureADRbutton').style.boxShadow='none';
1163
+ });
1164
+
1165
+ if (formvalues['selectprojs'].startsWith('3.2'))
1166
+ {
1167
+ // /* data[0]--> img , data[1]-->dataframe (goes to legend lsa ) , data [2] -->pdf dropbox shareable link ,data[3]-> spreadsheetId, data[4],spreadsheeturl */
1168
+ SimilarAreaDictionary=data[1];
1169
+ dropboxLink=data[2];
1170
+ spreadsheetId=data[3];
1171
+ spreadsheetURL=data[4];
1172
+ list1= data[5]
1173
+ }
1174
+ if (formvalues['selectprojs'].startsWith('2.2'))
1175
+ {
1176
+ //ignore data[0] --> img passed directly
1177
+ //dropboxLink=data[1]
1178
+
1179
+ //spreadsheetId=data[2]
1180
+ //spreadsheetURL=data[3]
1181
+
1182
+
1183
+ }
1184
+ else{
1185
+ SimilarAreaDictionary=data[1];
1186
+ spreadsheetURL= data[2];
1187
+ spreadsheetId= data[3];
1188
+ colorsUsed = data[4];
1189
+ list1 = data[5]; //list of pdf markups
1190
+ dropboxLink=data[6];
1191
+ namepathArr=data[8];
1192
+ }
1193
+ var imgcanvas= document.createElement("img");
1194
+ imgcanvas.src= 'data:image/gif;base64,' +data[0];
1195
+ // imgcanvas.width=700;
1196
+ imgcanvas.height=600;
1197
+ console.log(imgcanvas.width)
1198
+ imgcanvas.id='imgcanvas';
1199
+ imgcanvas.alt="Larry";
1200
+ imgcanvas.style.zIndex=999;
1201
+
1202
+ var underimg=document.getElementById('underimgbuttons');
1203
+
1204
+ backimg.style.backgroundColor="transparent";
1205
+ backimg.style.opacity="1";
1206
+ getlegendstoDirectory()
1207
+ // backimg.append(imgcanvas);
1208
+ var legendbutton= document.createElement("button");
1209
+ legendbutton.id='measureADRbutton2';
1210
+ legendbutton.innerText='Legend and Data created';
1211
+ legendbutton.style.backgroundColor='rgb(5, 43, 235)';
1212
+ legendbutton.addEventListener('mouseover',function(){
1213
+ legendbutton.style.boxShadow='0 0 8px 2px rgb(5, 43, 235)';
1214
+ })
1215
+ legendbutton.addEventListener('mouseout',function(){
1216
+ legendbutton.style.boxShadow='none';
1217
+ })
1218
+
1219
+
1220
+ // legendbutton.margin.horizontal='0';
1221
+ legendbutton.addEventListener('click',function(){
1222
+ window.open( spreadsheetURL);
1223
+
1224
+ })
1225
+
1226
+ // legendbutton.style.display='flex';
1227
+
1228
+ var imgbutton= document.createElement("button");
1229
+ imgbutton.id='measureADRbutton2';
1230
+ imgbutton.innerText='Click to view as PDF';
1231
+ imgbutton.style.backgroundColor='rgb(255,0,255)';
1232
+
1233
+
1234
+ imgbutton.addEventListener('mouseover',function(){
1235
+ imgbutton.style.boxShadow='0 0 8px 2px rgb(255,0,255)';
1236
+ })
1237
+ imgbutton.addEventListener('mouseout',function(){
1238
+ imgbutton.style.boxShadow='none';
1239
+ })
1240
+
1241
+ imgbutton.addEventListener('click',function(){
1242
+ window.open( dropboxLink);
1243
+ })
1244
+
1245
+ underimg.append(legendbutton);
1246
+ underimg.append(imgbutton);
1247
+ underimg.style.display='flex';
1248
+ rightside.append(imgcanvas);
1249
+ rightside.insertBefore(imgcanvas,underimg);
1250
+ } catch (error) {
1251
+ console.log(error)
1252
+ alert('Error '+error+' occured. Please Refresh the page')
1253
+ }
1254
+ //////////////////////////////////////////////////////////////////////////////////////////
1255
+ let delrows2 = {
1256
+ content : {},
1257
+ id : {},
1258
+ subject :{}
1259
+ };
1260
+
1261
+ var delrows1='';
1262
+ var flag=0;
1263
+ pdfpath=[];
1264
+ pdfpath.push(formvalues['selectproj'],formvalues['selectprojp'] ,formvalues['selectprojs'])
1265
+ var rightsideids=[];
1266
+ /*
1267
+ if (formvalues['selectprojs'].startsWith('1.0') || formvalues['selectprojs'].startsWith('3.2') )
1268
+ interval= setInterval( function() {
1269
+
1270
+ const delay = ms => new Promise(res => setTimeout(res, ms));
1271
+ delay(2000)
1272
+ $.getJSON('/_submission', {
1273
+
1274
+ // dict: JSON.stringify(SimilarAreaDictionary),
1275
+ dict1: JSON.stringify(list1),
1276
+ spreadsheetId:spreadsheetId,
1277
+ pdfpathpath:JSON.stringify(pdfpath),
1278
+ path:Object.fromEntries(formData)['measureselectname'],
1279
+
1280
+ },function(data1){
1281
+
1282
+ if(data1.length >0){
1283
+ delrows1=data1[0];
1284
+ console.log(data1, delrows1,delrows2)
1285
+ console.log(typeof delrows1)
1286
+ console.log(typeof delrows2)
1287
+ if (JSON.stringify(delrows1)=== JSON.stringify(delrows2))
1288
+ {
1289
+ console.log('same')
1290
+ }
1291
+ else{
1292
+ // if (data1[0]==1){
1293
+ // return data1[0];
1294
+ flag=1
1295
+ if (confirm("Changes have been made in the markups. Would you like to save and view them in the legend?")) {
1296
+
1297
+
1298
+ $.getJSON('/deletemarkupsroute', {
1299
+ dict: JSON.stringify(SimilarAreaDictionary),
1300
+ deletedrows: JSON.stringify(delrows1),
1301
+ path:Object.fromEntries(formData)['measureselectname'],
1302
+ spreadsheetId:spreadsheetId,
1303
+ areaPermArr: JSON.stringify(data[7]),
1304
+ section: Object.fromEntries(formData)['selectprojs'],
1305
+ pdfpathpath:JSON.stringify(pdfpath),
1306
+
1307
+
1308
+
1309
+ }, function(data2){
1310
+ console.log(data2)
1311
+ })
1312
+ }
1313
+ }
1314
+ }
1315
+ });
1316
+
1317
+ delay(6000);
1318
+ $.getJSON('/_submission', {
1319
+ // dict: JSON.stringify(SimilarAreaDictionary),
1320
+ dict1: JSON.stringify(list1),
1321
+ spreadsheetId:spreadsheetId,
1322
+ pdfpathpath:JSON.stringify(pdfpath),
1323
+ path:Object.fromEntries(formData)['measureselectname'],
1324
+
1325
+ },function(data11){
1326
+ delrows2=data11[0];
1327
+
1328
+ })
1329
+ },9000)
1330
+ */
1331
 
1332
 
1333
  /////////////////////////
 
1349
  var measitemVal=''
1350
 
1351
  function get3rddropdown(){
 
 
1352
  var divduplicater= document.getElementsByClassName('duplicaterclass')[0].children;
1353
+ var inputs =divduplicater[1]; //1st dpdwn
1354
+ var selections = divduplicater[2]; //2nd dpdwn
1355
+ var measitem = divduplicater[3];//3rd dpdwn
1356
+ measitemVal=measitem.value.toString() //3rd dpdwn value
 
 
 
1357
 
 
 
1358
 
1359
  if (addciconval>0){
1360
 
1361
  for (let i =1 ; i <=addciconval ; i++){
1362
+ var inputs1 = document.getElementsByClassName("measurementselections"+i)[0]; //1sr dpdwn
1363
+ var selections1 = document.getElementsByClassName("selections"+i)[0]; //2nd dropdown
1364
+ var measitem1 = document.getElementsByClassName("measureitems"+i)[0]; //3rd dpdwn
1365
+ measitemVal1=measitem1.value.toString() //3rd dpdwn value
1366
+
1367
+ inputs1.addEventListener('change',function(){
1368
+ // window.onclick = elem => {
1369
+ // if(elem.target.className=="measurementselections")
1370
+ // {
1371
+ console.log('clickedfirst')
1372
+ if (inputs1.value.startsWith('ground') & (selections1.value.startsWith('Pile') || !selections1.value )){ //has old option(pile caps or options are empty) add new options
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1373
 
1374
+ selections1.innerHTML=''
1375
+ var opt0 = document.createElement("OPTION") ;
1376
+ opt0.text= 'Ground Beams:m2';
1377
+ opt0.value= 'Ground Beams:m2';
1378
+ opt0.id='gbA' ;
1379
+ selections1.add(opt0);
1380
+
1381
+ var opt1 = document.createElement("OPTION") ;
1382
+ opt1.text= 'Ground Beams:m';
1383
+ opt1.value= 'Ground Beams:m';
1384
+ opt1.id='gbP';
1385
+ selections1.add(opt1);
1386
+ }
1387
 
1388
+ if (inputs1.value.startsWith('Floor') & (selections1.value.startsWith('Wall') || !selections1.value )){
1389
+ selections1.innerHTML='';
1390
+ var opt2 = document.createElement("OPTION") ;
1391
+ opt2.text= 'Floor:m2';
1392
+ opt2.value= 'Floor:m2';
1393
+ opt2.id='floorA' ;
1394
+ selections1.add(opt2);
 
 
1395
 
1396
+ }
 
 
 
1397
 
1398
+ if (inputs1.value.startsWith('Wall') & (selections1.value.startsWith('Floor') || !selections1.value ) ){
1399
+ selections1.innerHTML='';
1400
+ var opt3 = document.createElement("OPTION") ;
1401
+ opt3.text= 'Wall:m';
1402
+ opt3.value= 'Wall:m';
1403
+ opt3.id='WallP';
1404
+ selections1.add(opt3);
1405
 
1406
+ }
1407
 
1408
+ if (selections1.value=='Ground Beams:m' || selections1.value=='Wall:m'){
1409
+ // measitem1.innerHTML='';
1410
+ var ii, L = measitem1.options.length - 1;
1411
+ for(ii = L; ii >= 0; ii--) {
1412
+ if (measitem1.options[ii].value=='Area')
1413
+ measitem1.remove(ii);
1414
+ }
1415
+ if (measitem1.options.length <2){
1416
+ var opt4= document.createElement("option");
1417
+ opt4.text= 'Length';
1418
+ opt4.value= 'Length';
1419
+ opt4.id= 'Length';
1420
+ measitem1.add(opt4);
1421
+
1422
+ var opt5= document.createElement("option");
1423
+ opt5.text= 'Perimeter';
1424
+ opt5.value= 'Perimeter';
1425
+ opt5.id= 'Perimeter';
1426
+ measitem1.add(opt5);
1427
+
1428
+ var opt6= document.createElement("option");
1429
+ opt6.text= 'Count';
1430
+ opt6.value= 'Count';
1431
+ opt6.id= 'Count';
1432
+ measitem1.add(opt6);
1433
+ }
1434
+ }
1435
 
1436
+ if (selections1.value=='Ground Beams:m2' || selections1.value=='Floor:m2'){
1437
+ measitem1.innerHTML='';
1438
+ var opt7= document.createElement("option");
1439
+ opt7.text= 'Area';
1440
+ opt7.value= 'Area';
1441
+ opt7.id= 'Area';
1442
+ measitem1.add(opt7);
1443
 
1444
+ }
1445
+
1446
  });
1447
  if (selections1.value=='Ground Beams:m' || selections1.value=='Wall:m'){
1448
  // measitem1.innerHTML='';
 
1458
  opt21.id= 'Length';
1459
  measitem1.add(opt21);
1460
 
1461
+ var opt22= document.createElement("option");
1462
+ opt22.text= 'Perimeter';
1463
+ opt22.value= 'Perimeter';
1464
+ opt22.id= 'Perimeter';
1465
+ measitem1.add(opt22);
1466
+
1467
+ var opt23= document.createElement("option");
1468
+ opt23.text= 'Count';
1469
+ opt23.value= 'Count';
1470
+ opt23.id= 'Count';
1471
+ measitem1.add(opt23);
1472
+
1473
+ }
1474
+ }
1475
 
1476
  if (selections1.value=='Ground Beams:m2' || selections1.value=='Floor:m2'){
1477
  measitem1.innerHTML='';
 
1482
  measitem1.add(opt41);
1483
 
1484
  }
1485
+ // inputs1.addEventListener('change',function(){
1486
  if (inputs1.value=='pile caps' & (selections1.value.startsWith('Ground') || !selections1.value ) ){
1487
  selections1.innerHTML='';
1488
  var opt51 = document.createElement("OPTION") ;
 
1498
  opt61.id='pcP';
1499
  selections1.add(opt61);
1500
 
1501
+
1502
  }
1503
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1504
 
1505
  if (selections1.value=='Pile Caps:m2'){
1506
  measitem1.innerHTML='';
 
1512
 
1513
  }
1514
 
1515
+ // });
1516
  if (selections1.value=='Pile Caps:m'){
1517
  // measitem1.innerHTML='';
1518
  var ii, L = measitem1.options.length - 1;
 
1592
  opt.id='WallP';
1593
  selections.add(opt);
1594
 
1595
+ }
1596
+ if (inputs.value=='pile caps' & (selections.value.startsWith('Ground') || !selections.value )){
1597
+ selections.innerHTML='';
1598
+ var optn = document.createElement("OPTION") ;
1599
+ optn.text= 'Pile Caps:m2';
1600
+ optn.value= 'Pile Caps:m2';
1601
+ optn.id='pcA' ;
1602
+ selections.add(optn);
1603
+
1604
+ var opt = document.createElement("OPTION") ;
1605
+ opt.text= 'Pile Caps:m';
1606
+ opt.value= 'Pile Caps:m';
1607
+ opt.id='pcP';
1608
+ selections.add(opt);
1609
+
1610
  }
1611
 
1612
  if (selections.value=='Ground Beams:m' || selections.value=='Wall:m'){
 
1641
  }
1642
 
1643
  });
1644
+ selections.addEventListener('click',function(){
1645
+
1646
  if (selections.value=='Ground Beams:m'){
1647
  measitem.innerHTML='';
1648
  var op2= document.createElement("option");
 
1675
  measitem.add(op4);
1676
 
1677
  }
 
 
 
 
 
 
 
 
 
1678
 
 
 
 
 
 
 
 
1679
  if (selections.value=='Pile Caps:m'){
1680
  measitem.innerHTML='';
1681
  var op2= document.createElement("option");
 
1706
  measitem.add(op4);
1707
 
1708
  }
1709
+ })
1710
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1711
 
1712
  }
1713
 
 
1714
 
1715
  var repeatforloopI=0;
1716
  function getmctName(){
 
1727
  })
1728
 
1729
  for (ii=0 ; ii<=addciconval; ii++){
1730
+ if (ii==0){
1731
+ //first one -- not duplicated yet --first row onlyy
 
 
1732
  var divduplicater= document.getElementsByClassName('duplicaterclass')[0].children;
1733
+ console.log(divduplicater)
1734
+ var selections = divduplicater[2];//ex: Gb:m
1735
+ measitemVal=divduplicater[3].value; // ex:area
1736
+ var div=divduplicater[5].children;// first repeatforloopclass
 
1737
 
1738
  var divValues=['text1'+div[0].value, div[1].value , div[2].value];
1739
  mctname=[selections.value ,divValues , measitemVal ];
 
1740
  if(div[0].value && div[1].value && div[2].value)
1741
  {
1742
  flag=1;
1743
  arrmctNames.push( mctname);
1744
  }
1745
  else if (div[0].value && !div[1].value && !div[2].value) {
1746
+ mctname=[selections.value ,['text1'+div[0].value ], measitemVal ];
1747
  flag=1;
1748
  arrmctNames.push( mctname);
1749
  }
 
1752
  flag=1;
1753
  arrmctNames.push( mctname);
1754
  }
1755
+ //////////////////////////////////////////
1756
+
1757
+
1758
+ count=0;
1759
+ var ii0selections='';
1760
+ for (let child =1;child <divduplicater.length;child++)
1761
+ {
1762
+ if( divduplicater[child] instanceof(HTMLDivElement) )
1763
+ count++;
1764
+ ii0selections=divduplicater[2].value;
1765
+ measitemVal=divduplicater[3].value;
1766
+
1767
+ // for (let i =1 ; i <=divduplicater.length ; i++){
1768
+ // console.log('inloop',ii.toString()+i.toString())
1769
+
1770
+ // var replicatedDivChildren=document.getElementsByClassName('duplicaterclass')[0].children
1771
+ // for (child=0;child<replicatedDivChildren.length;child++)
1772
+ // {
1773
+ console.log('child',divduplicater[child])
1774
+ if (divduplicater[child].className.startsWith('repeatforloopclass') && child !=5)
1775
+ {
1776
+ console.log('c',divduplicater[child].children)
1777
+ var divValues2=['text1'+divduplicater[child].children[0].value, divduplicater[child].children[1].value , divduplicater[child].children[2].value];
1778
+ mctname1=[ii0selections ,divValues2 , measitemVal];
1779
+ if(divduplicater[child].children[0].value && divduplicater[child].children[1].value && divduplicater[child].children[2].value)
1780
+ {
1781
+ // console.log(mctname1);
1782
+ flag=1;
1783
+ arrmctNames.push(mctname1);
1784
+ }
1785
+
1786
+ else if(divduplicater[child].children[0].value && !divduplicater[child].children[1].value && !divduplicater[child].children[2].value) {
1787
+ mctname1=[ii0selections ,[ 'text1'+divduplicater[child].children[0].value ], measitemVal ];
1788
+ flag=1;
1789
+ arrmctNames.push( mctname1);
1790
+ }
1791
+ else if(divduplicater[child].children[0].value && divduplicater[child].children[1].value && !divduplicater[child].children[2].value) {
1792
+ mctname1=[ii0selections ,['text1'+divduplicater[child].children[0].value , divduplicater[child].children[1].value] , measitemVal];
1793
+ flag=1;
1794
+ arrmctNames.push( mctname1);
1795
+ }
1796
+ }
1797
+ // }
1798
+
1799
+ }
1800
+
1801
  }
1802
+
1803
  else if (ii>0){
1804
  var divduplicater= document.getElementsByClassName('duplicaterclass'+ii)[0].children;
1805
+
1806
+ console.log(divduplicater)
1807
+ selections = divduplicater[2];//document.getElementsByClassName("selections")[0];
1808
+ measitemVal=divduplicater[3].value;
1809
+ div=divduplicater[5].children;
1810
  var divValues=['text1'+div[0].value, div[1].value , div[2].value];
1811
  mctname=[selections.value ,divValues , measitemVal ];
1812
+
1813
  if(div[0].value && div[1].value && div[2].value)
1814
  {
1815
  flag=1;
1816
  arrmctNames.push( mctname);
1817
  }
1818
  else if (div[0].value && !div[1].value && !div[2].value) {
1819
+ mctname=[selections.value ,['text1'+div[0].value ], measitemVal ];
1820
  flag=1;
1821
  arrmctNames.push( mctname);
1822
  }
 
1828
 
1829
  }
1830
 
1831
+ if (ii>0 && addciconval >0 && jj>0)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1832
  {
1833
  count=0;
1834
  var ii0selections='';
1835
+ var replicatedDivChildren=document.getElementsByClassName('duplicaterclass'+ii)[0].children;
1836
+ console.log('cc',replicatedDivChildren)
1837
 
1838
+ for (let o =0;o <=replicatedDivChildren.length;o++)
1839
  {
1840
+ if( replicatedDivChildren[o] instanceof(HTMLDivElement) )
1841
  { count++;
1842
+ // console.log('divvvv',cc[o])
1843
+
1844
+ ii0selections=replicatedDivChildren[2].value;
1845
+ measitemVal=replicatedDivChildren[3].value;
 
1846
  // count++;
1847
  // ii0selections=cc[3].value;
1848
  }
1849
+ }
1850
+
1851
  console.log(count);
1852
 
1853
+ // for (let i =1 ; i < count ; i++){
1854
  console.log('aaaanloop',addciconval.toString()+i.toString())
1855
 
1856
+ // var replicatedDivChildren=document.getElementsByClassName('repeatforloopclass'+ii.toString()+i.toString())[0].children;
1857
+ // var replicatedDivChildren=document.getElementsByClassName('duplicaterclass'+i.toString())[0].children
1858
+ for (child=0;child<replicatedDivChildren.length;child++)
1859
+ {
1860
+ if (replicatedDivChildren[child].className.startsWith('repeatforloopclass') && child !=5)
1861
+ {
1862
+
1863
  // console.log(document.getElementsByClassName('repeatforloopclass'+ii.toString()+i.toString())[0].parentElement)
1864
+ // if
1865
+ var divValues2=['text1'+replicatedDivChildren[child].children[0].value, replicatedDivChildren[child].children[1].value , replicatedDivChildren[child].children[2].value];
1866
  mctname1=[ii0selections ,divValues2 , measitemVal];
1867
+ if(replicatedDivChildren[child].children[0].value && replicatedDivChildren[child].children[1].value && replicatedDivChildren[child].children[2].value)
1868
  {
1869
  arrmctNames.push(mctname1);
1870
  flag=1;
1871
  }
1872
+ else if(replicatedDivChildren[child].children[0].value && !replicatedDivChildren[child].children[1].value && !replicatedDivChildren[child].children[2].value)
1873
  {
1874
+ mctname1=[ii0selections ,['text1'+replicatedDivChildren[child].children[0].value] , measitemVal];
1875
  arrmctNames.push(mctname1);
1876
  flag=1;
1877
  }
1878
+ else if(replicatedDivChildren[child].children[0].value && replicatedDivChildren[child].children[1].value && !replicatedDivChildren[child].children[2].value)
1879
  {
1880
+ mctname1=[ii0selections ,['text1'+replicatedDivChildren[child].children[0].value, replicatedDivChildren[child].children[1].value] , measitemVal];
1881
  arrmctNames.push(mctname1);
1882
  flag=1;
1883
  }
1884
+
1885
  }
1886
+ }
1887
+ // }
1888
 
1889
  }
1890
 
 
1894
  // {
1895
  //first entry only
1896
  arrFinalMCNames= arrmctNames.slice();
1897
+
 
1898
 
1899
  if(arrmctNames.length >1){
1900
  var name=[];
1901
  allnames=[];
1902
  arrFinalMCNames = arrmctNames.slice();
1903
+ // console.log('finalnameflawel',arrFinalMCNames)
1904
  var newarr=[];
1905
+ // console.log('NAME = ' ,arrmctNames);
1906
  for (let i=0;i<arrmctNames.length; i++)
1907
  { str='';
1908
  newarr=[];
 
1912
 
1913
 
1914
 
1915
+ if (arrmctNames[i][0] == arrmctNames[j][0] && arrmctNames[i][2] == arrmctNames[j][2] &&arrmctNames[i][1][1] == arrmctNames[j][1][1] && arrmctNames[i][1][2] == arrmctNames[j][1][2])
1916
  { var selectionsname=arrmctNames[i][0] ;
1917
+ measitemVal=arrmctNames[i][2];
1918
  flag=1;
1919
+ console.log('foorrr',arrmctNames[i][0],arrmctNames[i]);
1920
 
1921
  if (allnames.includes(arrmctNames[i][1][0]) )
1922
  {
 
1963
  }
1964
 
1965
  console.log('finals',arrFinalMCNames);
1966
+ // console.log('fl='+flag)
1967
 
1968
 
1969
  }
 
1981
  return element = arrallvalues[arrallvalues.indexOf(element)];
1982
  }
1983
  });
1984
+ // console.log(is_same);
1985
  // if (is_same)
1986
  // {
1987
 
1988
  spreadsheetURL=spreadsheetURL+ '/edit#gid='+data[0].toString()
1989
+ // console.log(spreadsheetURL);
1990
  window.open(spreadsheetURL.toString()) //sheetid
1991
 
1992
  // }
 
1999
  }
2000
 
2001
  }
2002
+
 
2003
 
2004
  function addmctnameicon(){
2005
 
2006
  repeatforloopI+=1
2007
+ var dupDiv;
2008
  if (clonedDivId==0){
 
2009
  var dupDiv=document.getElementById('duplicater'); //pass kol div hna
2010
+ }
 
2011
  else{
 
2012
  var dupDiv=document.getElementById(clonedDivId); //pass kol div hna //akher div et3mlt
 
2013
  }
2014
+
2015
  var div=document.getElementById('repeatforloophidden');
2016
  // console.log('vcc, ' ,dupDiv.children[5]);
2017
  var clone = div.cloneNode(true); // "deep" clone
2018
 
2019
+ jj++;
 
 
2020
  if (clonedDivId==0)
2021
  clone.style.marginLeft='5px';
2022
  else
2023
  clone.style.marginLeft='1px';
2024
 
2025
+ window.onclick = elem => {
2026
+ if (elem.target.tagName.startsWith('LORD-ICON') && elem.target.id.startsWith('addmctnameid')){
2027
+ console.log(elem.target.parentElement.parentElement.childNodes[1].value)
2028
+ clone.id = 'repeatforloop'+ elem.target.parentElement.parentElement.childNodes[1].value[0] + ++elem.target.parentElement.parentElement.childNodes[1].value[1];
2029
+ clone.setAttribute('class','repeatforloopclass'+elem.target.parentElement.parentElement.childNodes[1].value[0] + elem.target.parentElement.parentElement.childNodes[1].value[1]);
2030
+ clone.setAttribute('name','repeatforloopname'+elem.target.parentElement.parentElement.childNodes[1].value[0] + elem.target.parentElement.parentElement.childNodes[1].value[1]);
2031
+ clone.childNodes[11].id='addmctnameid'+elem.target.parentElement.parentElement.childNodes[1].value[0] + elem.target.parentElement.parentElement.childNodes[1].value[1];
2032
+ clone.childNodes[15].id='deletemctnameid'+elem.target.parentElement.parentElement.childNodes[1].value[0] + elem.target.parentElement.parentElement.childNodes[1].value[1];
2033
+
2034
+ if (elem.target.parentElement.nextElementSibling)
2035
+ {
2036
+ $("#"+elem.target.parentElement.parentElement.id).append(clone);
2037
+ }
2038
+ else
2039
+ {
2040
+ $("#"+elem.target.parentElement.parentElement.id).append(clone);
2041
+ $("#"+elem.target.parentElement.id).insertBefore(clone,document.getElementById('doneebackground'));
2042
+ }
2043
+ }
2044
+ }
2045
+ // dupDiv.appendChild(clone);
2046
+ // dupDiv.insertBefore(clone,document.getElementById('doneebackground'));
2047
 
2048
+ }
2049
+
2050
+ function deletemctnameicon(){
2051
+ window.onclick = elem => {
2052
+ if (elem.target.tagName.startsWith('LORD-ICON') && elem.target.id.startsWith('deletemctnameid'))
2053
+ {
2054
+ var numb = elem.target.parentElement.id.match(/\d/g);
2055
+ if (numb==null){
2056
+ numb=''
2057
+ }
2058
+ else
2059
+ numb = numb.join("");
2060
+ console.log(numb)
2061
+ var deletethisdiv= document.getElementById('repeatforloop'+ numb);
2062
+ // deletethisdiv.parentElement.childNodes[11].value[1]=deletethisdiv.parentElement.childNodes[11].value[1]-1;
2063
+ deletethisdiv.parentNode.removeChild(deletethisdiv);
2064
+
2065
+
2066
+ }
2067
+ }
2068
  }
2069
 
2070
  function colors(){
 
2090
  }
2091
 
2092
  }
2093
+
2094
+
2095
+ var ry = [[]];
2096
+ var canvas = document.querySelector("#myCanvas");
2097
+ // let w = (canvas.width = 450);
2098
+ // let h = (canvas.height = 280);
2099
+
2100
+ var ctx = canvas.getContext("2d");
2101
+
2102
+ var drp;
2103
+
2104
+ var color = 'rgb(47,255,255)';
2105
+
2106
+ function change(e){
2107
+ color = this.value;
2108
+ allcolors.push( color);
2109
+ }
2110
+ let hex2rgb= c=> `rgb(${c.match(/\w\w/g).map(x=>+`0x${x}`)})`;
2111
+
2112
+ myCanvas.addEventListener("click", e => {
2113
+
2114
+ var offset = canvas.getBoundingClientRect();
2115
+ var x = e.clientX - offset.left;
2116
+ var y = e.clientY - offset.top;
2117
+ //a new point is pushed on the last array of ry
2118
+
2119
+
2120
+ ry[ry.length - 1].push({ x: x, y: y, color:hex2rgb(color) });
2121
+ // delete everything
2122
+ // ctx.clearRect(0, 0, w, h);
2123
+ // draw everything
2124
+ // drawGrid();
2125
+ // console.log(canvaswindow.parentElement.document)
2126
+ // canvaswindow.window.oncontextmenu = function (e) {
2127
+ // e.preventDefault()
2128
+ // alert('Right Click')
2129
+ // }
2130
+
2131
+ drawChart();
2132
+
2133
+ });
2134
+
2135
+
2136
+ // NewShapeButtonId.addEventListener("click", e => {
2137
+ // //when NewShapeButtonId is clicked, a new array is pushed into the ry
2138
+
2139
+ // //
2140
+
2141
+
2142
+ // drp= generatecolorPickers()
2143
+ // console.log('drppp',drp)
2144
+ // canvaswindow.childNodes[7].onchange = change; //canvas color element --> child 7
2145
+ // ry.push([]);
2146
+ // // ry.push({x: x, y: y, strokecolor:color});
2147
+ // });
2148
+
2149
+ function drawChart() {
2150
+
2151
+
2152
+
2153
+ ctx.lineWidth = 15;
2154
+
2155
+ // for every array in the ry array
2156
+ for (let index = 0; index < ry.length; index++) {
2157
+ // for every point in the ry[index]
2158
+ for (let i = 0; i < ry[index].length; i++) {
2159
+ firstcircle=[]
2160
+ let l = ry[index][i];
2161
+ // draw the circle
2162
+ if (i==0){
2163
+ drawCircle(l.x, l.y);
2164
+ firstcircle=[l.x,l.y]
2165
+ }
2166
+ // draw the line
2167
+ if (i > 0) {
2168
+
2169
+ let last = ry[index][i - 1];
2170
+ ctx.beginPath();
2171
+ ctx.moveTo(last.x, last.y);
2172
+ ctx.lineTo(l.x, l.y);
2173
+ ctx.strokeStyle = l.color;
2174
+ ctx.stroke();
2175
+
2176
+
2177
+ }
2178
+
2179
+ }
2180
+ }
2181
+
2182
+
2183
+ }
2184
+
2185
+
2186
+
2187
+ function drawCircle(x, y) {
2188
+ ctx.beginPath();
2189
+ ctx.arc(x, y,1, 0, Math.PI *2);
2190
+ ctx.strokeStyle = 'rgb(47,255,255)';
2191
+ ctx.stroke();
2192
+ }
2193
+
2194
+
2195
+
2196
+
2197
+
2198
+
2199
+
2200
+ /*If the plan contains levels, open canvas window*/
2201
+ /*Set canvas code to be visible on the new window with the pdftoimg as the background*/
2202
+
2203
+ // pdfPathtoImg='/'+proj.value +'/'+proj1.value +'/'+ projsec.value+'/'+ pdfname
2204
+ var levelsin = document.getElementById('levelcheckbox');
2205
+ var canvaswindow= document.getElementById('canvaswindow');
2206
+ var undoButtonId=document.getElementById('undoButtonId');
2207
+ NewShapeButtonId=document.getElementById('NewShapeButtonId');
2208
+ var savecanvas=document.getElementById('savecanvas');
2209
+
2210
+ levelsin.addEventListener('click',function(){
2211
+ if( document.getElementById('levelcheckbox').checked)
2212
+ {
2213
+ // console.log(proj.value, proj1.value , projsec.value, pdfname)
2214
+ $.get( '/canvaspdftoimgBackground/'+pdfname).then (function(data){
2215
+ var popup = window.open('');
2216
+
2217
+ var element = popup.document.createElement('div');
2218
+ element.setAttribute('id', 'mydiv');
2219
+ canvaswindow.childNodes[1].height=data[1]; //canvas -->child 3
2220
+ canvaswindow.childNodes[1].width=data[2];
2221
+ element.append(canvaswindow);
2222
+ console.log(canvaswindow.childNodes)
2223
+
2224
+ canvaswindow.removeAttribute('hidden');
2225
+ var imgDrawon =document.createElement("img");
2226
+ imgDrawon.src = 'data:image/gif;base64,' +data[0];
2227
+ imgDrawon.width=data[2];
2228
+ imgDrawon.id='imgcanvas';
2229
+ imgDrawon.alt="Larry";
2230
+
2231
+
2232
+ imgDrawon.onload = function(){
2233
+ ctx.drawImage(imgDrawon,0,0);
2234
+ }
2235
+
2236
+
2237
+ undoButtonId.addEventListener("click", e => {
2238
+ //when undoButtonId is clicked the last point from the last array is deleted
2239
+ if (ry[ry.length - 1].length > 0) {
2240
+ ry[ry.length - 1].pop();
2241
+ } else {
2242
+ //if the last array is empty I delete this array
2243
+ ry.pop();
2244
+ //and then I delete the last point from the last array
2245
+ ry[ry.length - 1].pop();
2246
+ }
2247
+ // delete everything
2248
+ ctx.clearRect(0,0, canvas.width, canvas.height);
2249
+ //redraw background to draw lines over again
2250
+ ctx.drawImage(imgDrawon,0,0);
2251
+
2252
+
2253
+ drawChart();
2254
+
2255
+
2256
+ });
2257
+
2258
+ var win = popup.document.body;
2259
+ win.appendChild(element);
2260
+ var drp=popup.document.body.childNodes[0].childNodes[0].childNodes[7];
2261
+ NewShapeButtonId.addEventListener('click',function(){
2262
+
2263
+ // drp.lastChild.onchange = change; //canvas color element --> child 7
2264
+ ry.push([]);
2265
+ });
2266
+
2267
+ // ['click', 'touchend'].forEach(event => console.log(event))
2268
+ drp.childNodes[1].addEventListener('click',function(){
2269
+ drp.childNodes[1].onchange=change;
2270
+
2271
+ })
2272
+ // [drp.childNodes].forEach(function(elem){
2273
+ // elem.addEventListener('click',function(){
2274
+ // // elem.onchange=change;
2275
+ // console.log('hhahahahhahugaugkd')
2276
+ // })
2277
+ // })
2278
+
2279
+
2280
+ })
2281
+
2282
+ savecanvas.addEventListener('click',function(){
2283
+ var image = new Image();
2284
+ image.id = "pic";
2285
+ image.src = canvas.toDataURL("image/png");
2286
+ canvasimg=image.src;
2287
+
2288
+
2289
+ })
2290
+
2291
+ }
2292
+ })
2293
+
2294
  function generatecolorPickers(){
2295
+ var drp = canvaswindow.childNodes[7];
2296
  var section = document.getElementsByClassName('selectionsProjs')[0];
2297
  console.log('section::', section.value)
2298
+ // if (levelsin.value>1)
2299
+ // {
2300
  if (section.value.startsWith('3.2')){
2301
  alert('Levels are not supported in section 3.2.')
2302
+ // levelsin.value=1;
2303
  }
2304
  else if (section.value.startsWith('1.0'))
2305
  {
2306
+ // drp.innerHTML = '';
2307
+ // console.log(levelsin.value)
2308
+ // for (let i=0 ; i<levelsin.value ; i++)
2309
+ // {
2310
  var color = document.createElement("input");
2311
  color.type='color';
2312
  color.value=getRandomColor();
2313
+ console.log(color.value)
2314
  color.id= 'color';
2315
+ color.name='color1';
2316
+ // if ( (drp.offsetWidth) >250)
2317
  drp.style.display='block';
2318
 
2319
  drp.append(color);
 
2323
 
2324
  }
2325
  console.log(drp)
2326
+ return drp
2327
  }
2328
+ // else{
2329
+ // drp.innerHTML = '';
2330
+ // levelsin.value=1;
2331
+ // }
2332
+ // }
2333
+ // else
2334
+ // {
2335
+ // drp.innerHTML = '';
2336
+ // }
2337
+ // }
2338
  // var tooltipelem = document.getElementById("tooltip");
2339
  // console.log(tooltipelem)
2340
  // tooltipelem.addEventListener('mouseover',function(){
 
2373
  {
2374
  var section = document.getElementsByClassName("selectionsProjs")[0]
2375
  var drpdwn= document.getElementById('measurementselectionsid');
2376
+
2377
  drpdwn.innerHTML='';
2378
 
2379
  if (section.value.startsWith('1.0'))