Merge pull request #258 from seatsurfing/fix-254

Fix slider introduced with pr #254
seatsurfing · Aug 25, 2024 · ee80c8b · ee80c8b
2 parents 7e20521 + e9d60b1
commit ee80c8b
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 26 deletions.
diff --git a/booking-ui/package-lock.json b/booking-ui/package-lock.json
diff --git a/booking-ui/src/pages/search.tsx b/booking-ui/src/pages/search.tsx
@@ -19,9 +19,11 @@ import withReadyRouter from '@/components/withReadyRouter';
 import { Tooltip } from 'react-tooltip';
 
 interface State {
+  earliestEnterDate: Date;
   enter: Date
   leave: Date
   daySlider: number
+  daySliderDisabled: boolean
   locationId: string
   canSearch: boolean
   canSearchHint: string
@@ -72,10 +74,12 @@ class Search extends React.Component<Props, State> {
     this.enterChangeTimer = undefined;
     this.leaveChangeTimer = undefined;
     this.state = {
+      earliestEnterDate: new Date(),
       enter: new Date(),
       leave: new Date(),
       locationId: "",
-      daySlider: new Date().getDay(),
+      daySlider: 0,
+      daySliderDisabled: false,
       canSearch: false,
       canSearchHint: "",
       showBookingNames: false,
@@ -219,6 +223,7 @@ class Search extends React.Component<Props, State> {
     }
 
     this.setState({
+      earliestEnterDate: enter,
       enter: enter,
       leave: leave
     });
@@ -324,14 +329,20 @@ class Search extends React.Component<Props, State> {
   }
 
   changeEnterDay = (value: number) => {
+    let enter = new Date(this.state.earliestEnterDate.valueOf());
+    enter.setDate(enter.getDate() + value);
+    if (Formatting.getDayValue(enter) > Formatting.getDayValue(this.state.earliestEnterDate)) {
+      enter.setHours(this.state.prefWorkdayStart, 0, 0, 0);
+    }
+    let leave = new Date(enter.valueOf());
+    leave.setHours(this.state.prefWorkdayEnd, 0, 0, 0);
+    this.setEnterDate(enter);
+    this.setLeaveDate(leave);
     this.setState({ daySlider: value });
-    let delta = value - this.state.enter.getDay();
-    let newEnter = new Date(this.state.enter);
-    newEnter.setDate(newEnter.getDate() + delta);
-    this.setEnterDate( newEnter );
   }
 
   setEnterDate = (value: Date | [Date | null, Date | null]) => {
+    console.log("New enter date: " + value);
     let dateChangedCb = () => {
       this.updateCanSearch().then(() => {
         if (!this.state.canSearch) {
@@ -358,10 +369,13 @@ class Search extends React.Component<Props, State> {
       }
       let leave = new Date();
       leave.setTime(date.getTime() + diff);
+      const daySlider = Formatting.getDayDiff(date, this.state.earliestEnterDate);
+      const daySliderDisabled = (daySlider > RuntimeConfig.INFOS.maxDaysInAdvance) || (daySlider < 0);
       this.setState({
         enter: date,
-        daySlider: date.getDay(),
-        leave: leave
+        leave: leave,
+        daySlider: daySlider,
+        daySliderDisabled: daySliderDisabled
       }, () => dateChangedCb());
     };
     if (typeof window !== 'undefined') {
@@ -715,7 +729,7 @@ class Search extends React.Component<Props, State> {
             <Form.Group as={Row} className="margin-top-10">
               <Col xs="2"><WeekIcon title={this.props.t("week")} color={'#555'} height="20px" width="20px" /></Col>
               <Col xs="10">
-                <Form.Range disabled={this.state.listView} list="weekDays" min={Math.min(...this.state.prefWorkdays)} max={Math.max(...this.state.prefWorkdays)} step="1" value={this.state.daySlider} onChange={(event) => this.changeEnterDay(window.parseInt(event.target.value))} />
+                <Form.Range disabled={this.state.daySliderDisabled} list="weekDays" min={0} max={RuntimeConfig.INFOS.maxDaysInAdvance} step="1" value={this.state.daySlider} onChange={(event) => this.changeEnterDay(window.parseInt(event.target.value))} />
               </Col>
             </Form.Group>
             <Form.Group as={Row} className="margin-top-10">

diff --git a/commons/ts/package-lock.json b/commons/ts/package-lock.json
diff --git a/commons/ts/package.json b/commons/ts/package.json
@@ -7,10 +7,10 @@
   },
   "dependencies": {
     "async-mutex": "^0.5.0",
-    "i18next": "^23.11.5"
+    "i18next": "^23.14.0"
   },
   "devDependencies": {
-    "typescript": "~5.5.3"
+    "typescript": "~5.5.4"
   },
   "private": true,
   "files": [

diff --git a/commons/ts/src/util/Formatting.ts b/commons/ts/src/util/Formatting.ts
@@ -61,6 +61,14 @@ export default class Formatting {
         return parseInt(s);
     }
 
+    static getDayDiff(date1: Date, date2: Date): number {
+        const d1 = new Date(date1.valueOf());
+        d1.setHours(0, 0, 0, 0);
+        const d2 = new Date(date2.valueOf());
+        d2.setHours(0, 0, 0, 0);
+        return Math.floor((d1.getTime() - d2.getTime()) / (1000 * 60 * 60 * 24));
+    }
+
     static getISO8601(date: Date): string {
         let s = date.getFullYear().toString().padStart(4, "0") + "-" + (date.getMonth()+1).toString().padStart(2, "0") + "-" + date.getDate().toString().padStart(2, "0");
         return s;