import { r as registerInstance } from './index-d84fffc3.js';
import { a as api } from './api-0c31171f.js';
import { s as serializeForm } from './serializeForm-a39bb4a7.js';
import './_commonjsHelpers-5e4b1d1a.js';
const row = ({ notificationType, fullMachineName, status, sisCaseId, createdByUser, detailLink, lastUpdateFromSis, }) => {
return `
${fullMachineName}
|
${renderProductionStatusLabel(status.text, status.type)}
|
${notificationType}:
An der Abstreiferaufnahme ist eine Schraube
An der Abstreiferaufnahme ist eine Schraube
An der Abstreiferaufnahme ist eine Schraube
|
${sisCaseId} |
${createdByUser} |
${lastUpdateFromSis}
|
`;
};
const renderProductionStatusLabel = (labelText, type) => {
return `${labelText}`;
};
const dataControllerServiceCallsCss = ".service-calls-overview__result-set{position:relative}@media (min-width: 1440px){.service-calls-overview__result-set{text-align:center}}@media (max-width: 1439px){.service-calls-overview__result-set{text-align:left}}@media (max-width: 567px){.service-calls-overview__table-container.service-calls-overview__table-container{padding-top:10px !important}}.service-calls-overview .ux-text-status .ux-icon{font-size:18px;-webkit-transform:translateY(2px);transform:translateY(2px)}.service-calls-overview .ux-text-status .ux-icon+.ux-icon{display:none}.service-calls-overview .ux-filter .ux-tag *{pointer-events:none}.service-calls-overview .ux-table table{width:100%}.service-calls-overview .ux-table th{max-width:none !important}.service-calls-overview .ux-table tr>td:first-child{font-family:\"Frutiger-Light\", sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-weight:400}.service-calls-overview__filter-container .row+.row{margin-top:30px}@media (min-width: 1025px){.service-calls-overview .filter-flex{display:-ms-flexbox;display:flex}.service-calls-overview .filter-flex>div+div{margin-left:20px}}.service-calls-overview .filter-flex>div{width:100%;margin-bottom:10px}@media (min-width: 1025px){.service-calls-overview .filter-flex>div{width:20%}}.service-calls-overview .filter-flex .ux-dropdown__label .ux-icon{margin-left:20px;-webkit-transform:translateY(-1px);transform:translateY(-1px)}";
let DataControllerServiceCalls = class {
constructor(hostRef) {
registerInstance(this, hostRef);
/** endpoint where data can be requested */
this.url = "";
/** CSS-style selector for the scroll-sensor */
this.scrollSensorSelector = "";
/** CSS-style selector for the table */
this.tableSelector = "";
/** CSS-style selector for the date form */
this.dateSelector = "";
/** CSS-style selector for the filter */
this.filterSelector = "";
/** CSS-style selector for the element where the total number of machines should be placed */
this.totalNumberSelector = "";
/** CSS-style selector for the element where the number of filtered machines should be placed */
this.filteredNumberSelector = "";
/** element that contains all filters */
this.filter = null;
// /** URL for getting the next page */
this.nextPage = "";
/** table element */
this.table = null;
/** table body element where the data should be put */
this.tableBody = null;
/** form element for filter */
this.filterForm = null;
/** form element for filter */
this.dateForm = null;
/** DOM element where all the tiles should be put */
this.scrollSensor = null;
/** NodeList of DOM elements where the number of filtered machines should be put */
this.filteredNumberElements = null;
/** NodeList of DOM elements where the total number of machines should be put */
this.totalNumberElements = null;
}
componentDidLoad() {
this.setFilteredNumberElements();
this.setTable();
this.setTotalNumberElements();
this.requestData(this.url, true);
this.setScrollSensor();
this.setDateFilter();
}
setDateFilter() {
this.dateForm = document.querySelector(this.dateSelector);
const picker = this.dateForm.querySelector("ux-date-range-picker");
if (picker !== null) {
picker.addEventListener("uxDateRangeChange", () => {
this.requestData(this.url, true);
});
}
}
updateNumbers(total) {
writeToElements(this.totalNumberElements, total.toString());
}
setFilterForm() {
setTimeout(() => {
this.filterForm = this.filter.querySelector("form");
this.filterForm
.querySelector(".ux-tag-list")
.removeEventListener("click", () => { });
this.filter
.querySelector("ux-filter")
.addEventListener("change", () => {
this.requestData(this.url, true);
});
this.filterForm
.querySelector(".ux-tag-list")
.addEventListener("click", () => {
setTimeout(() => {
this.requestData(this.url, true);
}, 200);
});
}, 100);
}
/** connect filter */
setFilter(html) {
if (this.filterSelector === "")
return;
this.filter = document.querySelector(this.filterSelector);
if (this.filter === null)
return;
this.filter.innerHTML = html;
this.setFilterForm();
}
/** connect table */
setTable() {
if (this.tableSelector === "")
return;
this.table = document.querySelector(this.tableSelector);
this.tableBody = this.table.querySelector("tbody");
}
/** connect filtered number */
setFilteredNumberElements() {
if (this.filteredNumberSelector === "")
return;
this.filteredNumberElements = document.querySelectorAll(this.filteredNumberSelector);
}
/** connect total number */
setTotalNumberElements() {
if (this.totalNumberSelector === "")
return;
this.totalNumberElements = document.querySelectorAll(this.totalNumberSelector);
}
appendItemsToTable(items) {
if (this.tableBody === null)
return;
this.tableBody.insertAdjacentHTML("beforeend", items.map(row).join(""));
let numItems = this.tableBody.querySelectorAll("tbody tr").length;
writeToElements(this.filteredNumberElements, numItems.toString());
}
// private createTableRow(item: string) {}
/** connect scroll-sensor */
setScrollSensor() {
if (this.scrollSensorSelector === "")
return;
this.scrollSensor = document.querySelector(this.scrollSensorSelector);
if (this.scrollSensor !== null) {
this.scrollSensor.addEventListener("uxInfiniteScrollSensorScrolledIntoView", () => {
this.requestData(this.nextPage);
});
}
}
/** post filter and sort settings to get data from the endpoint */
initialRequest() {
this.requestData(this.url, true);
}
clearExistingData() {
if (this.tableBody !== null)
this.tableBody.textContent = "";
}
/** Send the real request and handle response */
requestData(url, clear = false) {
if (url === "")
return;
if (clear)
this.clearExistingData();
setTimeout(() => {
const options = isMockUrl(url)
? {}
: {
method: "POST",
body: serializeForm(this.dateForm) +
(this.filterForm
? "&" + serializeForm(this.filterForm)
: ""),
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
},
};
api(url, options).then((data) => {
this.setFilter(data.filterHTML);
this.appendItemsToTable(data.items);
this.nextPage = data.nextPage;
this.updateNumbers(data.totalCount);
if (this.nextPage !== "" && this.scrollSensor !== null) {
this.scrollSensor.hasFired = false;
}
});
}, 400);
}
render() {
return null;
}
static get watchers() { return {
"filterSelector": ["setFilter"],
"tableSelector": ["setTable"],
"filteredNumberSelector": ["setFilteredNumberElements"],
"totalNumberSelector": ["setTotalNumberElements"],
"scrollSensorSelector": ["setScrollSensor"],
"url": ["initialRequest"]
}; }
};
function writeToElements(nodes, text) {
if (nodes === null)
return;
[].forEach.call(nodes, (element) => (element.textContent = text));
}
function isMockUrl(url) {
return url.indexOf("mock-data/") > -1;
}
DataControllerServiceCalls.style = dataControllerServiceCallsCss;
export { DataControllerServiceCalls as ux_iws_data_controller_service_calls };