Changeset 485 for TFP-WebServer/bin/Mods/Xample_MarkersMod
- Timestamp:
- Feb 26, 2024, 5:58:03 PM (10 months ago)
- Location:
- TFP-WebServer/bin/Mods/Xample_MarkersMod
- Files:
-
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
TFP-WebServer/bin/Mods/Xample_MarkersMod/ModInfo.xml
r469 r485 5 5 <Description value="Allows placing custom markers on the web map" /> 6 6 <Author value="Catalysm and Alloc" /> 7 <Version value="2 1.1.16.4" />7 <Version value="22.0.1.0" /> 8 8 <Website value="" /> 9 9 </xml> -
TFP-WebServer/bin/Mods/Xample_MarkersMod/WebMod/bundle.js
r465 r485 1 (()=>{"use strict";class e{constructor(e){this.http=e}async getMarkers(){return await this.http.get("/api/markers")}async getMarker(e){return await this.http.get(`/api/markers/${e}`)}async deleteMarker(e){return await this.http.delete(`/api/markers/${e}`)}async updateMarker(e,{x:t,y:a,icon:r}){return await this.http.put(`/api/markers/${e}`,{x:parseInt(t,10),y:parseInt(a,10),icon:r})}async createMarker({x:e,y:t,icon:a}){return await this.http.post("/api/markers",{x:parseInt(e,10),y:parseInt(t,10),icon:a})}}const t="TFP_MarkersExample",a={about:"This mod manages markers on a Leaflet map.",routes:{},settings:{"Map markers":function({React:t,styled:a,HTTP:r,EditableTable:n,checkPermission:i}){const[l,o]=t.useState([]),[s,c]=t.useState(!0),[u,m]=t.useState({x:1,y:2}),d=new e(r),p=i({module:"webapi.Markers",method:"PUT"}),k=[{field:"id",filter:"agTextColumnFilter",checkboxSelection:!0,width:300,flex:0},{field:"x",filter:"agNumberColumnFilter",editable:p,cellEditorPopup:!0,width:50,flex:0},{field:"y",filter:"agNumberColumnFilter",editable:p,cellEditorPopup:!0,width:50,flex:0},{field:"icon",filter:"agTextColumnFilter",editable:p,cellEditorPopup:!0,flex:1}],y=()=>i({module:"webapi.Markers",method:"POST"})?t.createElement("form",{id:"markers-form",onSubmit:w},t.createElement("strong",null,"Create marker"),t.createElement("div",null,t.createElement("label",{htmlFor:"input-x"},"X"),t.createElement("input",{key:"markers-x",id:"input-x",value:u.x,onChange:e=>f(e,"x")})),t.createElement("div",null,t.createElement("label",{htmlFor:"input-y"},"Y"),t.createElement("input",{key:"markers-y",id:"input-y",value:u.y,onChange:e=>f(e,"y")})),t.createElement("button",{type:"submit"},"Create")):null;async function h(){const e=await d.getMarkers();o(e)}function f(e,t){switch(t){case"x":m({...u,x:e.target.value});break;case"y":m({...u,y:e.target.value})}}async function w(e){const{x:t,y:a}=u;e.preventDefault(),await d.createMarker({x:t,y:a}),c(!s)}return t.useEffect((()=>{h()}),[s]),t.createElement(t.Fragment,null,t.createElement(y,null),t.createElement(n,{columnDef:k,rowData:l,reloadFn:h,editRowFn:async function({data:e,newValue:t,column:a}){if(!i({module:"webapi.Markers",method:"PUT"}))return;const r=a.colId;d.updateMarker(e.id,{...e,[r]:t})},deleteRowFn:async function(e){i({module:"webapi.Markers",method:"DELETE"})&&(d.deleteMarker(e.id),c(!s))}}))}},mapComponents:[function({map:t,React:a,HTTP:r,checkPermission:n,LayerGroup:i,LayersControl:l,Marker:o,HideBasedOnAuth:s,L:c}){const u=new e(r),[m,d]=a.useState([]);return a.useEffect((()=>{!async function(){if(n({module:"webapi.Markers",method:"GET"})){const e=(await u.getMarkers()).map((e=>{const{x:t,y:r,icon:n="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Blue_question_mark_icon.svg/1200px-Blue_question_mark_icon.svg.png"}=e,i=c.icon({iconSize:[25,25],iconUrl:n});return a.createElement(o,{key:e.id,icon:i,position:{lat:t,lng:r}})}));d(e)}}()}),[]),a.createElement(s,{requiredPermission:{module:"webapi.Markers",method:"GET"}},a.createElement(l.Overlay,{name:"Markers"},a.createElement(i,null,m)))}]};window[t]=a,window.dispatchEvent(new Event(`mod:${t}:ready`))})(); 1 /******/ (() => { // webpackBootstrap 2 /******/ "use strict"; 3 var __webpack_exports__ = {}; 4 5 ;// CONCATENATED MODULE: ../mods/markers/mapComponent.js 6 /* eslint-disable react/prop-types */ 7 8 function MarkersComponent({ 9 map, 10 React, 11 HTTP, 12 checkPermission, 13 useQuery, 14 LayerGroup, 15 LayersControl, 16 Marker, 17 HideBasedOnAuth, 18 L 19 }) { 20 const [markers, setMarkers] = React.useState([]); 21 const { 22 data 23 } = useQuery('markers', async () => HTTP.get('/api/markers')); 24 React.useEffect(() => { 25 async function getMarkers() { 26 if (checkPermission({ 27 module: 'webapi.Markers', 28 method: 'GET' 29 })) { 30 const markerComponents = data.map(marker => { 31 const { 32 x, 33 y, 34 icon = 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Blue_question_mark_icon.svg/1200px-Blue_question_mark_icon.svg.png' 35 } = marker; 36 const iconComponent = L.icon({ 37 iconSize: [25, 25], 38 iconUrl: icon 39 }); 40 return /*#__PURE__*/React.createElement(Marker, { 41 key: marker.id, 42 icon: iconComponent, 43 position: { 44 lat: x, 45 lng: y 46 } 47 }); 48 }); 49 setMarkers(markerComponents); 50 } 51 } 52 getMarkers(); 53 }, [data]); 54 return /*#__PURE__*/React.createElement(HideBasedOnAuth, { 55 requiredPermission: { 56 module: 'webapi.Markers', 57 method: 'GET' 58 } 59 }, /*#__PURE__*/React.createElement(LayersControl.Overlay, { 60 name: "Markers" 61 }, /*#__PURE__*/React.createElement(LayerGroup, null, markers))); 62 } 63 ;// CONCATENATED MODULE: ../mods/markers/settings.js 64 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } 65 /* eslint-disable react/prop-types */ 66 67 function MarkersSettings({ 68 React, 69 styled, 70 HTTP, 71 EditableTable, 72 FormElements, 73 TfpForm, 74 useForm, 75 useQuery, 76 useMutation, 77 checkPermission 78 }) { 79 const { 80 register, 81 handleSubmit, 82 formState: { 83 errors 84 } 85 } = useForm(); 86 const { 87 data, 88 refetch 89 } = useQuery('markers', async () => HTTP.get('/api/markers')); 90 const { 91 mutate: createMarker 92 } = useMutation('createMarker', data => HTTP.post('/api/markers', { 93 x: parseInt(data.x, 10), 94 y: parseInt(data.y, 10) 95 }), { 96 onSuccess: () => refetch() 97 }); 98 const { 99 mutate: deleteMarker 100 } = useMutation('deleteMarker', id => HTTP.delete(`/api/markers/${id}`), { 101 onSuccess: () => refetch() 102 }); 103 const { 104 mutate: updateMarker 105 } = useMutation('updateMarker', data => HTTP.put(`/api/markers/${data.id}`, { 106 x: parseInt(data.x, 10), 107 y: parseInt(data.y, 10), 108 icon: data.icon 109 }), { 110 onSuccess: () => refetch() 111 }); 112 const canEditRows = checkPermission({ 113 module: 'webapi.Markers', 114 method: 'PUT' 115 }); 116 const columnDef = [{ 117 field: 'id', 118 filter: 'agTextColumnFilter', 119 checkboxSelection: true, 120 width: 300, 121 flex: 0 122 }, { 123 field: 'x', 124 filter: 'agNumberColumnFilter', 125 editable: canEditRows, 126 cellEditorPopup: true, 127 width: 50, 128 flex: 0 129 }, { 130 field: 'y', 131 filter: 'agNumberColumnFilter', 132 editable: canEditRows, 133 cellEditorPopup: true, 134 width: 50, 135 flex: 0 136 }, { 137 field: 'icon', 138 filter: 'agTextColumnFilter', 139 editable: canEditRows, 140 cellEditorPopup: true, 141 flex: 1 142 }]; 143 const CreateMarker = () => { 144 if (!checkPermission({ 145 module: 'webapi.Markers', 146 method: 'POST' 147 })) { 148 return null; 149 } 150 return /*#__PURE__*/React.createElement(TfpForm, { 151 id: "markers-form", 152 handleSubmit: handleSubmit(createMarker), 153 error: errors 154 }, /*#__PURE__*/React.createElement(FormElements.StyledFormItem, null, /*#__PURE__*/React.createElement(FormElements.FormLabel, { 155 htmlFor: "input-x" 156 }, "X"), /*#__PURE__*/React.createElement(FormElements.FormInput, _extends({ 157 key: "x", 158 id: "input-x" 159 }, register('x', { 160 required: true 161 })))), /*#__PURE__*/React.createElement(FormElements.StyledFormItem, null, /*#__PURE__*/React.createElement(FormElements.FormLabel, { 162 htmlFor: "input-y" 163 }, "Y"), /*#__PURE__*/React.createElement(FormElements.FormInput, _extends({ 164 key: "y", 165 id: "input-y" 166 }, register('y', { 167 required: true 168 }))))); 169 }; 170 async function cellEdited({ 171 data, 172 newValue, 173 column 174 }) { 175 if (!checkPermission({ 176 module: 'webapi.Markers', 177 method: 'PUT' 178 })) { 179 return; 180 } 181 const changedField = column.colId; 182 updateMarker({ 183 ...data, 184 [changedField]: newValue 185 }); 186 } 187 async function cellDeleted(row) { 188 if (!checkPermission({ 189 module: 'webapi.Markers', 190 method: 'DELETE' 191 })) { 192 return; 193 } 194 deleteMarker(row.id); 195 } 196 return /*#__PURE__*/React.createElement("div", { 197 style: { 198 flexDirection: 'row', 199 height: '80vh' 200 } 201 }, /*#__PURE__*/React.createElement(CreateMarker, null), /*#__PURE__*/React.createElement(EditableTable, { 202 columnDef: columnDef, 203 rowData: data, 204 reloadFn: refetch, 205 editRowFn: cellEdited, 206 deleteRowFn: cellDeleted, 207 height: '90%' 208 })); 209 } 210 ;// CONCATENATED MODULE: ../mods/markers/index.js 211 /* eslint-disable react/prop-types */ 212 213 214 const modId = 'TFP_MarkersExample'; 215 const Markers = { 216 about: `This mod manages markers on a Leaflet map.`, 217 routes: {}, 218 settings: { 219 'Map markers': MarkersSettings 220 }, 221 mapComponents: [MarkersComponent] 222 }; 223 window[modId] = Markers; 224 window.dispatchEvent(new Event(`mod:${modId}:ready`)); 225 /******/ })() 226 ;
Note:
See TracChangeset
for help on using the changeset viewer.