Merge branch 'dev' into 2.x

Author: webbpinner

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sealog-client-vehicle",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "license": "MIT",
   "description": "Sealog Client intended for use with vehicles deployed from research vessels such as ROVs, AUVs and HOVs",
   "bugs": {
@@ -29,10 +29,10 @@
   ],
   "dependencies": {
     "@hapi/nes": "^13.0.1",
-    "axios": "^1.7.5",
+    "axios": "^1.7.7",
     "bootstrap": "^4.6.2",
     "connected-react-router": "^6.9.3",
-    "filepond": "^4.31.2",
+    "filepond": "^4.31.3",
     "highcharts": "^9.3.3",
     "highcharts-react-official": "^3.2.1",
     "jquery": "^3.7.1",
@@ -69,23 +69,23 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/runtime": "^7.25.6",
-    "@fontsource/roboto": "^5.0.14",
+    "@fontsource/roboto": "^5.1.0",
     "@fortawesome/fontawesome-common-types": "^6.5.2",
     "@fortawesome/fontawesome-free": "^6.6.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "babel-loader": "^9.1.3",
+    "babel-loader": "^9.2.1",
     "concurrently": "^8.2.2",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-redux": "^4.1.0",
+    "eslint-plugin-react-redux": "^4.2.0",
     "html-webpack-plugin": "^5.6.0",
     "mini-css-extract-plugin": "^2.9.1",
     "prettier": "3.2.5",
@@ -94,6 +94,6 @@
     "style-loader": "^4.0.0",
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-dev-server": "^5.1.0"
   }
 }

package.json

@@ -908,6 +908,7 @@ export const updateLowering = (formProps) => {
   let fields = { ...formProps }
   delete fields.id
   delete fields.lowering_access_list
+  delete fields.lowering_additional_meta.lowering_files
 
   return async (dispatch) => {
     const response = await update_lowering(fields, formProps.id)

src/actions/index.js

@@ -127,7 +127,7 @@ class EventTemplates extends Component {
         activeSystemPage: 1
       })
     } else {
-      this.setState({ filteredSystemEventTemplates: null })
+      this.setState({ filteredSystemTemplates: null })
     }
     this.handlePageSelect(1)
   }

src/components/event_templates.js

@@ -8,7 +8,6 @@ import LoweringGalleryTab from './lowering_gallery_tab'
 import LoweringModeDropdown from './lowering_mode_dropdown'
 import { get_event_aux_data_by_lowering } from '../api'
 import { IMAGES_AUX_DATA_SOURCES } from '../client_settings'
-import { getImageUrl } from '../utils'
 import { _Lowerings_ } from '../vocab'
 import * as mapDispatchToProps from '../actions'
 
@@ -22,6 +21,8 @@ class LoweringGallery extends Component {
       maxImagesPerPage: 16
     }
 
+    this.formRef = React.createRef() // Reference to the slider
+
     this.handleImageCountChange = this.handleImageCountChange.bind(this)
     this.handleLoweringModeSelect = this.handleLoweringModeSelect.bind(this)
   }
@@ -64,7 +65,7 @@ class LoweringGallery extends Component {
 
         image_data[data.data_array[i].data_value].images.push({
           event_id: data.event_id,
-          filepath: getImageUrl(data.data_array[i + 1].data_value)
+          filepath: data.data_array[i + 1].data_value
         })
       }
     })
