widgets.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765
  1. // Copyright (c) 2018 Nikolai Suslov
  2. // Krestianstvo.org MIT license (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
  3. /*
  4. * Cell widgets
  5. */
  6. class Widgets {
  7. constructor() {
  8. console.log("widget constructor")
  9. }
  10. get divider(){
  11. return {
  12. $cell: true,
  13. $type: "hr",
  14. class: "mdc-list-divider",
  15. }
  16. }
  17. inputTextFieldOutlined(obj){
  18. function initFunc() {
  19. new mdc.textField.MDCTextField.attachTo(this);
  20. }
  21. let inputType = obj.type ? obj.type: 'text';
  22. let init = obj.init ? obj.init: initFunc;
  23. let style = obj.style ? obj.style: "";
  24. return {
  25. $cell: true,
  26. $type: "div",
  27. class: "mdc-text-field mdc-text-field--outlined mdc-text-field--dense",
  28. style: style,
  29. $init: init,
  30. $components:[
  31. {
  32. $type: "input",
  33. type: inputType,
  34. id: obj.id,
  35. class: "mdc-text-field__input",
  36. value: obj.value,
  37. onchange: obj.change
  38. },
  39. {
  40. $type: "label",
  41. class: "mdc-floating-label",
  42. for: obj.id,
  43. $text: obj.label
  44. },
  45. {
  46. $type: "div",
  47. class: "mdc-notched-outline",
  48. $components:[
  49. {
  50. $type: "svg",
  51. $components:[
  52. {
  53. $type: "path",
  54. class: "mdc-notched-outline__path"
  55. }
  56. ]
  57. }
  58. ]
  59. },
  60. {
  61. $type: "div",
  62. class: "mdc-notched-outline__idle"
  63. }
  64. ]
  65. //onclick: obj.onclick
  66. }
  67. }
  68. inputTextFieldStandart(obj){
  69. return {
  70. $cell: true,
  71. $type: "div",
  72. class: "mdc-text-field text-field mdc-ripple-upgraded",
  73. $init: function(){
  74. //new mdc.mdc.notchedOutline.MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));
  75. new mdc.textField.MDCTextField.attachTo(this);
  76. },
  77. $components:[
  78. {
  79. $type: "input",
  80. type: "text",
  81. id: obj.id,
  82. class: "mdc-text-field__input",
  83. value: obj.value,
  84. onchange: obj.change
  85. },
  86. {
  87. $type: "label",
  88. class: "mdc-floating-label",
  89. for: obj.id,
  90. $text: obj.label
  91. },
  92. {
  93. $type: "div",
  94. class: "mdc-line-ripple"
  95. }
  96. ]
  97. //onclick: obj.onclick
  98. }
  99. }
  100. headerH3(headertype, label, cssclass) {
  101. return {
  102. $cell: true,
  103. $type: headertype,
  104. class: cssclass,
  105. $text: label
  106. }
  107. }
  108. simpleCard(obj){
  109. let style = 'background-image: url(' + obj.imgSrc + '); background-size: cover; background-repeat: no-repeat; height:' + obj.imgHeight + ';';
  110. var addonClass = obj.addonClass;
  111. if (!addonClass){
  112. addonClass = ''
  113. }
  114. return {
  115. $cell: true,
  116. $type: "div",
  117. $components:[
  118. {
  119. $cell: true,
  120. $type: "div",
  121. class: "mdc-card" +' '+ addonClass,
  122. onclick: obj.onclickfunc,
  123. $components:[
  124. {
  125. $cell: true,
  126. $type: "section",
  127. class: "mdc-card__media",
  128. style: style
  129. },
  130. {
  131. $cell: true,
  132. $type: "section",
  133. class: "mdc-card__supporting-text",
  134. $text: obj.text
  135. }
  136. ]
  137. }
  138. ]
  139. }
  140. }
  141. listDivider() {
  142. return {
  143. $cell: true,
  144. $type: "hr",
  145. class: "mdc-list-divider mdc-list-divider--inset"
  146. }
  147. }
  148. createListItem(obj) {
  149. return {
  150. $cell: true,
  151. $type: "li",
  152. class: "mdc-list-item",
  153. $components: [
  154. {
  155. $cell: true,
  156. $type: "span",
  157. class: "mdc-list-item__graphic",
  158. $components: [
  159. {
  160. $cell: true,
  161. class: "createItems",
  162. $type: "img",
  163. src: obj.imgSrc,
  164. onclick: obj.onclickfunc
  165. }
  166. ]
  167. },
  168. {
  169. $cell: true,
  170. $type: "span",
  171. class: "mdc-list-item__text",
  172. $text: obj.title
  173. // $components: [
  174. // {
  175. // $text: obj.title
  176. // },
  177. // {
  178. // $cell: true,
  179. // $type: "span",
  180. // class: "mdc-list-item__secondary-text",
  181. // $text: obj.subTitle
  182. // }
  183. // ]
  184. }
  185. ]
  186. }
  187. }
  188. createCard(obj){
  189. return {
  190. $cell: true,
  191. $type: "div",
  192. $components:[
  193. {
  194. $cell: true,
  195. $type: "div",
  196. class: "mdc-card",
  197. $components:[
  198. {
  199. $cell: true,
  200. $type: "div",
  201. class: "mdc-card__horizontal-block",
  202. $components:[
  203. {
  204. $cell: true,
  205. $type: "section",
  206. class: "mdc-card__primary",
  207. $components:[
  208. {
  209. $cell: true,
  210. $type: "h1",
  211. class: "mdc-card__title mdc-card__title--large",
  212. $text: obj.title
  213. },
  214. {
  215. $cell: true,
  216. $type: "h2",
  217. class: "mdc-card__subtitle",
  218. $text: obj.subTitle
  219. }
  220. ]
  221. },
  222. {
  223. $cell: true,
  224. $type: "img",
  225. class: "",
  226. src: obj.imgSrc
  227. }
  228. ]
  229. },
  230. {
  231. $cell: true,
  232. $type: "section",
  233. class: "mdc-card__actions",
  234. $components:[
  235. {
  236. $cell: true,
  237. $type: "button",
  238. class: "mdc-button mdc-button--compact mdc-card__action",
  239. $text: obj.actionLabel
  240. }
  241. ]
  242. }
  243. ]
  244. }
  245. ]
  246. }
  247. }
  248. buttonStroked(obj){
  249. return {
  250. $cell: true,
  251. $type: "button",
  252. class: "mdc-button mdc-button--outlined",
  253. $text: obj.label,
  254. onclick: obj.onclick
  255. }
  256. }
  257. buttonRaised(obj){
  258. return {
  259. $cell: true,
  260. $type: "button",
  261. class: "mdc-button mdc-button--raised mdc-ripple-upgraded",
  262. $text: obj.label,
  263. onclick: obj.onclick
  264. }
  265. }
  266. buttonSimple(obj){
  267. return {
  268. $cell: true,
  269. $type: "button",
  270. class: "mdc-button",
  271. $text: obj.label,
  272. onclick: obj.onclick
  273. }
  274. }
  275. sliderDiscrete(obj) {
  276. return {
  277. $cell: true,
  278. $type: "div",
  279. class: "mdc-slider mdc-slider--discrete",
  280. role: "slider",
  281. 'aria-valuemin': obj.min,
  282. 'aria-valuemax': obj.max,
  283. 'aria-label': obj.label,
  284. $init: obj.init,
  285. $components: [
  286. {
  287. $cell: true,
  288. $type: "div",
  289. class: "mdc-slider__track-container",
  290. $components: [
  291. {
  292. $cell: true,
  293. $type: "div",
  294. class: "mdc-slider__track",
  295. }
  296. ]
  297. },
  298. {
  299. $cell: true,
  300. $type: "div",
  301. class: "mdc-slider__thumb-container",
  302. $components: [
  303. {
  304. $cell: true,
  305. $type: "div",
  306. class: "mdc-slider__pin",
  307. $components: [
  308. {
  309. $cell: true,
  310. $type: "span",
  311. class: "mdc-slider__pin-value-marker",
  312. }
  313. ]
  314. },
  315. {
  316. $cell: true,
  317. $type: "svg",
  318. class: "mdc-slider__thumb",
  319. width: 21,
  320. height: 21,
  321. $components: [
  322. {
  323. $cell: true,
  324. $type: "circle",
  325. cx: 10.5,
  326. cy: 10.5,
  327. r: 7.875
  328. }
  329. ]
  330. },
  331. {
  332. $cell: true,
  333. $type: "div",
  334. class: "mdc-slider__focus-ring"
  335. }
  336. ]
  337. }
  338. ]
  339. }
  340. }
  341. sliderContinuous(obj) {
  342. return {
  343. $cell: true,
  344. $type: "div",
  345. class: "mdc-slider",
  346. role: "slider",
  347. tabindex: 0,
  348. 'id': obj.id,
  349. 'aria-valuemin': obj.min,
  350. 'aria-valuemax': obj.max,
  351. 'aria-label': obj.label,
  352. 'aria-valuenow': obj.value,
  353. 'data-step': obj.step,
  354. $init: obj.init,
  355. $components: [
  356. {
  357. $cell: true,
  358. $type: "div",
  359. class: "mdc-slider__track-container",
  360. $components: [
  361. {
  362. $cell: true,
  363. $type: "div",
  364. class: "mdc-slider__track",
  365. }
  366. ]
  367. },
  368. {
  369. $cell: true,
  370. $type: "div",
  371. class: "mdc-slider__thumb-container",
  372. $components: [
  373. {
  374. $cell: true,
  375. $type: "svg",
  376. class: "mdc-slider__thumb",
  377. width: 21,
  378. height: 21,
  379. $components: [
  380. {
  381. $cell: true,
  382. $type: "circle",
  383. cx: 10.5,
  384. cy: 10.5,
  385. r: 7.875
  386. }
  387. ]
  388. },
  389. {
  390. $cell: true,
  391. $type: "div",
  392. class: "mdc-slider__focus-ring"
  393. }
  394. ]
  395. }
  396. ]
  397. }
  398. }
  399. textField(obj) {
  400. return {
  401. class: "mdc-text-field",
  402. style: "width: 100%",
  403. $cell: true,
  404. $type: "div",
  405. $components: [
  406. {
  407. class: "mdc-text-field__input prop-text-field-input",
  408. id: obj.id,
  409. $cell: true,
  410. $type: "input",
  411. type: "text",
  412. value: obj.value,
  413. onchange: obj.funconchange
  414. }
  415. ]
  416. }
  417. }
  418. icontoggle(obj) {
  419. var addClass = "";
  420. if (obj.styleClass){
  421. addClass = obj.styleClass;
  422. }
  423. return {
  424. $type: "i",
  425. class: addClass + " mdc-icon-toggle material-icons",
  426. role: "button",
  427. $text: obj.label,
  428. id: obj.id,
  429. 'data-toggle-on': obj.on,
  430. 'data-toggle-off': obj.off,
  431. 'aria-pressed': obj.state,
  432. 'aria-hidden': true,
  433. $init: obj.init
  434. }
  435. }
  436. floatActionButton(obj) {
  437. var addClass = "";
  438. if (obj.styleClass){
  439. addClass = obj.styleClass;
  440. }
  441. return {
  442. $cell: true,
  443. $type: "button",
  444. class: "mdc-fab material-icons " + addClass,
  445. onclick: obj.onclickfunc,
  446. $components:[
  447. {
  448. $cell: true,
  449. $type: "span",
  450. class: "mdc-fab__icon",
  451. $text: obj.label
  452. }
  453. ]
  454. }
  455. }
  456. iconButton(obj) {
  457. var addClass = "";
  458. if (obj.styleClass){
  459. addClass = obj.styleClass;
  460. }
  461. return {
  462. $cell: true,
  463. $type: "button",
  464. class: "mdc-button" + addClass,
  465. onclick: obj.onclickfunc,
  466. $components:[
  467. {
  468. $cell: true,
  469. $type: "i",
  470. class: "material-icons mdc-button__icon",
  471. $text: obj.label
  472. }
  473. ]
  474. }
  475. }
  476. imageButton(obj){
  477. return {
  478. $cell: true,
  479. $type: "button",
  480. class: "mdc-button mdc-button--compact",
  481. onclick: obj.onclickfunc,
  482. $components:[
  483. {
  484. $cell: true,
  485. class: obj.styleClass,
  486. $type: "img",
  487. src: obj.imgSrc
  488. }
  489. ]
  490. }
  491. }
  492. gridListItem(obj) {
  493. return {
  494. $cell: true,
  495. $type: "li",
  496. class: "mdc-grid-tile " + obj.styleClass,
  497. $components:[
  498. {
  499. $cell: true,
  500. class: "mdc-grid-tile__primary",
  501. $type: "div",
  502. style: "background-color: transparent;",
  503. $components:[
  504. {
  505. $cell: true,
  506. class: "mdc-grid-tile__primary-content tooltip",
  507. $type: "div",
  508. 'aria-label': obj.title,
  509. alt: obj.title,
  510. style: "background-image: url("+ obj.imgSrc + ");",
  511. onclick: obj.onclickfunc,
  512. $components:[
  513. {
  514. $cell: true,
  515. class: "tooltiptext",
  516. $type: "span",
  517. $text: obj.title
  518. }
  519. ]
  520. }
  521. ]
  522. }
  523. ]
  524. }
  525. }
  526. switch(obj) {
  527. return {
  528. $cell: true,
  529. $type: "div",
  530. class: "mdc-switch",
  531. _switch: null,
  532. id: obj.id,
  533. $init: obj.init,
  534. //function(){
  535. // new mdc.switchControl.MDCSwitch(this);
  536. // },
  537. $components: [
  538. {
  539. $type: "div",
  540. class: "mdc-switch__track",
  541. },
  542. {
  543. $type: "div",
  544. class: "mdc-switch__thumb-underlay",
  545. $components:[
  546. {
  547. $type: "div",
  548. class: "mdc-switch__thumb",
  549. $components:[
  550. {
  551. $type: "input",
  552. type: "checkbox",
  553. class: "mdc-switch__native-control",
  554. id: 'input-' + obj.id,
  555. //$init: obj.init,
  556. //id: "basic-switch",
  557. onchange: obj.onchange,
  558. role: "switch"
  559. }
  560. ]
  561. }
  562. ]
  563. }
  564. // {
  565. // $type: "div",
  566. // class: "mdc-switch__background",
  567. // $components: [
  568. // {
  569. // $type: "div",
  570. // class: "mdc-switch__knob"
  571. // }
  572. // ]
  573. // }
  574. ]
  575. }
  576. }
  577. reflectorGUI() {
  578. let reflectorGUI =
  579. {
  580. $type: "div",
  581. id: "reflectorGUI",
  582. //style:"background-color: #efefef",
  583. class: "mdc-layout-grid mdc-layout-grid--align-left",
  584. _reflectorHost: null,
  585. _dbHost: null,
  586. _refHostField: null,
  587. _dbHostField: null,
  588. _initData: function () {
  589. this._reflectorHost = '';
  590. this._dbHost = '';
  591. let config = JSON.parse(localStorage.getItem('lcs_config'));
  592. if (config.reflector) {
  593. this._reflectorHost = config.reflector
  594. }
  595. if (config.dbhost) {
  596. this._dbHost =config.dbhost
  597. }
  598. },
  599. $init: function () {
  600. this._initData();
  601. },
  602. $update: function () {
  603. this.$components = [
  604. {
  605. $type: "div",
  606. class: "mdc-layout-grid__inner",
  607. $components: [
  608. {
  609. $type: "div",
  610. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  611. $components: [
  612. {
  613. $type: "h4",
  614. class: "mdc-typography--headline4",
  615. $text: "Connection settings"
  616. }
  617. ]
  618. },
  619. {
  620. $type: "div",
  621. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  622. $components: [
  623. {
  624. $type: "span",
  625. class: "mdc-typography--headline5",
  626. $text: "Reflector: "
  627. },
  628. window._app.widgets.inputTextFieldOutlined({
  629. "id": 'reflectorInput',
  630. "label": "Reflector",
  631. "value": this._reflectorHost,
  632. "type": "text",
  633. "init": function() {
  634. this._refHostField = new mdc.textField.MDCTextField(this);
  635. },
  636. "style": 'width: 400px;'
  637. }),
  638. ]
  639. },
  640. {
  641. $type: "div",
  642. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  643. $components: [
  644. {
  645. $type: "span",
  646. class: "mdc-typography--headline5",
  647. $text: "DB Host: "
  648. },
  649. window._app.widgets.inputTextFieldOutlined({
  650. "id": 'dbhostInput',
  651. "label": "DB Host",
  652. "value": this._dbHost,
  653. "type": "text",
  654. "init": function() {
  655. this._dbHostField = new mdc.textField.MDCTextField(this);
  656. },
  657. "style": 'width: 400px;'
  658. }),
  659. ]
  660. },
  661. {
  662. $type: "div",
  663. class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
  664. $components: [
  665. window._app.widgets.buttonRaised(
  666. {
  667. "label": 'Update',
  668. "onclick": function (e) {
  669. e.preventDefault();
  670. let config = JSON.parse(localStorage.getItem('lcs_config'));
  671. config.reflector = this._refHostField.value;
  672. config.dbhost = this._dbHostField.value;
  673. localStorage.setItem('lcs_config', JSON.stringify(config));
  674. window.location.reload(true);
  675. }
  676. }),
  677. {
  678. $type: 'span',
  679. $text: " "
  680. },
  681. {
  682. $type: "button",
  683. class: "mdc-button mdc-button--raised",
  684. $text: "Close",
  685. onclick: function (e) {
  686. window.location.pathname = '/'
  687. }
  688. }
  689. ]
  690. }
  691. ]
  692. }
  693. ]
  694. }
  695. }
  696. document.querySelector("#appGUI").$cell({
  697. id: "appGUI",
  698. $cell: true,
  699. $type: "div",
  700. $components: [reflectorGUI]
  701. }
  702. );
  703. }
  704. }
  705. export { Widgets }