Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 

738 wiersze
40 KiB

  1. {
  2. "parts": {
  3. "ui": {
  4. "table": {
  5. "html": [
  6. {
  7. "selector": "body",
  8. "tag": "div",
  9. "attr": {
  10. "class": "bg-base-100 card card-border",
  11. "x-data": "useAdvancedDatatables"
  12. },
  13. "html": [
  14. {
  15. "tag": "div",
  16. "attr": {
  17. "class": "border-base-200 flex items-center justify-between px-5 py-5 space-x-3"
  18. },
  19. "html": [
  20. {
  21. "tag": "p",
  22. "attr": {
  23. "class": "text-2xl text-[#008EED]"
  24. },
  25. "text": "Tracks"
  26. },
  27. {
  28. "tag": "div",
  29. "attr": {
  30. "role": "alert",
  31. "class": "alert alert-info alert-soft"
  32. },
  33. "html": [
  34. {
  35. "tag": "span",
  36. "attr": {
  37. "class": "iconify lucide--info text-xl text-[#008EED]"
  38. }
  39. },
  40. {
  41. "tag": "span",
  42. "attr": {
  43. "class": "text-[#008EED]"
  44. },
  45. "text": "This log tracks the alarms sent to the operators and the status of the support"
  46. }
  47. ]
  48. },
  49. {
  50. "tag": "div",
  51. "attr": {
  52. "class": "flex items-center gap-2"
  53. },
  54. "html": [
  55. {
  56. "tag": "label",
  57. "attr": {
  58. "class": "input input-primary w-56"
  59. },
  60. "html": [
  61. {
  62. "tag": "span",
  63. "attr": {
  64. "class": "iconify lucide--search text-base-content/70 size-4.5 text-[#008EED]"
  65. },
  66. "text": ""
  67. },
  68. {
  69. "tag": "input",
  70. "attr": {
  71. "class": "text-base placeholder:text-sm",
  72. "type": "search",
  73. "x-model": "search",
  74. "@input": "updateSearch",
  75. "placeholder": "Search"
  76. },
  77. "text": ""
  78. }
  79. ]
  80. },
  81. {
  82. "tag": "div",
  83. "attr": {
  84. "class": "dropdown dropdown-bottom dropdown-end"
  85. },
  86. "html": [
  87. {
  88. "tag": "div",
  89. "attr": {
  90. "tabindex": "0",
  91. "role": "button",
  92. "class": "btn btn-outline btn-primary"
  93. },
  94. "html": [
  95. {
  96. "tag": "span",
  97. "attr": {
  98. "class": "iconify lucide--columns-3-cog size-4"
  99. },
  100. "text": ""
  101. }
  102. ]
  103. },
  104. {
  105. "tag": "div",
  106. "attr": {
  107. "tabindex": "0",
  108. "class": "dropdown-content bg-base-100 rounded-box w-44 shadow"
  109. },
  110. "html": [
  111. {
  112. "tag": "ul",
  113. "attr": {
  114. "class": "menu w-full"
  115. },
  116. "html": [
  117. {
  118. "tag": "template",
  119. "attr": {
  120. "x-for": "column in allLeafColumns",
  121. ":key": "column.id"
  122. },
  123. "html": [
  124. {
  125. "tag": "li",
  126. "attr": {
  127. "@click": "toggleColumn(column)"
  128. },
  129. "html": [
  130. {
  131. "tag": "div",
  132. "attr": {
  133. "class": "group gap-2.5",
  134. ":data-visible": "isColumnVisible(column) ? true : null"
  135. },
  136. "html": [
  137. {
  138. "tag": "span",
  139. "attr": {
  140. "class": "iconify lucide--check size-4 scale-50 opacity-0 transition-all duration-300 group-data-visible:scale-100 group-data-visible:opacity-100"
  141. },
  142. "text": ""
  143. },
  144. {
  145. "tag": "span",
  146. "attr": {
  147. "class": "font-medium",
  148. "x-text": "column.columnDef.header"
  149. },
  150. "text": ""
  151. }
  152. ]
  153. }
  154. ]
  155. }
  156. ]
  157. }
  158. ]
  159. }
  160. ]
  161. }
  162. ]
  163. },
  164. {
  165. "tag": "div",
  166. "attr": {
  167. "class": "dropdown dropdown-bottom dropdown-end"
  168. },
  169. "html": [
  170. {
  171. "tag": "div",
  172. "attr": {
  173. "aria-label": "More actions",
  174. "tabindex": "0",
  175. "role": "button",
  176. "class": "btn btn-outline btn-primary"
  177. },
  178. "html": [
  179. {
  180. "tag": "span",
  181. "attr": {
  182. "class": "iconify lucide--ellipsis-vertical size-4"
  183. },
  184. "text": ""
  185. }
  186. ]
  187. },
  188. {
  189. "tag": "div",
  190. "attr": {
  191. "tabindex": "0",
  192. "class": "dropdown-content bg-base-100 rounded-box w-44 shadow"
  193. },
  194. "html": [
  195. {
  196. "tag": "ul",
  197. "attr": {
  198. "class": "menu w-full"
  199. },
  200. "html": [
  201. {
  202. "tag": "li",
  203. "html": [
  204. {
  205. "tag": "div",
  206. "html": [
  207. {
  208. "tag": "span",
  209. "attr": {
  210. "class": "iconify lucide--refresh-cw size-4"
  211. },
  212. "text": ""
  213. },
  214. {
  215. "tag": null,
  216. "text": "Refresh Data"
  217. }
  218. ]
  219. }
  220. ]
  221. },
  222. {
  223. "tag": "li",
  224. "html": [
  225. {
  226. "tag": "div",
  227. "html": [
  228. {
  229. "tag": "span",
  230. "attr": {
  231. "class": "iconify lucide--download size-4"
  232. },
  233. "text": ""
  234. },
  235. {
  236. "tag": null,
  237. "text": "Export"
  238. }
  239. ]
  240. }
  241. ]
  242. }
  243. ]
  244. }
  245. ]
  246. }
  247. ]
  248. },
  249. {
  250. "tag": "button",
  251. "attr": {
  252. "type": "submit",
  253. "class": "btn btn-outline btn-primary",
  254. "style": "cursor: pointer;"
  255. },
  256. "text": "Add"
  257. }
  258. ]
  259. }
  260. ]
  261. },
  262. {
  263. "tag": "div",
  264. "attr": {
  265. "class": "overflow-x-auto p-3"
  266. },
  267. "html": [
  268. {
  269. "tag": "table",
  270. "attr": {
  271. "class": "table border-solid border-2 border-[#008EED]"
  272. },
  273. "html": [
  274. {
  275. "tag": "thead",
  276. "html": [
  277. {
  278. "tag": "template",
  279. "attr": {
  280. "x-for": "headerGroup in table.getHeaderGroups()",
  281. ":key": "headerGroup.id"
  282. },
  283. "html": [
  284. {
  285. "tag": "tr",
  286. "html": [
  287. {
  288. "tag": "template",
  289. "attr": {
  290. "x-for": "header in headerGroup.headers",
  291. ":key": "header.id"
  292. },
  293. "html": [
  294. {
  295. "tag": "th",
  296. "attr": {
  297. "class": "text-[#008EED]",
  298. "x-show": "!header.isPlaceholder",
  299. "x-text": "flexRender(header.column.columnDef.header, header.getContext())"
  300. },
  301. "text": ""
  302. }
  303. ]
  304. }
  305. ]
  306. }
  307. ]
  308. }
  309. ]
  310. },
  311. {
  312. "tag": "tbody",
  313. "html": [
  314. {
  315. "tag": "template",
  316. "attr": {
  317. "x-if": "!visibleRows.length"
  318. },
  319. "html": [
  320. {
  321. "tag": "tr",
  322. "html": [
  323. {
  324. "tag": "td",
  325. "attr": {
  326. ":colspan": "columns.length",
  327. "class": "h-24 text-center"
  328. },
  329. "html": [
  330. {
  331. "tag": "p",
  332. "html": [
  333. {
  334. "tag": null,
  335. "text": "No results."
  336. },
  337. {
  338. "tag": "span",
  339. "attr": {
  340. "@click": "clearFilters",
  341. "class": "text-primary cursor-pointer hover:underline"
  342. },
  343. "text": "Clear filters"
  344. }
  345. ]
  346. }
  347. ]
  348. }
  349. ]
  350. }
  351. ]
  352. },
  353. {
  354. "tag": "template",
  355. "attr": {
  356. "x-if": "visibleRows.length"
  357. },
  358. "html": [
  359. {
  360. "tag": "template",
  361. "attr": {
  362. "x-for": "row in visibleRows",
  363. ":key": "row.id"
  364. },
  365. "html": [
  366. {
  367. "tag": "tr",
  368. "html": [
  369. {
  370. "tag": "template",
  371. "attr": {
  372. "x-for": "cell in getVisibleCells(row)",
  373. ":key": "cell.id"
  374. },
  375. "html": [
  376. {
  377. "tag": "td",
  378. "html": [
  379. {
  380. "tag": "template",
  381. "attr": {
  382. "x-if": "cell.column.id === 'subject'"
  383. },
  384. "html": [
  385. {
  386. "tag": "div",
  387. "attr": {
  388. "class": "flex items-center gap-2"
  389. },
  390. "html": [
  391. {
  392. "tag": "div",
  393. "html": [
  394. {
  395. "tag": "p",
  396. "attr": {
  397. "class": "leading-none font-medium",
  398. "x-text": "cell.row.original.subject"
  399. },
  400. "text": ""
  401. },
  402. {
  403. "tag": "p",
  404. "attr": {
  405. "class": "text-base-content/70 mt-0.5 text-xs/none",
  406. "x-text": "cell.row.original.tracker"
  407. },
  408. "text": ""
  409. }
  410. ]
  411. }
  412. ]
  413. }
  414. ]
  415. },
  416. {
  417. "tag": "template",
  418. "attr": {
  419. "x-if": "cell.column.id === 'id'"
  420. },
  421. "html": [
  422. {
  423. "tag": "span",
  424. "attr": {
  425. "class": "text-base-content/70 font-mono text-xs uppercase",
  426. "x-text": "cell.row.original.id"
  427. },
  428. "text": ""
  429. }
  430. ]
  431. },
  432. {
  433. "tag": "template",
  434. "attr": {
  435. "x-if": "cell.column.id === 'status'"
  436. },
  437. "html": [
  438. {
  439. "tag": "span",
  440. "attr": {
  441. ":class": "{'badge badge-success badge-sm badge-soft': cell.row.original.status === 'detected','badge badge-info badge-sm badge-soft': cell.row.original.status === 'help','badge badge-error badge-sm badge-soft': cell.row.original.status === 'away','badge badge-ghost badge-sm': ['lost', null, undefined].includes(cell.row.original.status)}",
  442. "x-text": "cell.row.original.status.charAt(0).toUpperCase() + cell.row.original.status.slice(1)"
  443. },
  444. "text": ""
  445. }
  446. ]
  447. },
  448. {
  449. "tag": "template",
  450. "attr": {
  451. "x-if": "cell.column.id === 'dateTime'"
  452. },
  453. "html": [
  454. {
  455. "tag": "p",
  456. "attr": {
  457. "class": "space-x-1 whitespace-nowrap"
  458. },
  459. "html": [
  460. {
  461. "tag": "span",
  462. "attr": {
  463. "x-text": "new Date(cell.row.original.dateTime).toLocaleDateString('it-IT', {day: 'numeric', month: 'short', year: '2-digit'})"
  464. },
  465. "text": ""
  466. },
  467. {
  468. "tag": "span",
  469. "attr": {
  470. "class": "text-base-content/60 text-xs",
  471. "x-text": "new Date(cell.row.original.dateTime).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'})"
  472. },
  473. "text": ""
  474. }
  475. ]
  476. }
  477. ]
  478. },
  479. {
  480. "tag": "template",
  481. "attr": {
  482. "x-if": "cell.column.gateway === 'gateway'"
  483. },
  484. "html": [
  485. {
  486. "tag": "span",
  487. "attr": {
  488. "class": "text-base-content/70 font-mono text-xs uppercase",
  489. "x-text": "cell.row.original.gateway"
  490. },
  491. "text": ""
  492. }
  493. ]
  494. },
  495. {
  496. "tag": "template",
  497. "attr": {
  498. "x-if": "cell.column.id === 'signal'"
  499. },
  500. "html": [
  501. {
  502. "tag": "span",
  503. "attr": {
  504. "class": "text-base font-medium",
  505. "x-text": "cell.row.original.signal + '%'"
  506. },
  507. "text": ""
  508. }
  509. ]
  510. },
  511. {
  512. "tag": "template",
  513. "attr": {
  514. "x-if": "cell.column.id === 'actions'"
  515. },
  516. "html": [
  517. {
  518. "tag": "div",
  519. "attr": {
  520. "class": "flex items-center gap-1.5"
  521. },
  522. "html": [
  523. {
  524. "tag": "button",
  525. "attr": {
  526. "aria-label": "Show",
  527. "class": "btn btn-soft btn-xs btn-square",
  528. "@click": "viewRow(cell.row)"
  529. },
  530. "html": [
  531. {
  532. "tag": "span",
  533. "attr": {
  534. "class": "iconify lucide--eye size-3.5"
  535. },
  536. "text": ""
  537. }
  538. ]
  539. },
  540. {
  541. "tag": "button",
  542. "attr": {
  543. "aria-label": "Delete",
  544. "class": "btn btn-soft btn-error btn-xs btn-square",
  545. "@click": "deleteRow(cell.row)"
  546. },
  547. "html": [
  548. {
  549. "tag": "span",
  550. "attr": {
  551. "class": "iconify lucide--trash-2 size-3.5"
  552. },
  553. "text": ""
  554. }
  555. ]
  556. }
  557. ]
  558. }
  559. ]
  560. },
  561. {
  562. "tag": "template",
  563. "attr": {
  564. "x-if": "!['id', 'subject', 'status', 'dateTime', 'signal', 'actions'].includes(cell.column.id)"
  565. },
  566. "html": [
  567. {
  568. "tag": "span",
  569. "attr": {
  570. "x-html": "cell.column.columnDef.cell ? cell.column.columnDef.cell(cell.getContext()) : cell.getValue()"
  571. },
  572. "text": ""
  573. }
  574. ]
  575. }
  576. ]
  577. }
  578. ]
  579. }
  580. ]
  581. }
  582. ]
  583. }
  584. ]
  585. }
  586. ]
  587. }
  588. ]
  589. }
  590. ]
  591. },
  592. {
  593. "tag": "div",
  594. "attr": {
  595. "class": "border-base-200 flex flex-wrap items-center justify-between gap-2 p-5"
  596. },
  597. "html": [
  598. {
  599. "tag": "div",
  600. "attr": {
  601. "class": "flex items-center gap-2"
  602. },
  603. "html": [
  604. {
  605. "tag": "p",
  606. "attr": {
  607. "class": "text-base-content/70 text-sm max-md:hidden"
  608. },
  609. "text": "Items per page"
  610. },
  611. {
  612. "tag": "select",
  613. "attr": {
  614. "aria-label": "Items per page",
  615. "class": "select select-sm w-16",
  616. "@change": "changePageSize(Number($event.target.value))"
  617. },
  618. "html": [
  619. {
  620. "tag": "template",
  621. "attr": {
  622. "x-for": "size in pageSizes",
  623. ":key": "size"
  624. },
  625. "html": [
  626. {
  627. "tag": "option",
  628. "attr": {
  629. ":value": "size",
  630. ":selected": "size === pageSize",
  631. "x-text": "size"
  632. },
  633. "text": ""
  634. }
  635. ]
  636. }
  637. ]
  638. }
  639. ]
  640. },
  641. {
  642. "tag": "p",
  643. "attr": {
  644. "class": "text-base-content/70 text-sm max-md:hidden"
  645. },
  646. "html": [
  647. {
  648. "tag": null,
  649. "text": "Showing "
  650. },
  651. {
  652. "tag": "span",
  653. "attr": {
  654. "class": "text-base-content font-medium",
  655. "x-text": "`${start}–${end}`"
  656. },
  657. "text": ""
  658. },
  659. {
  660. "tag": null,
  661. "text": " out of "
  662. },
  663. {
  664. "tag": "span",
  665. "attr": {
  666. "class": "text-base-content font-medium",
  667. "x-text": "rowCount"
  668. },
  669. "text": ""
  670. }
  671. ]
  672. },
  673. {
  674. "tag": "div",
  675. "attr": {
  676. "class": "join"
  677. },
  678. "html": [
  679. {
  680. "tag": "button",
  681. "attr": {
  682. "class": "btn btn-square btn-sm btn-outline border-base-300 join-item",
  683. "aria-label": "Pagination controls",
  684. ":disabled": "!table.getCanPreviousPage()",
  685. "@click": "prevPage()"
  686. },
  687. "html": [
  688. {
  689. "tag": "span",
  690. "attr": {
  691. "class": "iconify lucide--arrow-left"
  692. },
  693. "text": ""
  694. }
  695. ]
  696. },
  697. {
  698. "tag": "input",
  699. "attr": {
  700. "aria-label": "Page number",
  701. "type": "number",
  702. "min": "1",
  703. ":max": "table.getPageCount()",
  704. ":value": "pageIndex + 1",
  705. "@input": "setPageIndex($event.target.value - 1)",
  706. "class": "input input-sm join-item w-10 text-center"
  707. },
  708. "text": ""
  709. },
  710. {
  711. "tag": "button",
  712. "attr": {
  713. "class": "btn btn-square btn-sm btn-outline border-base-300 join-item",
  714. "aria-label": "Pagination controls",
  715. ":disabled": "!table.getCanNextPage()",
  716. "@click": "nextPage()"
  717. },
  718. "html": [
  719. {
  720. "tag": "span",
  721. "attr": {
  722. "class": "iconify lucide--arrow-right"
  723. },
  724. "text": ""
  725. }
  726. ]
  727. }
  728. ]
  729. }
  730. ]
  731. }
  732. ]
  733. }
  734. ]
  735. }
  736. }
  737. }
  738. }