index.html 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" href="style.css"
  8. <title></title>
  9. <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">
  10. </head>
  11. <body>
  12. <nav class="navbar navbar-expand-lg bg-info">
  13. <div class="container-fluid">
  14. <a href="#" class="navbar-brand">
  15. <h1>Frontend Modeler</h1>
  16. <p id="welcome">Welcome</p>
  17. </a>
  18. <img src="cdp_logo_sm.png" class="rounded float-end" alt="Responsive image">
  19. </div>
  20. </nav>
  21. <br>
  22. <div class="container">
  23. <div class="custom-file">
  24. <input type="file" class="custom-file-select" id="projectselect" aria-describedby="projectselect">
  25. <button type="button" id = "Open" class="btn btn btn-outline-primary">Open Project</button>
  26. </div>
  27. <div class="mb-3">
  28. <label for="exampleFormControlTextarea1" class="form-label">New Project Name</label>
  29. <textarea class="form-control" id="exampleFormControlTextarea1" rows="1"></textarea>
  30. </div>
  31. <button type="button" id="New" class="btn btn btn-outline-primary">New Project</button>
  32. <button type="button" id="SaveAs" class="btn btn btn-outline-primary">Save as</button>
  33. </div>
  34. <br>
  35. <div class="accordion" id="accordionnodeset">
  36. <div class="accordion-item">
  37. <h2 class="accordion-header" id="headingOne">
  38. <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapsenodesetOne" aria-expanded="true" aria-controls="collapseOne">
  39. Nodeset Files
  40. </button>
  41. </h2>
  42. <div id="collapsenodesetOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionnodeset">
  43. <div class="accordion-body">
  44. <div class="row align-items-start bg-light">
  45. <div class="mb-3">
  46. <!--<label for="formFileMultiple" class="form-label">Multiple files input example</label>-->
  47. <ul class="list-group" id="nodesetlist">
  48. <li class="list-group-item disabled py-1">0:http://opcfoundation.org/UA/</li>
  49. <li class="list-group-item py-1">A second item</li>
  50. </ul>
  51. <div class="custom-file">
  52. <input type="file" class="custom-file-input" id="customFileInput" aria-describedby="customFileInput">
  53. <button type="button" class="btn btn-primary" id="loadnodesetbutton">Load</button>
  54. </div>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="container-fluid">
  62. <ul class="nav nav-tabs" id="myTab" role="tablist">
  63. <li class="nav-item" role="presentation">
  64. <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>
  65. </li>
  66. <li class="nav-item" role="presentation">
  67. <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>
  68. </li>
  69. <li class="nav-item" role="presentation">
  70. <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>
  71. </li>
  72. <li class="nav-item" role="presentation">
  73. <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>
  74. </li>
  75. </ul>
  76. <div class="tab-content" id="myTabContent">
  77. <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
  78. <div class="container-fluid">
  79. <div class="row align-items-start bg-light">
  80. <div class="col-sm-6">
  81. <br>
  82. <div id="jstree_demo_div" class= "container bg-white">
  83. </div>
  84. <br>
  85. </div>
  86. <div class="col-sm-6">
  87. <br>
  88. <div class="row align-items-start bg-light">
  89. <div class="col-sm-2">
  90. <button type="button" class="btn btn-primary" id="changeinstance">Change Instance</button>
  91. </div>
  92. </div>
  93. <br>
  94. <div class="row align-items-start bg-light">
  95. <div class="col-sm-2">
  96. <button type="button" class="btn btn-secondary">Save</button>
  97. </div>
  98. <div class="col-sm-2">
  99. <button type="button" class="btn btn-secondary">Discard</button>
  100. </div>
  101. </div>
  102. <br>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0"><div class="accordion" id="accordionExample">
  108. <div class="accordion-item">
  109. <h2 class="accordion-header" id="commonattributes">
  110. <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
  111. Common attributes
  112. </button>
  113. </h2>
  114. <div id="collapseOne" class="accordion-collapse collapse collapse" aria-labelledby="commonattributes" data-bs-parent=>
  115. <div class="accordion-body">
  116. <div class="row mb-3">
  117. <label for="instancename" class="col-sm-2 col-form-label">Name</label>
  118. <div class="col-sm-10">
  119. <input type="email" class="form-control" id="instancename">
  120. </div>
  121. </div>
  122. <div class="row mb-3">
  123. <label for="inputEmail3" class="col-sm-2 col-form-label">Namespace</label>
  124. <div class="col-sm-10">
  125. <input type="email" class="form-control" id="instancenamespace">
  126. </div>
  127. </div>
  128. <div class="row mb-3">
  129. <label for="inputEmail3" class="col-sm-2 col-form-label">NodeClass</label>
  130. <div class="col-sm-10">
  131. <input type="nodeclass" class="form-control" id="instancenodeclass">
  132. </div>
  133. </div>
  134. <div class="row mb-3">
  135. <label for="inputEmail3" class="col-sm-2 col-form-label">Type Definition</label>
  136. <div class="col-sm-10">
  137. <input type="typedefinition" class="form-control" id="instancetypedefinition">
  138. </div>
  139. </div>
  140. <div class="row mb-3">
  141. <label for="modellingrule" class="col-sm-2 col-form-label">Modelling Rule</label>
  142. <div class="col-sm-10">
  143. <input type="email" class="form-control" id="modellingrule">
  144. </div>
  145. </div>
  146. <div class="row mb-3">
  147. <label for="inputEmail3" class="col-sm-2 col-form-label">NodeId</label>
  148. <div class="col-sm-10">
  149. <div class="input-group mb-3">
  150. <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="instancenodeidtype">Numeric</button>
  151. <ul class="dropdown-menu">
  152. <li><a class="dropdown-item" href="#" id="numericnodeid">Numeric</a></li>
  153. <li><a class="dropdown-item" href="#" id="stringnodeid">String</a></li>
  154. <li><a class="dropdown-item" href="#" id="guidnodeid">Guid</a></li>
  155. <li><a class="dropdown-item" href="#" id="opaquenodeid">Opaque</a></li>
  156. </ul>
  157. <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instancenodeid">
  158. </div>
  159. </div>
  160. </div>
  161. <div class="row mb-3">
  162. <label for="inputEmail3" class="col-sm-2 col-form-label">DisplayName</label>
  163. <div class="col-sm-10">
  164. <div class="input-group">
  165. <div class="col-xs-1">
  166. <input type="text" aria-label="First name" class="form-control" id="instancedisplayname1">
  167. </div>
  168. <input type="text" aria-label="Last name" class="form-control" id="instancedisplayname2">
  169. </div>
  170. </div>
  171. </div>
  172. <div class="row mb-3">
  173. <label for="inputEmail3" class="col-sm-2 col-form-label">BrowseName</label>
  174. <div class="col-sm-10">
  175. <div class="input-group mb-3">
  176. <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="instancebrowsename1">0</button>
  177. <ul class="dropdown-menu" id="namespaceidxbrowsename" size="5">
  178. <li><a class="dropdown-item" href="#">1</a></li>
  179. <li><a class="dropdown-item" href="#">2</a></li>
  180. <li><a class="dropdown-item" href="#">3</a></li>
  181. <li><a class="dropdown-item" href="#">4</a></li>
  182. </ul>
  183. <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instancebrowsename2">
  184. </div>
  185. </div>
  186. </div>
  187. <div class="row mb-3">
  188. <label for="inputEmail3" class="col-sm-2 col-form-label">Description</label>
  189. <div class="col-sm-10">
  190. <div class="input-group">
  191. <div class="col-xs-1">
  192. <input type="text" aria-label="First name" class="form-control" placeholder="en" disabled>
  193. </div>
  194. <input type="text" aria-label="Last name" class="form-control" id="instancedescription">
  195. </div>
  196. </div>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201. <div class="accordion-item">
  202. <h2 class="accordion-header" id="objectattributes">
  203. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" id="objectattributesbutton">
  204. Object attributes
  205. </button>
  206. </h2>
  207. <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="objectattributes" data-bs-parent=>
  208. <div class="accordion-body">
  209. <div class="row mb-3">
  210. <label for="exampleFormControlInput6" class="col-sm-2 col-form-label">EventNotifier</label>
  211. <div class="col-sm-10">
  212. <div class="input-group mb-3">
  213. <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instanceeventnotifier" placeholder="0 (None)">
  214. <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">...</button>
  215. <ul class="dropdown-menu dropdown-menu-end">
  216. <li><a class="dropdown-item" href="#">
  217. <div class="form-check">
  218. <input class="form-check-input" type="checkbox" value="" id="subscribeevents">
  219. <label class="form-check-label" for="defaultCheck1">
  220. Subscribe To Events
  221. </label>
  222. </div>
  223. </a></li>
  224. <li><a class="dropdown-item" href="#">
  225. <div class="form-check">
  226. <input class="form-check-input" type="checkbox" value="" id="reserved" disabled>
  227. <label class="form-check-label" for="defaultCheck1">
  228. Reserved
  229. </label>
  230. </div>
  231. </a></li>
  232. <li><a class="dropdown-item" href="#">
  233. <div class="form-check">
  234. <input class="form-check-input" type="checkbox" value="" id="historyread">
  235. <label class="form-check-label" for="defaultCheck1">
  236. HistoryRead
  237. </label>
  238. </div>
  239. </a></li>
  240. <li><a class="dropdown-item" href="#">
  241. <div class="form-check">
  242. <input class="form-check-input" type="checkbox" value="" id="historywrite">
  243. <label class="form-check-label" for="defaultCheck1">
  244. HistoryWrite
  245. </label>
  246. </div>
  247. </a></li>
  248. </ul>
  249. </div>
  250. </div>
  251. </div>
  252. </div>
  253. </div>
  254. </div>
  255. <div class="accordion-item" id="var_attr">
  256. <h2 class="accordion-header" id="variableattributes">
  257. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1" id="variableattributesbutton">
  258. Variable attributes
  259. </button>
  260. </h2>
  261. <div id="collapseTwo1" class="accordion-collapse collapse" aria-labelledby="variableattributes" data-bs-parent=>
  262. <div class="accordion-body">
  263. <div class="row mb-3">
  264. <label for="inputEmail3" class="col-sm-2 col-form-label">Data Type</label>
  265. <div class="col-sm-10">
  266. <input type="email" class="form-control" id="datatype" placeholder="BaseDataType">
  267. </div>
  268. </div>
  269. <div class="row mb-3">
  270. <label for="inputEmail3" class="col-sm-2 col-form-label">Value</label>
  271. <div class="col-sm-2">
  272. <label for="inputEmail3" id="variablevalue" class="col-form-label">Null</label>
  273. <div class="col-sm-2">
  274. <input class="form-check-input" type="checkbox" value="" id="valuecheck">
  275. </div>
  276. <input type="email" class="form-control" id="inputEmail3" placeholder="...">
  277. </div>
  278. </div>
  279. <div class="row mb-3">
  280. <label for="inputEmail3" class="col-sm-2 col-form-label">ValueRank</label>
  281. <div class="col-sm-10">
  282. <input type="email" class="form-control" id="variablevaluerank" placeholder="Scalar">
  283. </div>
  284. </div>
  285. <div class="row mb-3">
  286. <label for="inputEmail3" class="col-sm-2 col-form-label">ArrayDimensions</label>
  287. <div class="col-sm-10">
  288. <input type="email" class="form-control" id="variablearraydimensions">
  289. </div>
  290. </div>
  291. <div class="row mb-3">
  292. <label for="exampleFormControlInput6" class="col-sm-2 col-form-label">AccessLevel</label>
  293. <div class="col-sm-10">
  294. <div class="input-group mb-3">
  295. <input type="text" class="form-control" aria-label="Text input with dropdown button" id="instanceaccesslevel" placeholder="0 (None)">
  296. <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">...</button>
  297. <ul class="dropdown-menu dropdown-menu-end">
  298. <li><a class="dropdown-item" href="#">
  299. <div class="form-check">
  300. <input class="form-check-input" type="checkbox" value="" id="currentread">
  301. <label class="form-check-label" for="defaultCheck1">
  302. CurrentRead
  303. </label>
  304. </div>
  305. </a></li>
  306. <li><a class="dropdown-item" href="#">
  307. <div class="form-check">
  308. <input class="form-check-input" type="checkbox" value="" id="currentwrite">
  309. <label class="form-check-label" for="defaultCheck1">
  310. CurrentWrite
  311. </label>
  312. </div>
  313. </a></li>
  314. <li><a class="dropdown-item" href="#">
  315. <div class="form-check">
  316. <input class="form-check-input" type="checkbox" value="" id="historyreadvar">
  317. <label class="form-check-label" for="defaultCheck1">
  318. HistoryRead
  319. </label>
  320. </div>
  321. </a></li>
  322. <li><a class="dropdown-item" href="#">
  323. <div class="form-check">
  324. <input class="form-check-input" type="checkbox" value="" id="historywritevar">
  325. <label class="form-check-label" for="defaultCheck1">
  326. HistoryWrite
  327. </label>
  328. </div>
  329. </a></li>
  330. <li><a class="dropdown-item" href="#">
  331. <div class="form-check">
  332. <input class="form-check-input" type="checkbox" value="" id="semanticchange">
  333. <label class="form-check-label" for="defaultCheck1">
  334. SemanticChange
  335. </label>
  336. </div>
  337. </a></li>
  338. <li><a class="dropdown-item" href="#">
  339. <div class="form-check">
  340. <input class="form-check-input" type="checkbox" value="" id="statuswrite">
  341. <label class="form-check-label" for="defaultCheck1">
  342. StatusWrite
  343. </label>
  344. </div>
  345. </a></li>
  346. <li><a class="dropdown-item" href="#">
  347. <div class="form-check">
  348. <input class="form-check-input" type="checkbox" value="" id="timestampwrite">
  349. <label class="form-check-label" for="defaultCheck1">
  350. TimestampWrite
  351. </label>
  352. </div>
  353. </a></li>
  354. </ul>
  355. </div>
  356. </div>
  357. </div>
  358. <div class="row mb-3">
  359. <label for="inputEmail3" class="col-sm-2 col-form-label">AccessLevelEx</label>
  360. <div class="col-sm-10">
  361. <input type="email" class="form-control" id="accesslevelex" placeholder="None">
  362. </div>
  363. </div>
  364. <div class="row mb-3">
  365. <label for="inputEmail3" class="col-sm-2 col-form-label">Historizing</label>
  366. <div class="col-sm-10">
  367. <input type="email" class="form-control" id="variablehistorizing">
  368. </div>
  369. </div>
  370. <div class="row mb-3">
  371. <label for="inputEmail3" class="col-sm-2 col-form-label">MinimumSamplingInterval</label>
  372. <div class="col-sm-10">
  373. <input type="email" class="form-control" id="minimumsamplinginterval" placeholder="0">
  374. </div>
  375. </div>
  376. </div>
  377. </div>
  378. </div>
  379. <div class="accordion-item">
  380. <h2 class="accordion-header" id="methodattributes">
  381. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2" id="methodattributesbutton">
  382. Method attributes
  383. </button>
  384. </h2>
  385. <div id="collapseTwo2" class="accordion-collapse collapse" aria-labelledby="methodattributes" data-bs-parent=>
  386. <div class="accordion-body">
  387. <div class="row mb-3">
  388. <label for="exampleFormControlInput6" class="col-sm-2 col-form-label">WriteMask</label>
  389. <div class="col-sm-10">
  390. <div class="input-group mb-3">
  391. <input type="text" class="form-control" aria-label="Text input with dropdown button" id="writemask" placeholder="0">
  392. <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">...</button>
  393. <ul class="dropdown-menu dropdown-menu-end">
  394. <li><a class="dropdown-item" href="#">
  395. <div class="form-check">
  396. <input class="form-check-input" type="checkbox" value="" id="mask1">
  397. <label class="form-check-label" for="defaultCheck1">
  398. AccessLevel
  399. </label>
  400. </div>
  401. </a></li>
  402. <li><a class="dropdown-item" href="#">
  403. <div class="form-check">
  404. <input class="form-check-input" type="checkbox" value="" id="mask2">
  405. <label class="form-check-label" for="defaultCheck1">
  406. ArrayDimensions
  407. </label>
  408. </div>
  409. </a></li>
  410. <li><a class="dropdown-item" href="#">
  411. <div class="form-check">
  412. <input class="form-check-input" type="checkbox" value="" id="mask3">
  413. <label class="form-check-label" for="defaultCheck1">
  414. BrowseName
  415. </label>
  416. </div>
  417. </a></li>
  418. <li><a class="dropdown-item" href="#">
  419. <div class="form-check">
  420. <input class="form-check-input" type="checkbox" value="" id="mask4">
  421. <label class="form-check-label" for="defaultCheck1">
  422. ContainsNoLoops
  423. </label>
  424. </div>
  425. </a></li>
  426. <li><a class="dropdown-item" href="#">
  427. <div class="form-check">
  428. <input class="form-check-input" type="checkbox" value="" id="mask5">
  429. <label class="form-check-label" for="defaultCheck1">
  430. DataType
  431. </label>
  432. </div>
  433. </a></li>
  434. <li><a class="dropdown-item" href="#">
  435. <div class="form-check">
  436. <input class="form-check-input" type="checkbox" value="" id="mask6">
  437. <label class="form-check-label" for="defaultCheck1">
  438. Description
  439. </label>
  440. </div>
  441. </a></li>
  442. <li><a class="dropdown-item" href="#">
  443. <div class="form-check">
  444. <input class="form-check-input" type="checkbox" value="" id="mask7">
  445. <label class="form-check-label" for="defaultCheck1">
  446. DisplayName
  447. </label>
  448. </div>
  449. </a></li>
  450. <li><a class="dropdown-item" href="#">
  451. <div class="form-check">
  452. <input class="form-check-input" type="checkbox" value="" id="mask8">
  453. <label class="form-check-label" for="defaultCheck1">
  454. EventNotifier
  455. </label>
  456. </div>
  457. </a></li>
  458. <li><a class="dropdown-item" href="#">
  459. <div class="form-check">
  460. <input class="form-check-input" type="checkbox" value="" id="mask9">
  461. <label class="form-check-label" for="defaultCheck1">
  462. Executable
  463. </label>
  464. </div>
  465. </a></li>
  466. <li><a class="dropdown-item" href="#">
  467. <div class="form-check">
  468. <input class="form-check-input" type="checkbox" value="" id="mask10">
  469. <label class="form-check-label" for="defaultCheck1">
  470. Historizing
  471. </label>
  472. </div>
  473. </a></li>
  474. <li><a class="dropdown-item" href="#">
  475. <div class="form-check">
  476. <input class="form-check-input" type="checkbox" value="" id="mask11">
  477. <label class="form-check-label" for="defaultCheck1">
  478. InverseName
  479. </label>
  480. </div>
  481. </a></li>
  482. <li><a class="dropdown-item" href="#">
  483. <div class="form-check">
  484. <input class="form-check-input" type="checkbox" value="" id="mask12">
  485. <label class="form-check-label" for="defaultCheck1">
  486. IsAbstract
  487. </label>
  488. </div>
  489. </a></li>
  490. <li><a class="dropdown-item" href="#">
  491. <div class="form-check">
  492. <input class="form-check-input" type="checkbox" value="" id="mask13">
  493. <label class="form-check-label" for="defaultCheck1">
  494. MinimumSamplingInterval
  495. </label>
  496. </div>
  497. </a></li>
  498. <li><a class="dropdown-item" href="#">
  499. <div class="form-check">
  500. <input class="form-check-input" type="checkbox" value="" id="mask14">
  501. <label class="form-check-label" for="defaultCheck1">
  502. NodeClass
  503. </label>
  504. </div>
  505. </a></li>
  506. <li><a class="dropdown-item" href="#">
  507. <div class="form-check">
  508. <input class="form-check-input" type="checkbox" value="" id="mask15">
  509. <label class="form-check-label" for="defaultCheck1">
  510. NodeId
  511. </label>
  512. </div>
  513. </a></li>
  514. <li><a class="dropdown-item" href="#">
  515. <div class="form-check">
  516. <input class="form-check-input" type="checkbox" value="" id="mask16">
  517. <label class="form-check-label" for="defaultCheck1">
  518. Symmetric
  519. </label>
  520. </div>
  521. </a></li>
  522. <li><a class="dropdown-item" href="#">
  523. <div class="form-check">
  524. <input class="form-check-input" type="checkbox" value="" id="mask17">
  525. <label class="form-check-label" for="defaultCheck1">
  526. UserAccessLevel
  527. </label>
  528. </div>
  529. </a></li>
  530. <li><a class="dropdown-item" href="#">
  531. <div class="form-check">
  532. <input class="form-check-input" type="checkbox" value="" id="mask18">
  533. <label class="form-check-label" for="defaultCheck1">
  534. UserExecutable
  535. </label>
  536. </div>
  537. </a></li>
  538. <li><a class="dropdown-item" href="#">
  539. <div class="form-check">
  540. <input class="form-check-input" type="checkbox" value="" id="mask19">
  541. <label class="form-check-label" for="defaultCheck1">
  542. UserWriteMask
  543. </label>
  544. </div>
  545. </a></li>
  546. <li><a class="dropdown-item" href="#">
  547. <div class="form-check">
  548. <input class="form-check-input" type="checkbox" value="" id="mask20">
  549. <label class="form-check-label" for="defaultCheck1">
  550. ValueRank
  551. </label>
  552. </div>
  553. </a></li>
  554. <li><a class="dropdown-item" href="#">
  555. <div class="form-check">
  556. <input class="form-check-input" type="checkbox" value="" id="mask21">
  557. <label class="form-check-label" for="defaultCheck1">
  558. WriteMask
  559. </label>
  560. </div>
  561. </a></li>
  562. <li><a class="dropdown-item" href="#">
  563. <div class="form-check">
  564. <input class="form-check-input" type="checkbox" value="" id="mask22">
  565. <label class="form-check-label" for="defaultCheck1">
  566. ValueForVariableType
  567. </label>
  568. </div>
  569. </a></li>
  570. </ul>
  571. </div>
  572. </div>
  573. </div>
  574. <div class="row mb-3">
  575. <label for="inputEmail3" class="col-sm-2 col-form-label">Executable</label>
  576. <div class="col-sm-10">
  577. <div class="input-group mb-3">
  578. <input class="form-check-input" type="checkbox" id="executablemethodcheck">
  579. </div>
  580. </div>
  581. </div>
  582. </div>
  583. </div>
  584. </div>
  585. <div class="accordion-item">
  586. <h2 class="accordion-header" id="parentattributes">
  587. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo3" aria-expanded="false" aria-controls="collapseTwo3">
  588. Parent
  589. </button>
  590. </h2>
  591. <div id="collapseTwo3" class="accordion-collapse collapse" aria-labelledby="parentattributes" data-bs-parent=>
  592. <div class="accordion-body">
  593. <div class="row mb-3">
  594. <label for="inputEmail3" class="col-sm-2 col-form-label">Name</label>
  595. <div class="col-sm-10">
  596. <input type="email" class="form-control" id="inputEmail3">
  597. </div>
  598. </div>
  599. <div class="row mb-3">
  600. <label for="inputEmail3" class="col-sm-2 col-form-label">NodeId</label>
  601. <div class="col-sm-10">
  602. <div class="input-group mb-3">
  603. <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Numeric</button>
  604. <ul class="dropdown-menu">
  605. <li><a class="dropdown-item" href="#">Numeric</a></li>
  606. <li><a class="dropdown-item" href="#">String</a></li>
  607. <li><a class="dropdown-item" href="#">Guid</a></li>
  608. <li><a class="dropdown-item" href="#">Opaque</a></li>
  609. </ul>
  610. <input type="text" class="form-control" aria-label="Text input with dropdown button">
  611. </div>
  612. </div>
  613. </div>
  614. <div class="row mb-3">
  615. <label for="inputEmail3" class="col-sm-2 col-form-label">Reference to current node</label>
  616. <div class="col-sm-2">
  617. <input type="email" class="form-control" id="inputEmail3">
  618. </div>
  619. <div class="col-sm-2">
  620. <label for="inputEmail3" class="col-sm-2 col-form-label text-center">Inverse</label>
  621. </div>
  622. <div class="col-sm-2">
  623. <input type="email" class="form-control" id="inputEmail3">
  624. </div>
  625. </div>
  626. </div>
  627. </div>
  628. </div>
  629. <div class="accordion-item">
  630. <h2 class="accordion-header" id="referencesnodes">
  631. <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
  632. Child Nodes and References
  633. </button>
  634. </h2>
  635. <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="referencesnodes" data-bs-parent=>
  636. <div class="accordion-body">
  637. <table class="table">
  638. <thead>
  639. <tr>
  640. <th scope="col">Target</th>
  641. <th scope="col">Reference Type</th>
  642. <th scope="col">Modelling Rule</th>
  643. <th scope="col">Actions</th>
  644. </tr>
  645. </thead>
  646. <tbody>
  647. <tr>
  648. <td scope="row">Machines</td>
  649. <td>Organizes</td>
  650. <td>No Modelling Rule</td>
  651. <td>
  652. <button type="button" class="btn btn-outline-dark">Delete</button>
  653. </td>
  654. </tr>
  655. </tbody>
  656. </table>
  657. </div>
  658. </div>
  659. </div>
  660. </div>
  661. <br>
  662. <div class="container-fluid text-center">
  663. <button type="button" class="btn btn-outline-dark" id="savenodespecification">Save</button>
  664. <button type="button" class="btn btn-outline-dark">Discard</button>
  665. <button type="button" class="btn btn-outline-dark">Delete Node</button>
  666. </div>
  667. <br>
  668. <br>
  669. </div>
  670. <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>
  671. <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
  672. </div>
  673. </div>
  674. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  675. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  676. <link rel="stylesheet" href="./jstree/jstree/dist/themes/default/style.min.css" />
  677. <script src="./jstree/jstree/dist/jstree.min.js"></script>
  678. <script>
  679. document.querySelector('.custom-file-input').addEventListener('change', function (e) {
  680. var name = document.getElementById("customFileInput").files[0].name;
  681. $.ajax({
  682. url: 'http://127.0.0.1:3001/file/url/',
  683. error: function() {
  684. console.log("Error");
  685. },
  686. dataType: 'text',
  687. success: function(data) {
  688. var res = JSON.parse(data);
  689. console.log(res["url"]);
  690. var newfile = "<li class='list-group-item py-1'>"+res["url"]+"</li>";
  691. $('#nodesetlist').append(newfile);
  692. },
  693. type: 'GET'
  694. });
  695. console.log("AHA");
  696. })
  697. </script>
  698. <script>
  699. document.querySelector('.custom-file-select').addEventListener('change', function (e) {
  700. var name = document.getElementById("projectselect").files[0].name;
  701. console.log(name);
  702. })
  703. </script>
  704. <script src="./js/myEvents.js"></script>
  705. <script>
  706. $('#jstree_demo_div').jstree({
  707. 'core' : {
  708. 'data' : {
  709. 'url': "http://127.0.0.1:3001/lazy",
  710. //'url' : "https://www.jstree.com/fiddle/?lazy",
  711. 'data' : function (node) {
  712. if(node.id == '#'){
  713. return { 'id' : node.id, 'nsindex': 0, 'nodeclass':'Object', 'type':'Object'};
  714. }else{
  715. return { 'id' : node.id, 'nsindex': node.data.nsindex, 'nodeclass':node.data.nodeclass, 'type':node.data.nodeclass};
  716. }
  717. }
  718. }
  719. },
  720. 'contextmenu' : {
  721. 'items' : {
  722. addNode: {
  723. label: 'Add node',
  724. action: function (node) {
  725. var txt = node.reference.prevObject.selector;
  726. console.log(txt);
  727. $.ajax({
  728. url: 'http://127.0.0.1:3001/add',
  729. type: 'GET',
  730. data: {nodeid: txt},
  731. error: function() {
  732. console.log("Error");
  733. },
  734. success: function(data) {
  735. console.log('success add');
  736. },
  737. type: 'GET'
  738. });
  739. }
  740. },
  741. delNode: {
  742. label: 'Delete node',
  743. action: function (node) {
  744. var txt = node.reference.prevObject.selector;
  745. console.log(txt);
  746. $.ajax({
  747. url: 'http://127.0.0.1:3001/del',
  748. type: 'GET',
  749. data: {nodeid: txt},
  750. error: function() {
  751. console.log("Error");
  752. },
  753. success: function(data) {
  754. console.log('success del');
  755. },
  756. type: 'GET'
  757. });
  758. }
  759. }
  760. },
  761. },
  762. 'plugins' : [ 'contextmenu', 'types'],
  763. 'types': {
  764. 'Variable': {
  765. 'icon': 'variable_instances.png'
  766. },
  767. 'VariableType': {
  768. 'icon': 'variable_types.png'
  769. },
  770. 'DataType': {
  771. 'icon': 'data_types.png'
  772. },
  773. 'ReferenceType': {
  774. 'icon': 'reference_types.png'
  775. },
  776. 'Method': {
  777. 'icon': 'method.png'
  778. },
  779. 'ObjectType': {
  780. 'icon': 'obj_types.png'
  781. },
  782. 'Object': {
  783. 'icon': 'obj_inst.png'
  784. },
  785. 'default': {
  786. 'icon': 'obj_inst.png'
  787. }
  788. },
  789. });
  790. </script>
  791. <script>
  792. window.onload = function () {
  793. var url = document.location.href,
  794. params = url.split('?')[1].split('&'),
  795. data = {}, tmp;
  796. for (var i = 0, l = params.length; i < l; i++) {
  797. tmp = params[i].split('=');
  798. data[tmp[0]] = tmp[1];
  799. }
  800. document.getElementById("welcome").innerHTML = "Welcome "+data.name;
  801. }
  802. </script>
  803. </body>
  804. </html>