|
|
@@ -1,47 +1,730 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html>
|
|
|
- <head>
|
|
|
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
|
- <script src="js/myEvents.js"></script>
|
|
|
- <script>
|
|
|
-
|
|
|
- </script>
|
|
|
- <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <div class="topContainer">
|
|
|
- MODELING TOOL
|
|
|
- </div>
|
|
|
- <div class="sidebarContainer">
|
|
|
- <button id="load_nodeset" type="button">
|
|
|
- Load Nodeset file
|
|
|
- </button>
|
|
|
- <button id="delete_nodeset" type="button">
|
|
|
- Delete Nodeset file
|
|
|
- </button>
|
|
|
- <button id="export_model" type="button">
|
|
|
- Export new model
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- <div class="addressSpaceContainer">
|
|
|
- <div class="aSTableStart">
|
|
|
- <table>
|
|
|
- <tbody>
|
|
|
- <tr>
|
|
|
- <td>
|
|
|
- <img class="nodeRoot" src="graphics/node.svg" height="100" width="100"></img>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <link rel="stylesheet" href="style.css"
|
|
|
+ <title></title>
|
|
|
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <nav class="navbar navbar-expand-lg bg-info">
|
|
|
+ <div class="container-fluid">
|
|
|
+ <a href="#" class="navbar-brand">
|
|
|
+ <h1>Frontend Modeler</h1>
|
|
|
+ </a>
|
|
|
+ <img src="cdp_logo_sm.png" class="rounded float-end" alt="Responsive image">
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ <br>
|
|
|
+ <div class="container">
|
|
|
+ <div class="custom-file">
|
|
|
+ <input type="file" class="custom-file-select" id="projectselect" aria-describedby="projectselect">
|
|
|
+ <button type="button" id = "Open" class="btn btn btn-outline-primary">Open Project</button>
|
|
|
+ </div>
|
|
|
+ <button type="button" id="New" class="btn btn btn-outline-primary">New Project</button>
|
|
|
+ <button type="button" id="SaveAs" class="btn btn btn-outline-primary">Save as</button>
|
|
|
</div>
|
|
|
- <div class="aSTableMain">
|
|
|
- <table>
|
|
|
- <tbody id="tree">
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </section>
|
|
|
- </div>
|
|
|
+ <br>
|
|
|
+ <div class="accordion" id="accordionnodeset">
|
|
|
+ <div class="accordion-item">
|
|
|
+ <h2 class="accordion-header" id="headingOne">
|
|
|
+ <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsenodesetOne" aria-expanded="true" aria-controls="collapseOne">
|
|
|
+ Nodeset Files
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapsenodesetOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionnodeset">
|
|
|
+ <div class="accordion-body">
|
|
|
+ <div class="row align-items-start bg-light">
|
|
|
+ <div class="mb-3">
|
|
|
+ <!--<label for="formFileMultiple" class="form-label">Multiple files input example</label>-->
|
|
|
+ <ul class="list-group" id="nodesetlist">
|
|
|
+ <li class="list-group-item disabled py-1">0:http://opcfoundation.org/UA/</li>
|
|
|
+ <li class="list-group-item py-1">A second item</li>
|
|
|
+ </ul>
|
|
|
+ <div class="custom-file">
|
|
|
+ <input type="file" class="custom-file-input" id="customFileInput" aria-describedby="customFileInput">
|
|
|
+ <button type="button" class="btn btn-primary" id="loadnodesetbutton">Load</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="container-fluid">
|
|
|
+ <ul class="nav nav-tabs" id="myTab" role="tablist">
|
|
|
+ <li class="nav-item" role="presentation">
|
|
|
+ <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="false">Tree View</button>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item" role="presentation">
|
|
|
+ <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Node Specification</button>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item" role="presentation">
|
|
|
+ <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Endpoint Configuration</button>
|
|
|
+ </li>
|
|
|
+ <li class="nav-item" role="presentation">
|
|
|
+ <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false">Service Modelling</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="tab-content" id="myTabContent">
|
|
|
+ <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
|
|
|
+ <div class="container-fluid">
|
|
|
+ <div class="row align-items-start bg-light">
|
|
|
+
|
|
|
+ <div class="col-sm-6">
|
|
|
+ <br>
|
|
|
+ <div id="jstree_demo_div" class= "container bg-white">
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-sm-6">
|
|
|
+ <br>
|
|
|
+ <div class="row align-items-start bg-light">
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <button type="button" class="btn btn-primary" id="changeinstance">Change Instance</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ <div class="row align-items-start bg-light">
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <button type="button" class="btn btn-secondary">Save</button>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <button type="button" class="btn btn-secondary">Discard</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0"><div class="accordion" id="accordionExample">
|
|
|
+ <div class="accordion-item">
|
|
|
+ <h2 class="accordion-header" id="commonattributes">
|
|
|
+ <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
|
|
|
+ Common attributes
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapseOne" class="accordion-collapse collapse collapse" aria-labelledby="commonattributes" data-bs-parent=>
|
|
|
+ <div class="accordion-body">
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="instancename" class="col-sm-2 col-form-label">Name</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="email" class="form-control" id="instancename">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">Namespace</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <select class="form-select form-select-sm" aria-label=".form-select-sm example" id="instancenamespace">
|
|
|
+ <option selected>http://yourorganisation.org/namespacename/</option>
|
|
|
+ <option value="1">One</option>
|
|
|
+ <option value="2">Two</option>
|
|
|
+ <option value="3">Three</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">NodeClass</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="nodeclass" class="form-control" id="instancenodeclass">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">Type Definition</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="typedefinition" class="form-control" id="instancetypedefinition">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="modellingrule" class="col-sm-2 col-form-label">Modelling Rule</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="email" class="form-control" id="modellingrule">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">NodeId</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <div class="input-group mb-3">
|
|
|
+ <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="instancenodeidtype">Numeric</button>
|
|
|
+ <ul class="dropdown-menu">
|
|
|
+ <li><a class="dropdown-item" href="#" id="numericnodeid">Numeric</a></li>
|
|
|
+ <li><a class="dropdown-item" href="#" id="stringnodeid">String</a></li>
|
|
|
+ <li><a class="dropdown-item" href="#" id="guidnodeid">Guid</a></li>
|
|
|
+ <li><a class="dropdown-item" href="#" id="opaquenodeid">Opaque</a></li>
|
|
|
+ </ul>
|
|
|
+ <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instancenodeid">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">DisplayName</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <div class="input-group">
|
|
|
+ <div class="col-xs-1">
|
|
|
+ <input type="text" aria-label="First name" class="form-control" id="instancedisplayname1">
|
|
|
+ </div>
|
|
|
+ <input type="text" aria-label="Last name" class="form-control" id="instancedisplayname2">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">BrowseName</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <div class="input-group mb-3">
|
|
|
+ <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="instancebrowsename1">0</button>
|
|
|
+ <ul class="dropdown-menu" id="namespaceidxbrowsename" size="5">
|
|
|
+ <li><a class="dropdown-item" href="#">1</a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">2</a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">3</a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">4</a></li>
|
|
|
+ </ul>
|
|
|
+ <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instancebrowsename2">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">Description</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <div class="input-group">
|
|
|
+ <div class="col-xs-1">
|
|
|
+ <input type="text" aria-label="First name" class="form-control" placeholder="en" disabled>
|
|
|
+ </div>
|
|
|
+ <input type="text" aria-label="Last name" class="form-control" id="instancedescription">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="accordion-item">
|
|
|
+ <h2 class="accordion-header" id="objectattributes">
|
|
|
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" id="objectattributesbutton">
|
|
|
+ Object attributes
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="objectattributes" data-bs-parent=>
|
|
|
+ <div class="accordion-body">
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="exampleFormControlInput6" class="col-sm-2 col-form-label">EventNotifier</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <div class="input-group mb-3">
|
|
|
+ <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instanceeventnotifier" placeholder="0 (None)">
|
|
|
+ <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">...</button>
|
|
|
+ <ul class="dropdown-menu dropdown-menu-end">
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="subscribeevents">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ Subscribe To Events
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="reserved" disabled>
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ Reserved
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="historyread">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ HistoryRead
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="historywrite">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ HistoryWrite
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="accordion-item" id="var_attr">
|
|
|
+ <h2 class="accordion-header" id="variableattributes">
|
|
|
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1" id="variableattributesbutton">
|
|
|
+ Variable attributes
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapseTwo1" class="accordion-collapse collapse" aria-labelledby="variableattributes" data-bs-parent=>
|
|
|
+ <div class="accordion-body">
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">Data Type</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="email" class="form-control" id="inputEmail3" placeholder="BaseDataType">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">Value</label>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <label for="inputEmail3" class="col-form-label">Null</label>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="executablemethodcheck">
|
|
|
+ </div>
|
|
|
+ <input type="email" class="form-control" id="inputEmail3" placeholder="...">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">ValueRank</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="email" class="form-control" id="inputEmail3" placeholder="Scalar">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">ArrayDimensions</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="email" class="form-control" id="inputEmail3">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="exampleFormControlInput6" class="col-sm-2 col-form-label">AccessLevel</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <div class="input-group mb-3">
|
|
|
+ <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instanceaccesslevel" placeholder="0 (None)">
|
|
|
+ <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">...</button>
|
|
|
+ <ul class="dropdown-menu dropdown-menu-end">
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="currentread">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ CurrentRead
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="currentwrite">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ CurrentWrite
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="historyreadvar">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ HistoryRead
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="historywritevar">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ HistoryWrite
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="semanticchange">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ SemanticChange
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="statuswrite">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ StatusWrite
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="timestampwrite">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ TimestampWrite
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">AccessLevelEx</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="email" class="form-control" id="inputEmail3" placeholder="None">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">Historizing</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="email" class="form-control" id="inputEmail3">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">MinimumSamplingInterval</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="email" class="form-control" id="inputEmail3" placeholder="0">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="accordion-item">
|
|
|
+ <h2 class="accordion-header" id="methodattributes">
|
|
|
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2" id="methodattributesbutton">
|
|
|
+ Method attributes
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapseTwo2" class="accordion-collapse collapse" aria-labelledby="methodattributes" data-bs-parent=>
|
|
|
+ <div class="accordion-body">
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="exampleFormControlInput6" class="col-sm-2 col-form-label">WriteMask</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <div class="input-group mb-3">
|
|
|
+ <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instanceeventnotifier" placeholder="0">
|
|
|
+ <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">...</button>
|
|
|
+ <ul class="dropdown-menu dropdown-menu-end">
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask1">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ AccessLevel
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask2">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ ArrayDimensions
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask3">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ BrowseName
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask4">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ ContainsNoLoops
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask5">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ DataType
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask6">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ Description
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask7">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ DisplayName
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask8">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ EventNotifier
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask9">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ Executable
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask10">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ Historizing
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask11">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ InverseName
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask12">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ IsAbstract
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask13">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ MinimumSamplingInterval
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask14">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ NodeClass
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask15">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ NodeId
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask16">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ Symmetric
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask17">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ UserAccessLevel
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask18">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ UserExecutable
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask19">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ UserWriteMask
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask20">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ ValueRank
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask21">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ WriteMask
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">
|
|
|
+ <div class="form-check">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="mask22">
|
|
|
+ <label class="form-check-label" for="defaultCheck1">
|
|
|
+ ValueForVariableType
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">Executable</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <div class="input-group mb-3">
|
|
|
+ <input class="form-check-input" type="checkbox" value="" id="executablemethodcheck">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="accordion-item">
|
|
|
+ <h2 class="accordion-header" id="parentattributes">
|
|
|
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo3" aria-expanded="false" aria-controls="collapseTwo3">
|
|
|
+ Parent
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapseTwo3" class="accordion-collapse collapse" aria-labelledby="parentattributes" data-bs-parent=>
|
|
|
+ <div class="accordion-body">
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">Name</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <input type="email" class="form-control" id="inputEmail3">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">NodeId</label>
|
|
|
+ <div class="col-sm-10">
|
|
|
+ <div class="input-group mb-3">
|
|
|
+ <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Numeric</button>
|
|
|
+ <ul class="dropdown-menu">
|
|
|
+ <li><a class="dropdown-item" href="#">Numeric</a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">String</a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">Guid</a></li>
|
|
|
+ <li><a class="dropdown-item" href="#">Opaque</a></li>
|
|
|
+ </ul>
|
|
|
+ <input type="text" class="form-control" aria-label="Text input with dropdown button">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row mb-3">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label">Reference to current node</label>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <input type="email" class="form-control" id="inputEmail3">
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <label for="inputEmail3" class="col-sm-2 col-form-label text-center">Inverse</label>
|
|
|
+ </div>
|
|
|
+ <div class="col-sm-2">
|
|
|
+ <input type="email" class="form-control" id="inputEmail3">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="accordion-item">
|
|
|
+ <h2 class="accordion-header" id="referencesnodes">
|
|
|
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
|
|
+ Child Nodes and References
|
|
|
+ </button>
|
|
|
+ </h2>
|
|
|
+ <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="referencesnodes" data-bs-parent=>
|
|
|
+ <div class="accordion-body">
|
|
|
+ <table class="table">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th scope="col">Target</th>
|
|
|
+ <th scope="col">Reference Type</th>
|
|
|
+ <th scope="col">Modelling Rule</th>
|
|
|
+ <th scope="col">Actions</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td scope="row">Machines</td>
|
|
|
+ <td>Organizes</td>
|
|
|
+ <td>No Modelling Rule</td>
|
|
|
+ <td>
|
|
|
+ <button type="button" class="btn btn-outline-dark">Delete</button>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ <div class="container-fluid text-center">
|
|
|
+ <button type="button" class="btn btn-outline-dark" id="savenodespecification">Save</button>
|
|
|
+ <button type="button" class="btn btn-outline-dark">Discard</button>
|
|
|
+ <button type="button" class="btn btn-outline-dark">Delete Node</button>
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ <br>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Here you'll find a list of endpoints</div>
|
|
|
+ <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
|
|
|
+ <link rel="stylesheet" href="./jstree/jstree/dist/themes/default/style.min.css" />
|
|
|
+ <script src="./jstree/jstree/dist/jstree.min.js"></script>
|
|
|
+ <script>
|
|
|
+ document.querySelector('.custom-file-input').addEventListener('change', function (e) {
|
|
|
+ var name = document.getElementById("customFileInput").files[0].name;
|
|
|
+ $.ajax({
|
|
|
+ url: 'http://127.0.0.1:3001/file/url/',
|
|
|
+ error: function() {
|
|
|
+ console.log("Error");
|
|
|
+ },
|
|
|
+ dataType: 'text',
|
|
|
+ success: function(data) {
|
|
|
+ var res = JSON.parse(data);
|
|
|
+ console.log(res["url"]);
|
|
|
+ var newfile = "<li class='list-group-item py-1'>"+res["url"]+"</li>";
|
|
|
+ $('#nodesetlist').append(newfile);
|
|
|
+ },
|
|
|
+ type: 'GET'
|
|
|
+ });
|
|
|
+ console.log("AHA");
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ <script>
|
|
|
+ document.querySelector('.custom-file-select').addEventListener('change', function (e) {
|
|
|
+ var name = document.getElementById("projectselect").files[0].name;
|
|
|
+ console.log(name);
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+ <script src="./js/myEvents.js"></script>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ $('#jstree_demo_div').jstree({
|
|
|
+ 'core' : {
|
|
|
+ 'data' : {
|
|
|
+ 'url': "http://127.0.0.1:3001/lazy",
|
|
|
+ //'url' : "https://www.jstree.com/fiddle/?lazy",
|
|
|
+ 'data' : function (node) {
|
|
|
+ return { 'id' : node.id };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|
