haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 16:31:13 +00:00
Code Issues Releases Wiki Activity

refactor: location display

Browse Source
This commit is contained in:
杨国璇
2024-10-25 11:03:31 +08:00
parent a362b786a8
commit 16267f0f65
6 changed files with 43 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/dirent-detail/dirent-details/file-details/index.js
View File

@@ -14,7 +14,6 @@ import { MetadataDetails, useMetadata } from '../../../../metadata';
import ObjectUtils from '../../../../metadata/utils/object-utils';
import { getCellValueByColumn, getDateDisplayString, decimalToExposureTime } from '../../../../metadata/utils/cell';
import Collapse from './collapse';
import Location from './location';
import './index.css';
@@ -126,7 +125,6 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
if (Utils.imageCheck(dirent.name) || Utils.videoCheck(dirent.name)) {
const fileDetails = getCellValueByColumn(record, { key: PRIVATE_COLUMN_KEY.FILE_DETAILS });
const fileDetailsJson = JSON.parse(fileDetails?.slice(9, -7) || '{}');
const fileLocation = getCellValueByColumn(record, { key: PRIVATE_COLUMN_KEY.LOCATION });
component = (
<>
@@ -142,7 +140,6 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
</div>
);
})}
{record && (<Location position={fileLocation} />)}
</Collapse>
</>
);

12
frontend/src/components/dirent-detail/dirent-details/file-details/location/index.css
View File

@@ -1,12 +0,0 @@
.dirent-detail-item-value-map {
height: 100px;
width: 100%;
}
.dirent-detail-item-value-map.error-message {
word-break: break-word;
padding: 8px;
margin: auto;
height: auto;
border-radius: 3px;
}

209
frontend/src/components/dirent-detail/dirent-details/file-details/location/index.js
View File

