Feature/cu 861m77zun - Dettaglio Aula

src/MainContainer.tsx

@@ -65,7 +65,25 @@ export const MainContainer: FC = () => {
           console.log("downloads")
         }}
         onNotifications={() => {
-          console.log("notifications")
+          navigate("RoomDetails", {
+            room: {
+              name: "2.0.1",
+              capacity: 380,
+              building: "Edificio 2",
+              address: "Piazza Leonardo da Vinci, 32 - 20133 - Milano (MI)",
+              power: false,
+            },
+            startDate: "2023-02-22T16:15:00Z",
+            roomId: 32,
+            roomLatitude: 45.4788249919485,
+            roomLongitude: 9.227210008150676,
+            occupancies: {
+              // eslint-disable-next-line @typescript-eslint/naming-convention
+              "19:00": "FREE",
+              // eslint-disable-next-line @typescript-eslint/naming-convention
+              "19:35": "OCCUPIED",
+            },
+          })
         }}
         onSettings={() => {
           navigate("SettingsNav", {

src/api/rooms.ts

@@ -1,4 +1,4 @@
-import { HttpClient, RequestOptions } from "./HttpClient"
+import { AuthType, HttpClient, RequestOptions } from "./HttpClient"
 
 /* eslint-disable @typescript-eslint/naming-convention */
 export interface Rooms {
@@ -10,13 +10,32 @@ export interface Room {
   building: string
   power: boolean
   link: string
-  occupancyRate: number | undefined
+  occupancy_rate: number | null
+  occupancies: Occupancies
 }
+
+export type Occupancies = Record<`${number}:${number}`, "FREE" | "OCCUPIED">
+
 export interface RoomSimplified {
   roomId: number
   name: string
+  occupancies: Occupancies
   occupancyRate: number | undefined
 }
+
+export interface RoomDetails {
+  name: string
+  capacity: number
+  building: string
+  address: string
+  power: boolean
+}
+
+export interface OccupancyInfo {
+  room_id: number
+  occupancy_rate: null | number
+}
+
 const client = HttpClient.getInstance()
 
 /**
@@ -46,11 +65,36 @@ export const rooms = {
     return response.data.free_rooms
   },
 
+  async getOccupancyRate(roomId: number, options?: RequestOptions) {
+    const response = await client.poliNetworkInstance.get<OccupancyInfo>(
+      "/v1/rooms/" + roomId + "/occupancy",
+      {
+        ...options,
+      }
+    )
+    return response.data
+  },
+
+  async postOccupancyRate(
+    roomId: number,
+    rate: number,
+    options?: RequestOptions
+  ) {
+    const res = await client.poliNetworkInstance.post(
+      "/v1/rooms/" + roomId + "/occupancy",
+      {
+        ...options,
+      },
+      { params: { rate: rate }, authType: AuthType.POLINETWORK }
+    )
+    return res
+  },
+
   /**
    * Retrieves room details from PoliNetwork Server.
    */
   async getRoomInfo(roomId: number, options?: RequestOptions) {
-    const response = await client.poliNetworkInstance.get<Room>(
+    const response = await client.poliNetworkInstance.get<RoomDetails>(
       "/v1/rooms/" + roomId,
       {
         ...options,

src/components/ContentWrapperScroll.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react"
-import { ScrollView, View } from "react-native"
+import { ScrollView, View, ViewStyle } from "react-native"
 import { Text } from "components/Text"
 import { NavBar, NavbarProps } from "components/NavBar"
 import { usePalette } from "utils/colors"
@@ -21,7 +21,10 @@ export const ContentWrapperScroll: FC<{
    * Props for the navbar, see {@link NavBar}
    */
   navbarOptions?: NavbarProps
-  marginTop?: number
+
+  style?: ViewStyle
+
+  scrollViewStyle?: ViewStyle
 }> = props => {
   const { background, isLight, primary } = usePalette()
 
@@ -56,23 +59,26 @@ export const ContentWrapperScroll: FC<{
       )}
 
       <View
-        style={{
-          flex: 1,
-          backgroundColor: background,
-          marginTop: props.marginTop ?? 86,
+        style={[
+          {
+            flex: 1,
+            backgroundColor: background,
+            marginTop: 86,
 
-          borderTopLeftRadius: 30,
-          borderTopRightRadius: 30,
+            borderTopLeftRadius: 30,
+            borderTopRightRadius: 30,
 
-          shadowColor: "#000",
-          shadowOffset: {
-            width: 0,
-            height: 0,
+            shadowColor: "#000",
+            shadowOffset: {
+              width: 0,
+              height: 0,
+            },
+            shadowOpacity: 0.2,
+            shadowRadius: 8.3,
+            elevation: 13,
           },
-          shadowOpacity: 0.2,
-          shadowRadius: 8.3,
-          elevation: 13,
-        }}
+          props.style,
+        ]}
       >
         <View
           style={{
@@ -82,7 +88,13 @@ export const ContentWrapperScroll: FC<{
             overflow: "hidden",
           }}
         >
-          <ScrollView showsVerticalScrollIndicator={false}>
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={[
+              { overflow: "visible" },
+              props.scrollViewStyle,
+            ]}
+          >
             <View style={{ paddingBottom: 50 }}>{props.children}</View>
           </ScrollView>
         </View>

src/components/FreeClass/ClassDetails/CrowdSlider/CrowdSliderDynamic.tsx

@@ -0,0 +1,89 @@
+import React, { FC } from "react"
+import { View } from "react-native"
+import { usePalette } from "utils/colors"
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+} from "react-native-reanimated"
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from "react-native-gesture-handler"
+import { getCrowdStatus } from "utils/rooms"
+
+interface CrowdSliderDynamicProps {
+  usableWidth?: number
+  startingPos: number
+  onSlideEnd: (pos: number) => void
+}
+
+export const CrowdSliderDynamic: FC<CrowdSliderDynamicProps> = props => {
+  const { sliderBorderColor } = usePalette()
+
+  const wrapper = (pos: number, width: number) => {
+    const crowdStatus = getCrowdStatus(pos, width)
+    if (props.onSlideEnd) {
+      props.onSlideEnd(crowdStatus)
+    }
+  }
+  const circleWidth = 28
+
+  //320 is modal width, 52 is content padding
+  const usableWidth = props.usableWidth ?? 320 - 52 - circleWidth
+
+  const startingPos = ((props.startingPos - 1) / 4) * usableWidth
+
+  const position = useSharedValue(startingPos)
+  const lastPosition = useSharedValue(startingPos)
+  const panGesture = Gesture.Pan()
+    .onUpdate(e => {
+      const newPos = e.translationX + lastPosition.value
+      position.value = newPos
+      if (newPos < 0) {
+        position.value = 0
+      } else if (newPos > usableWidth) {
+        position.value = usableWidth
+      }
+    })
+    .onEnd(() => {
+      lastPosition.value = position.value
+      runOnJS(wrapper)(position.value, usableWidth)
+    })
+
+  const animatedPos = useAnimatedStyle(() => ({
+    transform: [{ translateX: position.value }],
+  }))
+
+  return (
+    <View style={{ width: "100%" }}>
+      <View
+        style={{
+          position: "absolute",
+          borderBottomWidth: 0.5,
+          width: "100%",
+          borderColor: sliderBorderColor,
+          marginTop: 15,
+          marginBottom: 18,
+        }}
+      />
+
+      <GestureHandlerRootView style={{ backgroundColor: "transparent" }}>
+        <GestureDetector gesture={panGesture}>
+          <Animated.View
+            style={[
+              {
+                width: 28,
+                height: 28,
+                backgroundColor: "#D9D9D9",
+                borderRadius: 14,
+              },
+              animatedPos,
+            ]}
+          />
+        </GestureDetector>
+      </GestureHandlerRootView>
+    </View>
+  )
+}

src/components/FreeClass/ClassDetails/CrowdSlider/CrowdSliderLabels.tsx

@@ -0,0 +1,49 @@
+import React, { FC } from "react"
+import { usePalette } from "utils/colors"
+import { BodyText } from "components/Text"
+import { View } from "react-native"
+
+export const CrowdSliderLabels: FC = () => {
+  const { labelsHighContrast } = usePalette()
+
+  return (
+    <View
+      style={{
+        width: "100%",
+      }}
+    >
+      <BodyText
+        style={{
+          fontSize: 13,
+          fontWeight: "600",
+          color: labelsHighContrast,
+          alignSelf: "flex-start",
+        }}
+      >
+        Basso
+      </BodyText>
+      <BodyText
+        style={{
+          fontSize: 13,
+          fontWeight: "600",
+          color: labelsHighContrast,
+          position: "absolute",
+          alignSelf: "center",
+        }}
+      >
+        Medio
+      </BodyText>
+      <BodyText
+        style={{
+          fontSize: 13,
+          fontWeight: "600",
+          color: labelsHighContrast,
+          position: "absolute",
+          alignSelf: "flex-end",
+        }}
+      >
+        Alto
+      </BodyText>
+    </View>
+  )
+}

src/components/FreeClass/ClassDetails/CrowdSlider/CrowdSliderStatic.tsx

@@ -0,0 +1,42 @@
+import React, { FC } from "react"
+import { Dimensions, View } from "react-native"
+import { usePalette } from "utils/colors"
+
+interface CrowdSliderStaticProps {
+  position: number
+}
+
+export const CrowdSliderStatic: FC<CrowdSliderStaticProps> = props => {
+  const { sliderBorderColor } = usePalette()
+
+  //56 is padding, 28 is circle diameter
+  const usableWidth = Dimensions.get("screen").width - 56 - 28
+
+  const startingPos = ((props.position - 1) / 4) * usableWidth
+
+  return (
+    <View>
+      <View
+        style={{
+          borderBottomWidth: 0.5,
+          width: "100%",
+          borderColor: sliderBorderColor,
+          marginTop: 15,
+          marginBottom: 18,
+        }}
+      >
+        <View
+          style={{
+            position: "absolute",
+            width: 28,
+            height: 28,
+            backgroundColor: "#D9D9D9",
+            borderRadius: 14,
+            top: -14,
+            transform: [{ translateX: startingPos }],
+          }}
+        />
+      </View>
+    </View>
+  )
+}