Fix map centering && add offset params

kir-dev · Apr 12, 2024 · cbeaba4 · cbeaba4
1 parent 05e8c00
commit cbeaba4
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/packages/admin/src/types/kiosk.types.ts b/packages/admin/src/types/kiosk.types.ts
@@ -105,6 +105,8 @@ export const WidgetConfigFields: Record<WidgetName, WidgetConfigField[]> = {
   map: [
     { name: 'radius', type: 'number', label: 'Hatósugár' },
     { name: 'zoom', type: 'number', label: 'Nagyítás' },
+    { name: 'xOffset', type: 'number', label: 'X eltolás' },
+    { name: 'yOffset', type: 'number', label: 'Y eltolás' },
   ],
 };
 
@@ -156,6 +158,8 @@ export interface MapConfig extends WidgetConfigBase {
   name: 'map';
   radius: number;
   zoom: number;
+  yOffset: number;
+  xOffset: number;
 }
 
 export type GridSettings = {

diff --git a/packages/backend/src/types/kiosk.types.ts b/packages/backend/src/types/kiosk.types.ts
@@ -112,6 +112,9 @@ export interface BikeConfig extends WidgetConfigBase {
 export interface MapConfig extends WidgetConfigBase {
   name: 'map';
   radius: number;
+  zoom: number;
+  yOffset: number;
+  xOffset: number;
 }
 
 export type GridSettings = {

diff --git a/packages/client/src/components/widgets/MapWidget.tsx b/packages/client/src/components/widgets/MapWidget.tsx
@@ -19,7 +19,7 @@ export function MapWidget() {
   useInterval(async () => {
     await refetch();
   }, 5000);
-  const mapWidth = '1800px';
+  const mapWidth = '2000px';
   const {
     config: {
       meta: { coordinates },
@@ -35,7 +35,6 @@ export function MapWidget() {
     url.searchParams.set('mapWidth', mapWidth);
     return url.toString();
   }, [data]);
-
   if (error || !data) {
     return (
       <Widget grid={config.grid}>
@@ -51,10 +50,20 @@ export function MapWidget() {
         <IFrameContainer
           src={src.replace('%2C', ',').replace('.html', '.html#')} // # nélkül nem működik, Köszönd Gábornak xd
           style={{
-            left: -1420 + 240 * (config.grid.column.end - config.grid.column.start - 1), // haha, fix nem ták :DDD
-            top: -430 + 120 * (config.grid.row.end - config.grid.row.start - 1),
+            left:
+              -760 * devicePixelRatio +
+              1050 * (devicePixelRatio / 2 - 1) +
+              (devicePixelRatio > 1.75 ? 120 : 160) *
+                (config.grid.column.end - config.grid.column.start - 1) *
+                devicePixelRatio +
+              Number(config.xOffset), // haha, fix nem ták :DDD
+            top:
+              -300 * devicePixelRatio +
+              210 * (devicePixelRatio / 2 - 1) +
+              70 * (config.grid.row.end - config.grid.row.start - 1) * devicePixelRatio +
+              Number(config.yOffset),
           }}
-        ></IFrameContainer>
+        ></IFrameContainer>{' '}
         <SponsorText>
           <RealCity size={35} />
         </SponsorText>
@@ -72,9 +81,9 @@ const ContentContainer = styled.div`
 const IFrameContainer = styled.iframe`
   position: absolute;
   /* Adjust this value to crop from the left half */
-  width: 2560px;
+  width: 2760px;
   /* Width of the iframe */
-  height: 1080px;
+  height: 1440px;
   /* Height of the iframe */
   border: none;
 `;

diff --git a/packages/client/src/types/widget.type.ts b/packages/client/src/types/widget.type.ts
@@ -57,6 +57,8 @@ export interface MapConfig extends WidgetConfigBase {
   name: 'map';
   radius: number;
   zoom: number;
+  yOffset: number;
+  xOffset: number;
 }
 
 export type GridSettings = {