|
| 1 | +<div id="faults-table"></div> |
| 2 | +<script src="js/moment.min.js"></script> |
| 3 | +<script type="application/javascript"> |
| 4 | + $(document).ready(function () { |
| 5 | + function status_translate(cell) { |
| 6 | + if (typeof cell !== "string") { |
| 7 | + cell = cell.getValue(); |
| 8 | + } |
| 9 | + const translations = { |
| 10 | + {{ App\FaultsTable::UNSEEN }}: "@lang('faults.unseen')", |
| 11 | + {{ App\FaultsTable::SEEN }}: "@lang('faults.seen')", |
| 12 | + {{ App\FaultsTable::DONE }}: "@lang('faults.done')", |
| 13 | + {{ App\FaultsTable::WONT_FIX }}: "@lang('faults.wont_fix')" |
| 14 | + }; |
| 15 | + const colors = { |
| 16 | + {{ App\FaultsTable::UNSEEN }}: "text-secondary", |
| 17 | + {{ App\FaultsTable::SEEN }}: "text-info", |
| 18 | + {{ App\FaultsTable::DONE }}: "text-success", |
| 19 | + {{ App\FaultsTable::WONT_FIX }}: "text-danger" |
| 20 | + }; |
| 21 | + return '<div class="font-italic ' + colors[cell] + ' text-right">' + translations[cell] + '</div>'; |
| 22 | + } |
| 23 | +
|
| 24 | + var button = function (cell, formatterParams) { |
| 25 | + switch (formatterParams['status']) { |
| 26 | + case "{{ App\FaultsTable::DONE }}": |
| 27 | + var style = "btn-success"; |
| 28 | + var text = "@lang('faults.done')"; |
| 29 | + break; |
| 30 | + |
| 31 | + case "{{ App\FaultsTable::WONT_FIX }}": |
| 32 | + var style = "btn-danger"; |
| 33 | + var text = "@lang('faults.wont_fix')"; |
| 34 | + break; |
| 35 | + |
| 36 | + case "{{ App\FaultsTable::UNSEEN }}": |
| 37 | + var style = "btn-danger"; |
| 38 | + var text = "@lang('faults.reopen')"; |
| 39 | + break; |
| 40 | + } |
| 41 | +
|
| 42 | + return $("<button type=\"button\" class=\"btn btn-sm " + style + " float-left\">" + text + "</button>").click(function () { |
| 43 | + var data = cell.getRow().getData(); |
| 44 | + text = text == "@lang('faults.reopen')" ? "@lang('faults.reopened')" : text; |
| 45 | + confirm('@lang('faults.confirm')', '@lang('faults.confirm_message')' + text, '@lang('faults.cancel')', '@lang('faults.confirm')', function() { |
| 46 | + $.post("{{ route('faults.update') }}", {id: data.id, status: formatterParams['status']}, function(data){ |
| 47 | + if (data !== "true"){ |
| 48 | + alert('@lang('faults.autherror')'); |
| 49 | + } else { |
| 50 | + window.location.reload(true); |
| 51 | + } |
| 52 | + }); |
| 53 | + }); |
| 54 | + })[0]; |
| 55 | + }; |
| 56 | +
|
| 57 | + var button_formatter = function (cell, formatterParams, onRendered) { |
| 58 | + var status = cell.getRow().getData()["status"]; |
| 59 | +
|
| 60 | + switch (formatterParams['status']) { |
| 61 | + case "{{ App\FaultsTable::DONE }}": |
| 62 | + if (status === "{{ App\FaultsTable::SEEN }}" || status === "{{ App\FaultsTable::UNSEEN }}") { |
| 63 | + return button(cell, formatterParams); |
| 64 | + } |
| 65 | + break; |
| 66 | +
|
| 67 | + case "{{ App\FaultsTable::WONT_FIX }}": |
| 68 | + if (status === "{{ App\FaultsTable::UNSEEN }}") { |
| 69 | + onRendered(function () { |
| 70 | + $.post("{{ route('faults.update') }}", {id: cell.getValue(), status: "{{ App\FaultsTable::SEEN }}"}, ); |
| 71 | + }); |
| 72 | + } |
| 73 | + if (status === "{{ App\FaultsTable::SEEN }}" || status === "{{ App\FaultsTable::UNSEEN }}") { |
| 74 | + return button(cell, formatterParams); |
| 75 | + } else { |
| 76 | + return status_translate(status); |
| 77 | + } |
| 78 | + break; |
| 79 | +
|
| 80 | + case "{{ App\FaultsTable::UNSEEN }}": |
| 81 | + if (status === "{{ App\FaultsTable::DONE }}" || status === "{{ App\FaultsTable::WONT_FIX }}") { |
| 82 | + return button(cell, formatterParams); |
| 83 | + } |
| 84 | + break; |
| 85 | + } |
| 86 | +
|
| 87 | + return ""; |
| 88 | + } |
| 89 | +
|
| 90 | + var table = new Tabulator("#faults-table", { |
| 91 | + paginationSizeSelector: [10, 25, 50, 100, 250, 500], |
| 92 | + paginationSize: 10, |
| 93 | + pagination: "local", //enable remote pagination |
| 94 | + ajaxURL: "{{ route('faults.table') }}", //set url for ajax request |
| 95 | + ajaxFiltering: true, |
| 96 | + layout: "fitColumns", |
| 97 | + placeholder: "No Data Set", |
| 98 | + columns: [ |
| 99 | + {title: "@lang('faults.created_at')", field: "created_at", sorter: "datetime", sorterParams: {format: "YYYY-MM-DD HH:mm:ss"}, width: 180, |
| 100 | + formatter: "datetime", formatterParams: {outputFormat: "YYYY. MM. DD. HH:mm"}}, |
| 101 | + {title: "@lang('faults.location')", field: "location", sorter: "string", widthGrow: 1, formatter: "textarea"}, |
| 102 | + {title: "@lang('faults.description')", field: "description", sorter: "string", widthGrow: 4, formatter: "textarea"}, |
| 103 | + @if(Auth::User()->hasRole(\App\Role::INTERNET_ADMIN)) |
| 104 | + {title: "", field: "id", headerSort: false, width: 60, formatter: button_formatter, formatterParams: {status: "{{ App\FaultsTable::DONE }}"}}, |
| 105 | + {title: "", field: "id", headerSort: false, width: 140, formatter: button_formatter, formatterParams: {status: "{{ App\FaultsTable::WONT_FIX }}"}}, |
| 106 | + @else |
| 107 | + {title: "@lang('faults.status')", field: "status", sorter: "string", width: 140, formatter: status_translate}, |
| 108 | + @endif |
| 109 | + {title: "", field: "id", headerSort: false, width: 80, formatter: button_formatter, formatterParams: {status: "{{ App\FaultsTable::UNSEEN }}"}} |
| 110 | + ], |
| 111 | + initialSort: [ |
| 112 | + {column: "created_at", dir: "desc"} |
| 113 | + ] |
| 114 | + }); |
| 115 | + }); |
| 116 | +</script> |
0 commit comments