pollutri
/
res_levis_frontend
1
0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Branch
13 MiB
 
 
 
Branch: master
Branches Labels
${ item.name }
Maak branch ${ searchTerm }
van 'master'
${ noResults }
res_levis_frontend/assets/modules/reslevis.table.json

738 regels
40 KiB
Ruw Permalink Blame Geschiedenis 

  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. }