Readme folder and files added for autogenerate document

README.md

@@ -4,7 +4,7 @@
 
 This is some example code to show you how to use JSDoc for documenting your JavaScript.
 
-Please use the below steps.
+Please following the below steps.
 
 **Step 1** 
 
@@ -13,13 +13,14 @@ https://nodejs.org/en/download/
 
 **Step 2**
 
-#To initiate package json visual studio code terminal
+#To initiate package json visual studio code terminal  
 npm init -y
 
 **Step 3** 
 
 #update the code script section in package.json
-"scripts": {
+
+  "scripts": {
     "doc": "jsdoc -c jsdoc.json"
   },
 
@@ -50,21 +51,10 @@ npm i -D jsdoc
     }
     }
   
-  **Note :** created readme folder and add LICENSE.md and technical_document.md file and tutorials.json.
-		  update tutorials.json following code
-		  
-    {
-     "LICENSE": {
-     "title": "LICENSE"
-     },
-     "technical_document": {
-     "title": "technical_document"
-    }
-    }
 
 **Step 5**
 
-#Run the jsdoc command in visual studio code terminal
+#Run the jsdoc command in visual studio code terminal  
 npm run doc
 
 *The JSDoc has created docs and other dependency file generated and customize your documentation.

readme/LICENSE.md

