API tools faq
paste
Advertisement
Guest User

FormModel

a guest
Dec 11th, 2018
82
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Project Docs</title>
  5. </head>
  6. <style>
  7.  
  8. .TopHeader{
  9. height: 75px;
  10. background-color: lightgrey;
  11. font-size: 24px;
  12. text-align: center;
  13. margin: auto;
  14. vertical-align: middle;
  15. border-width: 1;
  16. border-style: solid;
  17. border-color: grey;
  18. }
  19.  
  20. .PortHeader{
  21. height: 50px;
  22. background-color: grey;
  23. font-size: 24px;
  24. text-align: center;
  25. margin: auto;
  26. vertical-align: middle;
  27. border-width: 1;
  28. border-style: solid;
  29. border-color: grey;
  30. }
  31.  
  32. .body{
  33. position: absolute;
  34. top: 90px;
  35. right: 7px;
  36. left: 7px;
  37. bottom: 0px;
  38. display: flex;
  39. background-color: dodgerblue;
  40. }
  41.  
  42. .sidebar{
  43. width: 35%;
  44. background-color: lightgreen;
  45. border-width: 1;
  46. border-style: solid;
  47. border-color: grey;
  48. }
  49.  
  50. .PortDocArea{
  51. width: 65%;
  52. float:left;
  53. background-color: pink;
  54. }
  55. .container {
  56. display: flex;
  57. height: 100%;
  58. background: lightblue;
  59. flex-direction: column;
  60. }
  61.  
  62. .scrollable-content {
  63. background: white;
  64. flex-grow: 1;
  65. overflow: auto;
  66.  
  67. /* for Firefox */
  68. min-height: 0;
  69. }
  70.  
  71. .column-body {
  72. margin-top: 1px;
  73. background-color: pink;
  74. overflow-y: auto;
  75. overflow-x: hidden;
  76. }
  77.  
  78. .flexcontainer{
  79. display: flex;
  80. margin-left: : 3px;
  81. background-color: dodgerblue;
  82. border-width:1px;
  83. border-color: black;
  84. border-radius: 2px;
  85. height: 20px;
  86. }
  87.  
  88. .flexcontainer > div {
  89. width: 35%;
  90. }
  91.  
  92. .addBtn {
  93. margin-top: 5px;
  94. padding: 10px;
  95. width: 8%;
  96. background: #d9d9d9;
  97. color: #555;
  98. float: left;
  99. text-align: center;
  100. font-size: 16px;
  101. cursor: pointer;
  102. transition: 0.3s;
  103. border-radius: 3px;
  104. }
  105.  
  106. .addBtn:hover {
  107. background-color: #bbb;
  108. }
  109.  
  110. .close {
  111. position: relative;
  112. right: 0;
  113. top: 0;
  114.  
  115. width: 73%;
  116. text-align: center;
  117. border-radius: 3px;
  118. }
  119.  
  120. .close:hover {
  121. background-color: #f44336;
  122. color: white;
  123. }
  124.  
  125. .close:nth-child(odd):hover {
  126. background-color: #f44336;
  127. color: white;
  128. }
  129.  
  130.  
  131. input {
  132. margin-top: 5px;
  133. margin-left: 1%;
  134. border: none;
  135. border-radius: 3px;
  136. width: 78%;
  137. padding: 10px;
  138. float: left;
  139. font-size: 16px;
  140. }
  141.  
  142. ul, li {
  143. font-size: 16px;
  144. list-style: none;
  145. position: relative;
  146. background: grey;
  147. padding: 3px;
  148. display: block;
  149. border-color: black;
  150. border-radius: 4px;
  151. border-width: 2px;
  152. }
  153.  
  154. .checked{
  155. background: #888;
  156. color: #fff;
  157. text-decoration: line-through;
  158. }
  159.  
  160. ul, li:hover {
  161. font-size: 16px;
  162. list-style: none;
  163. position: relative;
  164. background: dodgerblue;
  165. padding: 3px;
  166. display: block;
  167. border-color: black;
  168. border-radius: 4px;
  169. border-width: 2px;
  170. }
  171.  
  172. ul li:nth-child(odd) {
  173. background: lightgrey;
  174. }
  175.  
  176. ul li:nth-child(odd):hover {
  177. background: dodgerblue;
  178. }
  179.  
  180. </style>
  181.  
  182. <body>
  183. <div class = "TopHeader">
  184. <div class="flexcontainer" style = "width: 100%; height: 100%; flex-direction: row; ">
  185.  
  186. <div><input type="file" id="fileinput" style="width: 100%;"></div>
  187. <div><span type ="button" onclick='handleFileSelect()' style = "width:100%;">Load</span></div>
  188. <div><span onclick='SaveDataToFile()' style = "width:100%;">Save</span></div>
  189. <div id="container" style="float: left; height: 10%;"></div>
  190. <div><p>Date/Time <span id="DateTime"></span></p></div>
  191. </div>
  192.  
  193. </div>
  194.  
  195.  
  196. <div class="body">
  197. <div class="sidebar">
  198. <div class="container">
  199. <div class="PortHeader" style="width: 98%; margin: 1px;">
  200. <input type="text" id="PortInput" placeholder="Port Name..." style="width: 80%">
  201. <span onclick="AddNewPort()" class="addBtn" style="margin-left: 3px;">Add</span>
  202. </div>
  203. <div class="flexcontainer" style="width: 99%; margin: 2px;">
  204. <div>Port</div>
  205. <div>ETA</div>
  206. <div style="text-align: right;">Advance Notice</div>
  207. </div>
  208.  
  209. <div class="scrollable-content">
  210. <div class="column-body" style="width:6%; float: left; margin-left: 2px;">
  211. <ul id="PortCloseBttn"></ul>
  212. </div>
  213.  
  214. <div class="column-body" style="width:47%; float: left; margin-left: 2px;">
  215. <ul id="PortsUL"></ul>
  216. </div>
  217.  
  218. <div class="column-body" style="width: 30%; float: left; margin-left: 2px; text-align: center;">
  219. <ul id="PortsETAUL"></ul>
  220. </div>
  221.  
  222. <div class="column-body" style="width: 9%; float: left; margin-left: 2px; text-align: center;">
  223. <ul id="PortsAdvNtcUL"></ul>
  224. </div>
  225.  
  226. <div class="column-body" style="width: 5%; float: left; margin-left: 2px; font-size: 14px;">
  227. <ul id="PortDocsDetailUL"></ul>
  228. </div>
  229.  
  230. </div>
  231.  
  232. </div>
  233. </div>
  234.  
  235. <div class="PortDocArea" style="border-width: 3px; border-color: black; border-style: solid;">
  236.  
  237. <div class="container">
  238. <div class="flexcontainer" style="width: 99%; margin: 5px;height: 60px;">
  239.  
  240. <div class="PortHeader" style="width: 50%; margin: 1px;">
  241. <input style="width: 80%;" type="text" id="PreArrivalDoc" placeholder="Pre-Arrival Doc...">
  242. <span onclick="addPreArrivalDocToList()" class="addBtn" style="margin-left: 3px;">Add</span>
  243. </div>
  244.  
  245. <div class="PortHeader" style="width: 50%; margin: 1px;">
  246. <input style="width: 70%" type="text" id="ArrivalDoc" placeholder="Arrival Doc...">
  247.  
  248. <input style="width: 4%" type="text" id="ArrivalDocCopies" placeholder=''>
  249. <span onclick="addArrivalDocToList()" class="addBtn" style="margin-left: 3px;">Add</span>
  250.  
  251. </div>
  252.  
  253. </div>
  254.  
  255. <div class="flexcontainer" style="height: 100%">
  256. <div class="scrollable-content" style="background-color: lightgreen; width: 48%; float: left;">
  257.  
  258. <div class="column-body" style="width:7%; float: left; margin-left: 2px;">
  259. <ul id="PreArrDocCloseBttn"></ul>
  260. </div>
  261.  
  262. <div class="column-body" style="width:91%; float: left; margin-left: 5px;">
  263. <ul id="PreArrivalUL"></ul>
  264. </div>
  265. </div>
  266.  
  267.  
  268. <div class="scrollable-content" style="background-color: green;width: 48%; float: left;">
  269. <div class="column-body" style="width: 7%; float: left; margin-left: 5px;">
  270. <ul id="ArrivalDocCloseBttn"></ul>
  271. </div>
  272.  
  273. <div class="column-body" style="width: 80%; float: left; margin-left: 5px;">
  274. <ul id="ArrivalUL"></ul>
  275. </div>
  276.  
  277. <div class="column-body" style="width: 9%; float: left; margin-left: 5px;">
  278. <ul id="NCopies" style="width: 95%; float: left; text-align: center;"></ul>
  279.  
  280. </div>
  281.  
  282. </div>
  283. </div>
  284. </div>
  285. </div>
  286.  
  287. </div>
  288.  
  289. <script>
  290. var PortsArray = [];
  291. var portIdx = -1;
  292.  
  293. findIndx("PortCloseBttn", function(elementId, index) {
  294. //alert(elementId + " " + index);
  295.  
  296. // splice here PortsArray
  297. cleanAllColumns()
  298. // redraw elements SideBar
  299. NewPort('Port Name Here', 'ETA Here', 'NCopies Here');
  300. })
  301.  
  302. findIndx("PortDocsDetailUL", function(elementId, index) {
  303. alert(elementId + " " + index);
  304.  
  305. portIdx = index
  306. console.log(portIdx);
  307.  
  308. document.getElementById("PreArrDocCloseBttn").innerHTML = "";
  309. document.getElementById("PreArrivalUL").innerHTML = "";
  310.  
  311. document.getElementById("ArrivalDocCloseBttn").innerHTML = "";
  312. document.getElementById("ArrivalUL").innerHTML = "";
  313. document.getElementById("NCopies").innerHTML = "";
  314.  
  315. for (var i=0; i<PortsArray[portIdx].ListofPreArrivalDocs.length; i++){
  316.  
  317. var iArrDoc=document.getElementById("PreArrivalUL").childNodes.length;
  318.  
  319. var liPreArrDoc = document.createElement("li");
  320. var inputValue = PortsArray[portIdx].ListofPreArrivalDocs[i].Name;
  321. var tPreDoc = document.createTextNode(inputValue);
  322. liPreArrDoc.appendChild(tPreDoc);
  323.  
  324. var liPreArrDocClose = document.createElement("li");
  325. liPreArrDocClose.className = "close"
  326. var txt = document.createTextNode("\u00D7");
  327. liPreArrDocClose.appendChild(txt);
  328.  
  329. document.getElementById("PreArrDocCloseBttn").appendChild(liPreArrDocClose);
  330. document.getElementById("PreArrivalUL").appendChild(liPreArrDoc);
  331. document.getElementById("PreArrivalDoc").value = "";
  332.  
  333. };
  334.  
  335. for (var i=0; i<PortsArray[portIdx].ListofArrivalDocs.length; i++){
  336. var iArrDoc=document.getElementById("ArrivalUL").childNodes.length;
  337.  
  338. var liArrDoc = document.createElement("li");
  339. var inputValueName = PortsArray[portIdx].ListofArrivalDocs[i].Name;
  340. var tArrDoc = document.createTextNode(inputValueName);
  341. liArrDoc.appendChild(tArrDoc);
  342.  
  343. var liArrDocNCopies = document.createElement("li");
  344. var inputValueNCopies = PortsArray[portIdx].ListofArrivalDocs[i].NumberOfCopies;
  345. var tArrDoc = document.createTextNode(inputValueNCopies);
  346. liArrDocNCopies.appendChild(tArrDoc);
  347.  
  348.  
  349. var liArrDocClose = document.createElement("li");
  350. liArrDocClose.className = "close"
  351. var txt = document.createTextNode("\u00D7");
  352. liArrDocClose.appendChild(txt);
  353.  
  354. document.getElementById("ArrivalDocCloseBttn").appendChild(liArrDocClose);
  355. document.getElementById("ArrivalUL").appendChild(liArrDoc);
  356. document.getElementById("NCopies").appendChild(liArrDocNCopies);
  357.  
  358. document.getElementById("ArrivalDoc").value = "";
  359.  
  360. }
  361.  
  362.  
  363. })
  364.  
  365. findIndx("PreArrDocCloseBttn", function(elementId, index) {
  366. alert( portIdx + " " + index)
  367.  
  368. document.getElementById("PreArrDocCloseBttn").innerHTML = "";
  369. document.getElementById("PreArrivalUL").innerHTML = "";
  370.  
  371. DeleteRecord(PortsArray[portIdx].ListofPreArrivalDocs, index)
  372. for (var i=0; i<PortsArray[portIdx].ListofPreArrivalDocs.length; i++){
  373.  
  374. var iArrDoc=document.getElementById("PreArrivalUL").childNodes.length;
  375.  
  376. var liPreArrDoc = document.createElement("li");
  377. var inputValue = PortsArray[portIdx].ListofPreArrivalDocs[i].Name;
  378. var tPreDoc = document.createTextNode(inputValue);
  379. liPreArrDoc.appendChild(tPreDoc);
  380.  
  381. var liPreArrDocClose = document.createElement("li");
  382. liPreArrDocClose.className = "close"
  383. var txt = document.createTextNode("\u00D7");
  384. liPreArrDocClose.appendChild(txt);
  385.  
  386. document.getElementById("PreArrDocCloseBttn").appendChild(liPreArrDocClose);
  387. document.getElementById("PreArrivalUL").appendChild(liPreArrDoc);
  388. document.getElementById("PreArrivalDoc").value = "";
  389.  
  390. };
  391. })
  392.  
  393. findIndx("ArrivalDocCloseBttn" , function(elementId, index) {
  394. alert (portIdx + " " + index)
  395. DeleteRecord(PortsArray[portIdx].ListofArrivalDocs, index);
  396.  
  397. document.getElementById("ArrivalDocCloseBttn").innerHTML = "";
  398. document.getElementById("ArrivalUL").innerHTML = "";
  399. document.getElementById("NCopies").innerHTML = "";
  400.  
  401. for (var i=0; i<PortsArray[portIdx].ListofArrivalDocs.length; i++){
  402. var iArrDoc=document.getElementById("ArrivalUL").childNodes.length;
  403.  
  404. var liArrDoc = document.createElement("li");
  405. var inputValueName = PortsArray[portIdx].ListofArrivalDocs[i].Name;
  406. var tArrDoc = document.createTextNode(inputValueName);
  407. liArrDoc.appendChild(tArrDoc);
  408.  
  409. var liArrDocNCopies = document.createElement("li");
  410. var inputValueNCopies = PortsArray[portIdx].ListofArrivalDocs[i].NumberOfCopies;
  411. var tArrDoc = document.createTextNode(inputValueNCopies);
  412. liArrDocNCopies.appendChild(tArrDoc);
  413.  
  414.  
  415. var liArrDocClose = document.createElement("li");
  416. liArrDocClose.className = "close"
  417. var txt = document.createTextNode("\u00D7");
  418. liArrDocClose.appendChild(txt);
  419.  
  420. document.getElementById("ArrivalDocCloseBttn").appendChild(liArrDocClose);
  421. document.getElementById("ArrivalUL").appendChild(liArrDoc);
  422. document.getElementById("NCopies").appendChild(liArrDocNCopies);
  423.  
  424. document.getElementById("ArrivalDoc").value = "";
  425.  
  426. }
  427. })
  428.  
  429.  
  430.  
  431. var dt = new Date();
  432. document.getElementById("DateTime").innerHTML = ((dt.getFullYear())+"-"+("0"+(dt.getMonth()+1)).slice(-2)) +"-"+ (("0"+dt.getDate()).slice(-2)) +" "+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2));
  433.  
  434. function findIndx(elementId, callback) {
  435. document.getElementById(elementId).onclick = function(event) {
  436. var list= this.getElementsByTagName("li");
  437. for (var i=0; i!= list.length; ++i) {
  438. if (list[i]==event.target) {
  439. if(callback) {
  440. callback(elementId, i)
  441. }
  442. return;
  443. };
  444. }
  445. };
  446. }
  447.  
  448. function AddNewPort() {
  449. NewPort(document.getElementById('PortInput').value, 'YYYY-MM-DD HH:MM', 0)
  450. }
  451.  
  452. function NewPort(pName, pETA, pAdvanceNotice) {
  453.  
  454. var iPort=document.getElementById("PortsUL").childNodes.length;
  455.  
  456. var liPort = document.createElement("li");
  457. var Portt = document.createTextNode(pName);
  458. liPort.appendChild(Portt);
  459.  
  460. var liETA = document.createElement("li");
  461. var tETA = document.createTextNode(pETA);
  462. liETA.appendChild(tETA);
  463.  
  464. var lipAdvanceNotice = document.createElement("li");
  465. var tpAdvanceNotice = document.createTextNode(pAdvanceNotice);
  466. lipAdvanceNotice.appendChild(tpAdvanceNotice);
  467.  
  468. var liPortDocsDetail = document.createElement("li");
  469. var PortDocsDetailt = document.createTextNode("\u039E");
  470. liPortDocsDetail.appendChild(PortDocsDetailt);
  471.  
  472. var liClose = document.createElement("li");
  473. liClose.className = "close"
  474. var txt = document.createTextNode("\u00D7");
  475.  
  476. if (pName != '') {
  477.  
  478. liClose.appendChild(txt);
  479. document.getElementById("PortCloseBttn").appendChild(liClose);
  480. document.getElementById("PortsUL").appendChild(liPort);
  481.  
  482. document.getElementById("PortInput").value = "";
  483.  
  484. document.getElementById("PortsETAUL").appendChild(liETA);
  485.  
  486. document.getElementById("PortsAdvNtcUL").appendChild(lipAdvanceNotice);
  487.  
  488. document.getElementById("PortDocsDetailUL").appendChild(liPortDocsDetail);
  489. } else {
  490. alert("You must write something!");
  491. }
  492. }
  493.  
  494. function addPreArrivalDocToList(){
  495.  
  496. var iArrDoc=document.getElementById("PreArrivalUL").childNodes.length;
  497.  
  498. var liPreArrDoc = document.createElement("li");
  499. var inputValue = document.getElementById("PreArrivalDoc").value;
  500. var tPreDoc = document.createTextNode(inputValue);
  501. liPreArrDoc.appendChild(tPreDoc);
  502.  
  503. var liPreArrDocClose = document.createElement("li");
  504. liPreArrDocClose.className = "close"
  505. var txt = document.createTextNode("\u00D7");
  506. liPreArrDocClose.appendChild(txt);
  507.  
  508. if (inputValue!="") {
  509. document.getElementById("PreArrDocCloseBttn").appendChild(liPreArrDocClose);
  510. document.getElementById("PreArrivalUL").appendChild(liPreArrDoc);
  511. document.getElementById("PreArrivalDoc").value = "";
  512.  
  513. var NewPreArrDocObj = {};
  514. NewPreArrDocObj.Name = inputValue;
  515. NewPreArrDocObj.Status = false;
  516. PortsArray[portIdx].ListofPreArrivalDocs.push(NewPreArrDocObj);
  517.  
  518.  
  519. }else{
  520. alert("Enter Name of Document!")
  521. }
  522.  
  523. }
  524.  
  525. function addArrivalDocToList(){
  526.  
  527. var iPreArrDoc=document.getElementById("ArrivalUL").childNodes.length;
  528.  
  529. var liDoc = document.createElement("li");
  530. var inputValueDocName = document.getElementById("ArrivalDoc").value;
  531. var DocNamet = document.createTextNode(inputValueDocName);
  532. liDoc.appendChild(DocNamet);
  533. var liCopies = document.createElement("li");
  534. var inputValueDocCopies = document.getElementById("ArrivalDocCopies").value;
  535. DocCopiest = document.createTextNode(inputValueDocCopies);
  536. liCopies.appendChild(DocCopiest);
  537.  
  538. if (inputValueDocName===""||inputValueDocCopies==="") {alert("Document or Number of Copies not Entered!")
  539. }else{
  540. var liArrDocClose = document.createElement("li");
  541. liArrDocClose.className = "close"
  542. var txt = document.createTextNode("\u00D7");
  543.  
  544. liArrDocClose.appendChild(txt);
  545. document.getElementById("ArrivalDocCloseBttn").appendChild(liArrDocClose);
  546. document.getElementById("ArrivalUL").appendChild(liDoc);
  547. liDoc.contentEditable = "true";
  548. document.getElementById("ArrivalDoc").value = "";
  549. document.getElementById("NCopies").appendChild(liCopies);
  550. liCopies.contentEditable = "true";
  551. document.getElementById("ArrivalDocCopies").value = "";
  552.  
  553. var NewArrDocObj = {};
  554. NewArrDocObj.Name = inputValueDocName;
  555. NewArrDocObj.NumberOfCopies = inputValueDocCopies;
  556. NewArrDocObj.Status = false;
  557. PortsArray[portIdx].ListofArrivalDocs.push(NewArrDocObj);
  558.  
  559. }
  560. }
  561.  
  562. function handleFileSelect()
  563. {
  564. if (window.File && window.FileReader && window.FileList && window.Blob) {
  565.  
  566. } else {
  567. alert('The File APIs are not fully supported in this browser.');
  568. return;
  569. }
  570.  
  571. input = document.getElementById('fileinput');
  572. if (!input) {
  573. alert("Um, couldn't find the fileinput element.");
  574. }
  575. else if (!input.files) {
  576. alert("This browser doesn't seem to support the `files` property of file inputs.");
  577. }
  578. else if (!input.files[0]) {
  579. alert("Please select a file before clicking 'Load'");
  580. }
  581. else {
  582. file = input.files[0];
  583. fr = new FileReader();
  584. fr.onload = receivedText;
  585. fr.readAsText(file);
  586. }
  587. }
  588. function receivedText() {
  589. var result = JSON.parse(fr.result);
  590. PortsArray = result.PortsArray;
  591.  
  592. console.log(PortsArray);
  593. updatePortlist(PortsArray);
  594. }
  595.  
  596. function updatePortlist(updPortsArray){
  597.  
  598. cleanAllColumns();
  599.  
  600. for (var i=0; i<updPortsArray.length; i++){
  601. NewPort(updPortsArray[i].Name, updPortsArray[i].ETA, updPortsArray[i].DueTime);
  602. };
  603. }
  604.  
  605. function SaveDataToFile (){
  606.  
  607. var ObjToSave = {PortsArray};
  608. var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(ObjToSave));
  609.  
  610. var a = document.createElement('a');
  611. a.href = 'data:' + data;
  612. a.download = 'data.json';
  613. a.innerHTML = 'save JSON';
  614.  
  615. var container = document.getElementById('container');
  616. document.getElementById("container").innerHTML = "";
  617. container.appendChild(a);
  618. }
  619.  
  620. function cleanAllColumns(){
  621.  
  622. document.getElementById("PortCloseBttn").innerHTML = "";
  623. document.getElementById("PortDocsDetailUL").innerHTML = "";
  624. document.getElementById("PortsUL").innerHTML = "";
  625. document.getElementById("PortsETAUL").innerHTML = "";
  626. document.getElementById("PortsAdvNtcUL").innerHTML = "";
  627.  
  628. document.getElementById("PreArrDocCloseBttn").innerHTML = "";
  629. document.getElementById("PreArrivalUL").innerHTML = "";
  630.  
  631. document.getElementById("ArrivalDocCloseBttn").innerHTML = "";
  632. document.getElementById("ArrivalUL").innerHTML = "";
  633. document.getElementById("NCopies").innerHTML = "";
  634. }
  635.  
  636. function DeleteRecord(ArrayToModify, RecordToDelete){
  637. ArrayToModify.splice (RecordToDelete, 1);
  638. }
  639. </script>
  640. </body>
  641. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!