@@ -1,209 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { initMapInfo, loadMapSource } from '../../../../../utils/map-utils';
import { MAP_TYPE, DOMESTIC_MAP_TYPE } from '../../../../../constants';
import Loading from '../../../../loading';
import { gettext, baiduMapKey, googleMapKey, googleMapId } from '../../../../../utils/constants';
import { GEOLOCATION_FORMAT } from '../../../../../metadata/constants';
import { getGeolocationDisplayString } from '../../../../../metadata/utils/cell';
import { isValidPosition } from '../../../../../metadata/utils/validate';
import toaster from '../../../../toast';
import ObjectUtils from '../../../../../metadata/utils/object-utils';
import './index.css';
class Location extends React.Component {
constructor(props) {
super(props);
const { type, key } = initMapInfo({ baiduMapKey, googleMapKey });
this.mapType = type;
this.mapKey = key;
this.map = null;
this.currentPosition = {};
this.state = {
address: '',
isLoading: true,
};
}
componentDidMount() {
this.initMap(this.props.position);
}
UNSAFE_componentWillReceiveProps(nextProps) {
const { position } = nextProps;
if (!ObjectUtils.isSameObject(position, this.props.position)) {
this.initMap(position);
}
}
componentWillUnmount() {
if (this.map && DOMESTIC_MAP_TYPE.includes(this.mapType)) {
this.mineMapMarker = null;
} else if (this.map && this.mapType === MAP_TYPE.G_MAP) {
this.googleMarker = null;
}
this.map = null;
}
initMap = (position) => {
this.setState({ isLoading: true });
if (this.mapType === MAP_TYPE.B_MAP) {
if (!window.BMap) {
window.renderBaiduMap = () => this.renderBaiduMap(position);
loadMapSource(this.mapType, this.mapKey);
} else {
this.renderBaiduMap(position);
}
return;
}
if (this.mapType === MAP_TYPE.G_MAP) {
if (!window.google) {
window.renderGoogleMap = () => this.renderGoogleMap(position);
loadMapSource(this.mapType, this.mapKey);
} else {
this.renderGoogleMap(position);
}
return;
}
this.setState({ isLoading: false });
};
addMarkerByPosition = (lng, lat) => {
if (this.mapType === MAP_TYPE.B_MAP) {
let point = new window.BMap.Point(lng, lat);
const marker = new window.BMap.Marker(point, { offset: new window.BMap.Size(-2, -5) });
this.map && this.map.clearOverlays();
this.map && this.map.addOverlay(marker);
return;
}
if (this.mapType === MAP_TYPE.G_MAP) {
if (!this.googleMarker) {
this.googleMarker = new window.google.maps.marker.AdvancedMarkerElement({
position: { lng, lat },
map: this.map,
});
return;
}
this.googleMarker.setPosition({ lng, lat });
return;
}
if (this.mapType === MAP_TYPE.M_MAP) {
if (!this.mineMapMarker) {
this.mineMapMarker = new window.minemap.Marker({
draggable: false,
anchor: 'top-left',
color: 'red',
rotation: 0,
pitchAlignment: 'map',
rotationAlignment: 'map',
scale: 0.8
}).setLngLat({ lng, lat }).addTo(this.map);
return;
}
this.mineMapMarker.setLngLat({ lng, lat });
}
};
renderBaiduMap = (position = {}) => {
this.setState({ isLoading: false }, () => {
if (!window.BMap.Map) return;
const { lng, lat } = position || {};
if (!isValidPosition(lng, lat)) return;
this.map = new window.BMap.Map('sf-geolocation-map-container', { enableMapClick: false });
this.addMarkerByPosition(lng, lat);
const point = new window.BMap.Point(lng, lat);
this.map.centerAndZoom(point, 14);
this.map.enableScrollWheelZoom(true);
const geocoder = new window.BMap.Geocoder();
geocoder.getLocation(point, (res) => {
const addressRes = res.addressComponents;
const addressArray = [addressRes.province, addressRes.city, addressRes.district, addressRes.street, addressRes.streetNumber];
const address = addressArray.filter(item => item).join('');
this.setState({ address });
});
});
};
renderGoogleMap = (position) => {
this.setState({ isLoading: false }, () => {
if (!window.google.maps.Map) return;
const { lng, lat } = position || {};
const isValid = isValidPosition(lng, lat);
if (!isValid) return;
this.map = new window.google.maps.Map(this.ref, {
zoom: 14,
center: position,
mapId: googleMapId,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false
});
this.addMarkerByPosition(lng, lat);
this.map.setCenter(position);
var geocoder = new window.google.maps.Geocoder();
var latLng = new window.google.maps.LatLng(lat, lng);
geocoder.geocode({ 'location': latLng }, (results, status) => {
if (status === 'OK') {
if (results[0]) {
var address = results[0].formatted_address;
this.setState({ address });
} else {
toaster.warning(gettext('No address found for the given coordinates.'));
}
}
});
});
};
render() {
const { isLoading, address } = this.state;
const { position } = this.props;
const isValid = isValidPosition(position?.lng, position?.lat);
return (
<>
<div className="dirent-detail-item sf-metadata-property-detail-capture-information-item" key={'location'}>
<div className="dirent-detail-item-name">{gettext('Location')}</div>
<div className="dirent-detail-item-value" placeholder={gettext('Empty')}>
{isValid && (
<>
{!isLoading && this.mapType && address && (
<>
<span>{address}</span>
<br />
</>
)}
<span>{getGeolocationDisplayString(position, { geo_format: GEOLOCATION_FORMAT.LNG_LAT })}</span>
</>
)}
</div>
</div>
{isLoading ? (<Loading />) : (
<>
{this.mapType ? (
<div className="dirent-detail-item-value-map">
{!isLoading && (<div className={classnames('w-100 h-100', { 'd-none': !isValid })} ref={ref => this.ref = ref} id="sf-geolocation-map-container"></div>)}
</div>
) : (
<div className="dirent-detail-item-value-map alert-danger error-message d-flex justify-content-center">
{gettext('The map plugin is not properly configured. Contact the administrator.')}
</div>
)}
</>
)}
</>
);
}
}
Location.propTypes = {
location: PropTypes.object,
};
export default Location;