@@ -0,0 +1,115 @@
+## oopt-gnpy-web-gui
+
+
+### Introduction
+
+**Copyright (c) oopt-gnpy-web-gui**
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+### Dependencies
+
+**vis-network**
+
+ https://visjs.github.io/vis-network/
+ A dynamic, browser-based visualization library.
+ 
+ @version 9.1.2
+ @date    2022-03-28T20:17:35.342Z
+ @copyright (c) 2011-2017 Almende B.V, http://almende.com
+ @copyright (c) 2017-2019 visjs contributors, https://github.com/visjs
+ 
+ @license
+ vis.js is dual licensed under both
+ 
+ 1. The Apache 2.0 License http://www.apache.org/licenses/LICENSE-2.0 and
+ 2. The MIT License http://opensource.org/licenses/MIT
+
+ vis.js may be distributed under either license.
+
+**taffy.js**
+
+ Software License Agreement (BSD License) 
+ Web: http://taffydb.com Twitter: http://twitter.com/biastoact
+ Copyright (c) All rights reserved.
+Redistribution and use of this software in source and binary forms, with or without modification, are permitted provided that the following condition is met:
+
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+**Bootstrap**
+
+ Bootstrap v4.6.1 (https://getbootstrap.com/)
+ Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+ Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+
+**html2canvas**  
+
+ html2canvas 0.4.1 <http://html2canvas.hertzen.com>
+ Copyright (c) 2013 Niklas von Hertzen
+ Released under MIT License
+
+**jQuery**
+
+ jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license 
+
+**popper.min.js**
+
+ Copyright (C) Federico Zivolo 2020
+ Distributed under the MIT License (license terms are at http://opensource.org/licenses/MIT).
+ sourceMappingURL=popper.min.js.map
+
+**Bootstrap**
+
+ Bootstrap v4.6.1 (https://getbootstrap.com/)
+ Copyright 2011-2021 The Bootstrap Authors
+ Copyright 2011-2021 Twitter, Inc.
+ Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+
+ 
+**FileSaver.js**
+
+ A saveAs() FileSaver implementation.
+
+ By Eli Grey, http://eligrey.com
+
+ License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
+ source  : http://purl.eligrey.com/github/FileSaver.js
+
+**Font Awesome**
+
+ Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+
+ Font Awesome Free 5.0.6 by @fontawesome - http://fontawesome.com
+ License - http://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+
+ **Material Icons**
+
+ We have made these icons available for you to incorporate them into your products under the Apache License Version 2.0. 
+
+ Feel free to remix and re-share these icons and documentation in your products. 
+
+ We'd love attribution in your app's about screen, but it's not required.
+ 
+**Roboto Icons**      
+
+ These fonts are licensed under the Apache License, Version 2.0.
+
+ You can use them in your products & projects <20> print or digital, commercial or otherwise.
+
+ This isn't legal advice, please consider consulting a lawyer and see the full license for all details.
+
+**Oswald Icons** 
+
+ These fonts are licensed under the Open Font License.
+
+ You can use them in your products & projects <20> print or digital, commercial or otherwise.
+
+ This isn't legal advice, please consider consulting a lawyer and see the full license for all details.
+ 
+           

readme/technical_document.md

@@ -0,0 +1,101 @@
+#### <ins>GNPy Tool UI/UX</ins>
+
+**Technologies:**
+
+**Front-End : HTML**
+
+**Client-Script : Javascript and Jquery**
+
+**CSS : Bootstrap**
+
+**<ins>Scope:</ins>**
+
+The main motivation behind this document is to provide the requirements of a GUI framework for the GNPy planning tool. GNPy is an open-source multi-vendor tool for optical network planning. The tool is in active development and with it, operators will no longer have to depend on their suppliers to plan routes and network capacity but will have an independent way to lay out their requirements and simulate network conditions. Having a user-friendly GUI framework is key for the larger adoption of the tool in building optical networks. The planning tool considers certain inputs from the users – network topology, fiber details, traffic matrix, specific network constraints pertaining to both node and span and generates an output which determines the structure of the node (ROADM, OADM or Amplifier), optical results (GSNR, Power budget, linear and non-linear impairments. The software can be offline (PC/MAC based) or can be web-based similar to https://gnpy.app/ without user credentials. SW must be BSD license according to TIP-PSE/GNPy charter. 
+
+**<ins>Software Architecture Diagram:</ins>**
+
+![Software Architecture Diagram](../readme/SoftwareArchitectureDiagram.png)
+
+**<ins>Js libraries:</ins>**
+
+**<ins>Vis.js (Network):</ins>**
+
+A network is a visualization to display networks of networks consisting of nodes and edges. The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more. The network visualization works smoothly on any modern browser for up to a few thousand nodes and edges. To handle a larger number of nodes, the Network has clustering support. The network uses HTML canvas for rendering.  
+
+**<ins>Alea.js:</ins>**
+
+Alea library is a pseudo-random number generator (PRNG). 
+
+**<ins>ExampleUtil.js:</ins>**
+
+This library describes how to create some random nodes and fiber/patch/service. 
+
+**<ins>Mynetwork.js:</ins>**
+
+The mynetwork library file describes how to initialize the network area using vis.js and defines common functionalities of network components. 
+
+**<ins>Node.js:</ins>**
+
+The node can be defined as the connection point of "ROADM, Attenuator, Transceiver, Amplifier, and Raman Amplifier" and defines the node manipulations.
+
+**<ins>Fiber.js:</ins>**
+
+The fiber library describes how to add a fiber connection between any 2 nodes by dragging from source node to destination and defines the fiber manipulation. 
+
+**<ins>Patch.js:</ins>**
+
+The patch library describes how to add a patch connection between any 2 nodes by dragging from source node to destination and defines the patch manipulation. 
+
+**<ins>Service.js:</ins>**
+
+The Service is also the same as the connectivity path between 2 transceiver nodes. This library file defines service manipulation. 
+
+**<ins>Constraints.js:</ins>**
+
+The constraints library is a list of rules for components. It is defining the network topology validation. 
+
+**<ins>Validation.js:</ins>**
+
+The Validations library currently describes the validation of component name, length, and type. 
+
+**<ins>Main.js:</ins>**
+
+The main.js library describes UI actions. like show/hide and update the HTML element with style based on user interaction.
+
+**<ins>Filesaver.js:</ins>**
+
+Filesaver.js is the solution to saving files on the client-side and is perfect for web apps that generate files on the client. 
+
+**<ins>Html2Canvas.js:</ins>**
+
+The library allows taking "screenshots" of webpages or parts of them, directly on the user’s browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. 
+
+**<ins>Taffy.js:</ins>**
+
+The library provides powerful in-memory database capabilities to both browser and server applications. this stores data in JSON format. 
+
+**<ins>Bootstrap.js:</ins>**
+
+Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS-based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and many others, as well as optional JavaScript plugins. 
+
+**<ins>Jquery.js:</ins>**
+
+jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. 
+
+**<ins>Lodash.js:</ins>**
+
+Lodash helps programmers write more concisely and easier to maintain JavaScript code. Lodash contains tools to simplify programming with strings, numbers, arrays, functions, and objects. By convention, the Lodash module is mapped to the underscore character 
+
+**<ins>Popper.js:</ins>**
+
+A library used to manage poppers in web applications. Popper. js is a positioning engine, its purpose is to calculate the position of an element to make it possible to position it near a given reference element. 
+
+**<ins>JSON:</ins>**
+
+**<ins>Configuration Data.json:</ins>**
+
+This JSON describes the data configuration of network components. 
+
+**<ins>Style Data.json:</ins>**
+
+This JSON describes the style configuration of network components. 

readme/tutorials.json

@@ -0,0 +1,8 @@
+{
+    "LICENSE": {
+    "title": "LICENSE"
+    },
+    "technical_document": {
+    "title": "technical_document"
+   }
+   }