https://pttemkart.com/js/app.js

1import store from "./service.js";
2import { handleSelection } from "./map.js";
3
4
5$(() => {
6  const phoneRegex = /^(\d{3})(\d{3})(\d{4})$/;
7
8  // LocalGetItem
9  $("#gridContainer").dxDataGrid({
10    locale: "tr",
11    dataSource: store,
12    showBorders: false,
13    hoverStateEnabled: true,
14    rowAlternationEnabled: true,
15    columnAutoWidth: true,
16    allowColumnResizing: true,
17    onEditorPreparing: function (e) {
18      if (e.parentType === "searchPanel") {
19        e.component.option("searchTimeout", 100);
20        e.editorElement.on("input", function (e) {
21          if (!e.target.value) {
22            const selectedData = sessionStorage.getItem("selectedData");
23            if (selectedData) {
24              sessionStorage.removeItem("selectedData");
25              window.location.reload();
26            }
27          }
28        });
29      }
30    },
31    columnChooser: {
32      enabled: false,
33    },
34    searchPanel: {
35      visible: true,
36      placeholder: "Mağaza Ara...",
37      text: sessionStorage.getItem("selectedData") || "",
38    },
39    headerFilter: {
40      visible: true,
41      allowSearch: true,
42    },
43    paging: {
44      pageSize: 50,
45    },
46    pager: {
47      visible: true,
48      allowedPageSizes: [5, 10, 50],
49      showPageSizeSelector: true,
50      showInfo: false,
51      showNavigationButtons: true,
52    },
53    selection: {
54      mode: "single",
55    },
56    columns: [
57      {
58        caption: "",
59        dataField: "ImageLink",
60        width: 50,
61        allowFiltering: false,
62        allowSorting: false,
63        alignment: "center",
64        cellTemplate(container, options) {
65          if (options.value && options.value.length > 0) {
66            $("<div>")
67              .append($("<img>", { src: options.value }).addClass("image"))
68              .appendTo(container)
69              .addClass("table__image");
70          } else {
71            $("<div>")
72              .append(
73                $("<img>", { src: "../image/default.jpeg" }).addClass("image"),
74              )
75              .appendTo(container)
76              .addClass("table__image");
77          }
78        },
79      },
80
81      {
82        caption: "Marka",
83        dataField: "Brand",
84        width: 105,
85        dataType: "string",
86        showInColumnChooser: true,
87      },
88      {
89        caption: "Ä°sim",
90        dataField: "Name",
91        width: 200,
92        dataType: "string",
93        showInColumnChooser: true,
94      },
95      {
96        caption: "Şehir",
97        dataField: "City",
98        width: 150,
99        dataType: "string",
100        showInColumnChooser: true,
101        cellTemplate: function (element, info) {
102          element
103            .append("<div>" + info.text + "</div>")
104            .css("text-transform", "capitalize");
105        },
106      },
107      {
108        caption: "Adress",
109        dataField: "Adress",
110        dataType: "string",
111        showInColumnChooser: true,
112      },
113      {
114        caption: "Telefon",
115        dataField: "Phone",
116        width: 200,
117        showInColumnChooser: true,
118        cellTemplate: function (element, info) {
119          if (info.text && info.text.length > 0) {
120            element
121              .append(
122                "<div>" +
123                  info.text.replace(phoneRegex, "($1) $2-$3") +
124                  "</div>",
125              )
126              .css("color", "#1e40af");
127          } else {
128            element.append("<div>**********</div>").css("color", "#1e40af");
129          }
130        },
131      },
132      {
133        caption: "Harita",
134        width: 90,
135        allowFiltering: false,
136        allowSorting: false,
137        alignment: "center",
138        cellTemplate(container, options) {
139          $("<div>")
140            .append(
141              $("<img>", { src: "../image/map.png" }).addClass("map__icon"),
142            )
143            .appendTo(container)
144            .addClass("table__map__icon");
145        },
146      },
147    ],
148    onSelectionChanged(e) {
149      console.log(e);
150      const selectedStore = e.selectedRowsData[0];
151      if (selectedStore) {
152        handleSelection(selectedStore); // seçili mağaza verisini dışarıya aktar
153        $("#taskSub").text(selectedStore.City);
154        $("#mapCard").slideDown(500, function () {
155          $("html, body").animate({ scrollTop: $(document).height() });
156        });
157      } else {

158        $("#mapCard").slideUp(500);
159      }
160    },
161  });
162});
163
164$(".map__btn").click(function () {
165  $("#mapCard").slideUp(500);
166});
167
168$("#popover1").fadeOut(9000);