@@ -74,18 +75,23 @@ class LoweringGallery extends Component {
 
   handleImageCountChange(event) {
     this.setState({ maxImagesPerPage: parseInt(event.target.value) })
+    event.currentTarget.blur()
   }
 
   handleLoweringModeSelect(mode) {
-    if (mode === 'Gallery') {
-      this.props.gotoLoweringGallery(this.props.match.params.id)
-    } else if (mode === 'Map') {
+    if (mode === 'Map') {
       this.props.gotoLoweringMap(this.props.match.params.id)
     } else if (mode === 'Replay') {
       this.props.gotoLoweringReplay(this.props.match.params.id)
     }
   }
 
+  handleTabSelect(key, event) {
+    if (event) {
+      event.currentTarget.blur()
+    }
+  }
+
   renderGalleries() {
     let galleries = []
     for (const [key, value] of Object.entries(this.state.aux_data)) {
@@ -97,7 +103,15 @@ class LoweringGallery extends Component {
     }
 
     return galleries.length ? (
-      <Tabs className='category-tab' variant='pills' transition={false} id='galleries' mountOnEnter={true} unmountOnExit={true}>
+      <Tabs
+        className='category-tab'
+        variant='pills'
+        transition={false}
+        id='galleries'
+        mountOnEnter={true}
+        unmountOnExit={true}
+        onSelect={this.handleTabSelect}
+      >
         {galleries}
       </Tabs>
     ) : (
@@ -143,9 +157,9 @@ class LoweringGallery extends Component {
             <FontAwesomeIcon icon='chevron-right' fixedWidth />
             <span className='text-warning'>{this.props.lowering.lowering_id || 'Loading...'}</span>
             <FontAwesomeIcon icon='chevron-right' fixedWidth />
-            <LoweringModeDropdown onClick={this.handleLoweringModeSelect} active_mode={'Gallery'} modes={['Replay', 'Review', 'Map']} />
+            <LoweringModeDropdown onClick={this.handleLoweringModeSelect} active_mode={'Gallery'} modes={['Replay', 'Map']} />
           </ButtonToolbar>
-          <span className='float-right'>
+          <span className='float-right' ref={this.formRef}>
             <Form style={{ marginTop: '-4px' }} className='float-right' inline>
               <Form.Group controlId='selectMaxImagesPerPage'>
                 <Form.Control size='sm' as='select' onChange={this.handleImageCountChange}>
@@ -170,7 +184,6 @@ LoweringGallery.propTypes = {
   event: PropTypes.object.isRequired,
   eventUpdateLoweringReplay: PropTypes.func.isRequired,
   gotoCruiseMenu: PropTypes.func.isRequired,
-  gotoLoweringGallery: PropTypes.func.isRequired,
   gotoLoweringMap: PropTypes.func.isRequired,
   gotoLoweringReplay: PropTypes.func.isRequired,
   initLowering: PropTypes.func.isRequired,

src/components/lowering_gallery.js

@@ -3,40 +3,67 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Row, Col, Card, Image } from 'react-bootstrap'
 import CustomPagination from './custom_pagination'
-import { handleMissingImage } from '../utils'
+import { getImageUrl, handleMissingImage } from '../utils'
 import * as mapDispatchToProps from '../actions'
 
 class LoweringGalleryTab extends Component {
   constructor(props) {
     super(props)
 
-    this.divFocus = null
-
     this.state = {
-      activePage: 1
+      activePage: 1,
+      selectedPage: 1,
+      paginationTimer: null
     }
 
     this.handlePageSelect = this.handlePageSelect.bind(this)
-    this.handleKeyPress = this.handleKeyPress.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
   }
 
   componentDidMount() {
-    this.divFocus.focus()
+    document.addEventListener('keydown', this.handleKeyDown)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.maxImagesPerPage !== this.props.maxImagesPerPage) {
+      const currentFirstImage = (this.state.activePage - 1) * prevProps.maxImagesPerPage + 1
+      this.handlePageSelect(Math.ceil(currentFirstImage / this.props.maxImagesPerPage))
+    }
   }
 
-  handleKeyPress(event) {
+  componentWillUnmount() {
+    if (this.state.paginationTimer) {
+      clearInterval(this.state.paginationTimer)
+    }
+
+    document.removeEventListener('keydown', this.handleKeyDown)
+  }
+
+  handleKeyDown(event) {
+    if (['INPUT', 'SELECT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
+      return
+    }
+
     if (
       event.key === 'ArrowRight' &&
-      this.state.activePage < Math.ceil(this.props.imagesData.images.length / this.props.maxImagesPerPage)
+      this.state.selectedPage < Math.ceil(this.props.imagesData.images.length / this.props.maxImagesPerPage)
     ) {
-      this.handlePageSelect(this.state.activePage + 1)
-    } else if (event.key === 'ArrowLeft' && this.state.activePage > 1) {
-      this.handlePageSelect(this.state.activePage - 1)
+      this.handlePageSelect(this.state.selectedPage + 1)
+    } else if (event.key === 'ArrowLeft' && this.state.selectedPage > 1) {
+      this.handlePageSelect(this.state.selectedPage - 1)
     }
   }
 
-  handlePageSelect(eventKey) {
-    this.setState({ activePage: eventKey })
+  handlePageSelect(page) {
+    this.setState({ selectedPage: page })
+    clearTimeout(this.state.paginationTimer)
+    this.setState({
+      paginationTimer: setTimeout(() => {
+        this.setState({
+          activePage: this.state.selectedPage
+        })
+      }, 250)
+    })
   }
 
   handleEventShowDetailsModal(event_id) {
@@ -49,7 +76,7 @@ class LoweringGalleryTab extends Component {
   renderImage(source, filepath, onclickFunc = null) {
     return (
       <Card className='event-image-data-card' id={`image_${source}`}>
-        <Image fluid onClick={onclickFunc} onError={handleMissingImage} src={filepath} />
+        <Image fluid onClick={onclickFunc} onError={handleMissingImage} src={getImageUrl(filepath)} />
       </Card>
     )
   }
@@ -72,20 +99,13 @@ class LoweringGalleryTab extends Component {
   render() {
     return (
       <React.Fragment>
-        <Row
-          key={`${this.props.imagesSource}_images`}
-          tabIndex='-1'
-          onKeyDown={this.handleKeyPress}
-          ref={(div) => {
-            this.divFocus = div
-          }}
-        >
+        <Row key={`${this.props.imagesSource}_images`} tabIndex='-1'>
           {this.renderGallery(this.props.imagesSource, this.props.imagesData)}
         </Row>
         <Row key={`${this.props.imagesSource}_images_pagination`}>
           <CustomPagination
             className='mt-2'
-            page={this.state.activePage}
+            page={this.state.selectedPage}
             count={this.props.imagesData.images ? this.props.imagesData.images.length : 0}
             pageSelectFunc={this.handlePageSelect}
             maxPerPage={this.props.maxImagesPerPage}