Skip to content

Commit 38bff99

Browse files
chqy24gondzo
chqy24
authored and
gondzo
committed
challenge 30056173 -- SUPPORT FILE DOWNLOAD IN MISSION RESULTS
1 parent f0b356e commit 38bff99

File tree

10 files changed

+136
-54
lines changed

10 files changed

+136
-54
lines changed

‎src/components/CloudinaryGallery/CloudinaryGallery.jsx

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Lightbox from 'react-image-lightbox';
77
import config from '../../config';
88
import styles from './CloudinaryGallery.scss';
99
import CloudinaryGalleryItem from './CloudinaryGalleryItem';
10+
import Button from 'components/Button';
1011

1112
const CLOUDINARY_PREFIX = `http://res.cloudinary.com/${config.CLOUDINARY_ACCOUNT_NAME}/image/fetch/`;
1213

@@ -52,18 +53,35 @@ class CloudinaryGallery extends React.Component {
5253
return (
5354
<div styleName="cloudinary-gallery">
5455
{isOpen &&
55-
<Lightbox
56-
mainSrc={items[photoIndex].src}
57-
nextSrc={items[(photoIndex + 1) % items.length].src}
58-
prevSrc={items[(photoIndex + items.length - 1) % items.length].src}
59-
onCloseRequest={() => this.setState({isOpen: false})}
60-
onMovePrevRequest={() => this.setState({
61-
photoIndex: (photoIndex + items.length - 1) % items.length,
62-
})}
63-
onMoveNextRequest={() => this.setState({
64-
photoIndex: (photoIndex + 1) % items.length,
65-
})}
66-
/>
56+
<div>
57+
<Lightbox
58+
mainSrc={items[photoIndex].src}
59+
nextSrc={items[(photoIndex + 1) % items.length].src}
60+
prevSrc={items[(photoIndex + items.length - 1) % items.length].src}
61+
onCloseRequest={() => this.setState({isOpen: false})}
62+
onMovePrevRequest={() => this.setState({
63+
photoIndex: (photoIndex + items.length - 1) % items.length,
64+
})}
65+
onMoveNextRequest={() => this.setState({
66+
photoIndex: (photoIndex + 1) % items.length,
67+
})}
68+
/>
69+
{
70+
items[photoIndex].type !== 'image' ?
71+
(<div styleName="other-type">
72+
<div styleName="icon">
73+
<div styleName="type-name">{items[photoIndex].type}</div>
74+
</div>
75+
</div>) : null
76+
}
77+
<div styleName="bottom-group">
78+
<a href={items[photoIndex].src} download>
79+
<Button>
80+
Download
81+
</Button>
82+
</a>
83+
</div>
84+
</div>
6785
}
6886
<Slider {...sliderProps}>
6987
{_.chunk(resizedItems, count).map((slideItems, slideIndex) => (
@@ -73,6 +91,7 @@ class CloudinaryGallery extends React.Component {
7391
<div key={itemIndex} styleName="item">
7492
<CloudinaryGalleryItem
7593
{...item}
94+
height={height}
7695
onClick={() => {
7796
this.setState({
7897
isOpen: true,

‎src/components/CloudinaryGallery/CloudinaryGallery.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,3 +202,35 @@
202202
padding: 0 8px;
203203
width: calc(25%);
204204
}
205+
.other-type{
206+
.icon{
207+
position:fixed;
208+
top:0;
209+
bottom:0;
210+
right:0;
211+
left:0;
212+
margin:auto;
213+
display: flex;
214+
align-items:center;
215+
justify-content: center;
216+
border: 1px solid #888;
217+
width:240px;
218+
height: 240px;
219+
background-color: #FFF;
220+
z-index: 9999;
221+
text-transform: uppercase;
222+
.type-name{
223+
font-size: 32px;
224+
}
225+
}
226+
}
227+
.bottom-group{
228+
position:fixed;
229+
bottom:25px;
230+
left:50%;
231+
transform: translateX(-50%);
232+
z-index: 9999;
233+
display: flex;
234+
align-items: center;
235+
justify-content: center;
236+
}

‎src/components/CloudinaryGallery/CloudinaryGalleryItem.jsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,25 @@ import CSSModules from 'react-css-modules';
33
import ClickWithoutDrag from '../ClickWithoutDrag';
44
import styles from './CloudinaryGalleryItem.scss';
55

6-
export const CloudinaryGalleryItem = ({type, src, onClick}) => (
6+
export const CloudinaryGalleryItem = ({type, src, onClick, height}) => (
77
<ClickWithoutDrag onClick={onClick}>
88
{type === 'image' &&
99
<img src={src} alt="" styleName="image" />
1010
}
11+
{
12+
type !== 'image' &&
13+
<div styleName="other-type" style={{'min-height': height}}>
14+
<span>{type}</span>
15+
</div>
16+
}
1117
</ClickWithoutDrag>
1218
);
1319

1420
CloudinaryGalleryItem.propTypes = {
15-
type: PropTypes.oneOf(['image', 'video']).isRequired,
21+
type: PropTypes.string.isRequired,
1622
src: PropTypes.string.isRequired,
1723
onClick: PropTypes.func.isRequired,
24+
height: PropTypes.number.isRequired,
1825
};
1926

2027
export default CSSModules(CloudinaryGalleryItem, styles);

‎src/components/CloudinaryGallery/CloudinaryGalleryItem.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,19 @@
33
height: auto;
44
width: 100%;
55
}
6+
.other-type {
7+
border: 1px solid #888;
8+
height: 100%;
9+
width: 100%;
10+
text-align: center;
11+
margin-bottom: 5px;
12+
cursor: pointer;
13+
display: flex;
14+
align-items:center;
15+
justify-content: center;
16+
span{
17+
display: inline-block;
18+
font-size: 32px;
19+
text-transform: uppercase;
20+
}
21+
}

‎src/routes/EditData/components/UploadPicture/UploadPicture.jsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,24 +20,24 @@ export const UploadPicture = ({picture, removePicture}) => {
2020
return (
2121
<li styleName={cn('upload-picture', {loading: status !== 'uploaded'})}>
2222
{
23-
file != null && file.type === 'image'? (
24-
<img src={src} alt="uploaded" />
25-
): null
23+
file != null && file.type === 'image' ? (
24+
<img src={src} alt="uploaded" />
25+
) : null
2626
}
2727
{
28-
file != null && file.type === 'pdf'? (
29-
<a target="_blank" href={src} styleName='pdf'><span>PDF</span></a>
30-
): null
28+
file != null && file.type === 'pdf' ? (
29+
<a target="_blank" href={src} styleName='pdf'><span>PDF</span></a>
30+
) : null
3131
}
3232
{
33-
file === null || (file.type != 'image' && file.type != 'pdf')? (
34-
<a target="_blank" href={src} styleName='file'><span>{file.type}</span></a>
35-
): null
33+
file === null || (file.type != 'image' && file.type != 'pdf') ? (
34+
<a target="_blank" href={src} styleName='file'><span>{file.type}</span></a>
35+
) : null
3636
}
3737
{
3838
file != null ? (
3939
<span>{file.name}</span>
40-
): null
40+
) : null
4141
}
4242
<div styleName="loader">
4343
<Loader scale={0.25} />

‎src/routes/EditData/components/UploadedPictures/UploadedPictures.jsx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,16 @@ export const UploadedPictures = ({pictures, removePicture}) => (
2121

2222
{/* uploaded-pictures end */}
2323
<div styleName="actions">
24-
<Button color="black" className={styles.btnMargin} onClick={() => {
25-
browserHistory.push('/my-request');
26-
}}>Cancel</Button>
27-
<Button type="submit" color="blue" onClick={() => {
28-
browserHistory.push('/my-request');
29-
}}>Save</Button>
24+
<Button
25+
color="black" className={styles.btnMargin} onClick={() => {
26+
browserHistory.push('/my-request');
27+
}}
28+
>Cancel</Button>
29+
<Button
30+
type="submit" color="blue" onClick={() => {
31+
browserHistory.push('/my-request');
32+
}}
33+
>Save</Button>
3034
</div>
3135
{/* actions end */}
3236
</div>

‎src/routes/EditData/modules/EditData.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,21 +51,21 @@ export const load = (requestId) => async(dispatch) => {
5151

5252
// get file info based on file name
5353
const getFileInfo = (key) => {
54-
let fileName = key.split('/').pop();
55-
let fileExtension = fileName.split('.').pop();
54+
const fileName = key.split('/').pop();
55+
const fileExtension = fileName.split('.').pop();
5656

57-
let fileInfo = {
58-
'name': fileName
57+
const fileInfo = {
58+
name: fileName,
5959
};
6060

61-
if(fileExtension === 'jpeg' || fileExtension === 'jpg' || fileExtension === 'gif' || fileExtension === 'png' || fileExtension === 'bmp') {
62-
fileInfo['type'] = 'image';
63-
} else if(fileExtension === 'pdf') {
64-
fileInfo['type'] = 'pdf';
65-
} else if(fileExtension && fileExtension.length > 0) {
66-
fileInfo['type'] = fileExtension;
61+
if (fileExtension === 'jpeg' || fileExtension === 'jpg' || fileExtension === 'gif' || fileExtension === 'png' || fileExtension === 'bmp') {
62+
fileInfo.type = 'image';
63+
} else if (fileExtension === 'pdf') {
64+
fileInfo.type = 'pdf';
65+
} else if (fileExtension && fileExtension.length > 0) {
66+
fileInfo.type = fileExtension;
6767
} else {
68-
fileInfo['type'] = 'file';
68+
fileInfo.type = 'file';
6969
}
7070
return fileInfo;
7171
};

‎src/routes/MissionPlanner/components/MissionPlannerView.jsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,7 @@ export const getMarkerProps = (item, updateMissionItem) => {
6666

6767
export const MissionPlannerView = ({mission, updateMissionItem, addMissionItem, deleteMissionItem, loadNfz, noFlyZones}) => {
6868
const missionItemsExt = getMissionItemsExt(mission);
69-
const filteredMissionItemsExt = missionItemsExt.filter((item) => {
70-
return (item.command !== 203);
71-
});
69+
const filteredMissionItemsExt = missionItemsExt.filter((item) => (item.command !== 203));
7270
const markersExt = filteredMissionItemsExt.map((item) => getMarkerProps(item, updateMissionItem));
7371

7472
return (

‎src/routes/MyRequest/components/RequestItemControls/RequestItemControls.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ class RequestItemControls extends Component {
9595
this.setState({
9696
modal: {
9797
open: null,
98-
}
98+
},
9999
});
100100
this.setState({
101101
spinner: {
@@ -229,7 +229,7 @@ class RequestItemControls extends Component {
229229
}
230230

231231
gotoEditData() {
232-
browserHistory.push('/edit-data/'+this.props.requestId);
232+
browserHistory.push(`/edit-data/${this.props.requestId}`);
233233
}
234234

235235
render() {

‎src/routes/StatusDetail/modules/StatusDetail.js

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,21 @@ export const load = (id) => async(dispatch) => {
4545

4646
const galleryUrls = _(images)
4747
.reject((item) => _.endsWith(item.Key, '/')) // ignore folders
48-
.map((item) => ({
49-
type: 'image',
50-
src: s3.getSignedUrl('getObject', {
51-
Bucket: awsData.data.s3Bucket,
52-
Key: item.Key,
53-
}).split('?')[0], // strip signing params
54-
}))
48+
.map((item) => {
49+
let type = 'image';
50+
if (!/\.(png|jpg|jpeg)/.test(item.Key) && item.Key.match(/.+--.+\.(.+)$/)) {
51+
type = item.Key.match(/.+--.+\.(.+)$/)[1];
52+
}
53+
return {
54+
type,
55+
src: s3.getSignedUrl('getObject', {
56+
Bucket: awsData.data.s3Bucket,
57+
Key: item.Key,
58+
}).split('?')[0], // strip signing params
59+
};
60+
})
5561
.value();
56-
62+
5763

5864
const {mission, startingPoint, destinationPoint} = res;
5965

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy