Converted to SASS

wwwroot/scripts/ts/dredgepos.floorplan.ts

@@ -72,6 +72,8 @@ const setupFloorplanEvents = () => {
 
 const roomButtonClicked = (e: Event) => {
     const button = $(e.target)
+    $('.roomButton').removeClass('active')
+    button.addClass('active')
     const roomId = button.data('value')
     loadRoom(getRoomById(roomId))
 }
@@ -600,7 +602,7 @@ const setupKonva = () => {
     if(Floorplan.stage !== null) Floorplan.stage.destroy()
 
     Floorplan.stage = new Konva.Stage({
-        container: 'tableMap',
+        container: 'floorplanCanvas',
         width: dimensions.width,
         height: dimensions.height,
     })
@@ -802,22 +804,20 @@ const tableTransferred = (tables: Record<"origin"|"destination", table>) => {
 
 const getDimensions = () => {
 
-    Floorplan.floorplanDiv = $('#tableMap')
-    const parentDiv = $('#mapContainer')
+    Floorplan.floorplanDiv = $('#floorplanCanvas')
+    const parentDiv = $('#floorplanCenterColumn .middleCell')
     const outerWidth = parentDiv.outerWidth()
     const outerHeight = parentDiv.outerHeight()
 
-    let width = outerWidth;
-    let height = outerWidth;
+
 
     if (outerWidth >= outerHeight) {
-        width = outerHeight
-        height = outerHeight
+        Floorplan.floorplanDiv.css('height', '100%')
+    } else {
+        Floorplan.floorplanDiv.css('width','100%')
     }
 
-    Floorplan.floorplanDiv.height(height)
-    Floorplan.floorplanDiv.width(width)
-    Floorplan.visualScale = width / Floorplan.visualScaleBasis
+    Floorplan.visualScale = Floorplan.floorplanDiv.width() / Floorplan.visualScaleBasis
 
-    return {width: width, height:height}
+    return {width: Floorplan.floorplanDiv.width(), height:Floorplan.floorplanDiv.height()}
 }