Self-service custom venue image display from WeChat interface

rngadam commented 7 years ago

[x] get mock up from designer @Danny002
[x] get users mockup feedback
[x] update calendar in booking to show mockup
- booking report achieve
[x] update studio-web repository to fix upload image function
- studio report achieve
[x] deploy to staging
[x] test on staging
[x] push to production
[x] final acceptance test

Reproduce:

Setup:

Select 课程模板
Under 图片 select +点击上传图片
Select an image
This should be the default for the venue

Test:

http://booking.theweflex.com/login (enter phone number and get code)
Select proposed venue on calendar

Result:

EXPECT: booking.theweflex.com/classes should show the venue picture
ACTUAL: no image shown

Danny002 commented 7 years ago

Here's the mockup:

booking端场馆图像显示

rngadam commented 7 years ago

@Danny002 you deleted the mockup? the image reference is broken. Can you update?

Danny002 commented 7 years ago

@rngadam The picture has been updated。

rngadam commented 7 years ago

@ruoru was having problems testing his local changes for the upload image using the dev API.

description of problem

This one is mainly a testing problem right now.

When we are testing, we are testing against our dev server API at IP 121.201.69.216 named dev.theweflex.com instead of production server api.getweflex.com (121.201.7.235)

To force the frontend to use the testing API, the practice is to change /etc/hosts to point api.getweflex.com to the IP of the testing server (121.201.69.216). This let's the frontend make queries to the dev server. --> stop doing this. To upload a file: * the frontend gets a token from our API for qiniu in which we embed the hostname to callback (self API) * the frontend uploads the file with the token to qiniu * the token tells qiniu which server to callback * qiniu does the callback --> THIS FAILS AND RETURNS 579 BECAUSE WRONG HOST * qiniu comes back to the frontend To fix it: we should use the right hostname for the API endpoint so it can get passed to qiniu correctly. ## example query Getting token from the current api (dev.theweflex.com OR api.getweflex.com) ``` 180.168.253.5 - - [12/Jul/2017:16:11:57 +0800] "GET /qiniu/uptoken?access_token=wn4pPLxL8x1ZwDSUxC0H1XLGBWrEYB8HPfSFMhkju7z1Aq7nHSilE2ycGQCRMAVO&endpoint=http://api.getweflex.com&venue_id=56e79b78da1c703f8fee30ed HTTP/1.1" 200 608 "http://localhost:8080/class/template" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36" "-" ``` Then client retrieves resource from the server ``` 180.168.253.5 - - [12/Jul/2017:16:11:57 +0800] "GET /api/external-resources/?access_token=wn4pPLxL8x1ZwDSUxC0H1XLGBWrEYB8HPfSFMhkju7z1Aq7nHSilE2ycGQCRMAVO&filter=%7B%22order%22%3A%22createdAt%20DESC%22%2C%22where%22%3A%7B%22venueId%22%3A%2256e79b78da1c703f8fee30ed%22%7D%7D HTTP/1.1" 200 1253 "http://localhost:8080/class/template" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36" "-" ``` ## where is the API server defined and how can we change it? ``` node_modules/@weflex/gian/lib/gateway.json ``` contains: ``` { "local": { "api": "http://localhost:8000", "app": "http://www.getweflex.com", "ws": "ws://localhost:8000" }, "dev": { "api": "http://dev.theweflex.com", "app": "http://dev.theweflex.com", "ws": "ws://dev.theweflex.com" }, "staging": { "api": "http://staging-api.getweflex.com", "app": "http://staging-api.getweflex.com", "ws": "ws://staging-api.getweflex.com" }, "prod": { "api": "http://api.getweflex.com", "app": "http://www.getweflex.com", "ws": "ws://api.getweflex.com" } } ``` to use this functionality, can change app/api.js as follows: ``` "use strict"; exports.client = require('@weflex/gian').getClient(process.env.NODE_ENV || 'prod', { onAuthFail: (err) => { window.location.href = '/login?msg=' + (err && err.message); } }); ``` and run using a NODE_ENV environment variable: ``` export NODE_ENV=dev npm run dev ``` ## TODO * change app/api.js * updated README.md * add some run scripts in package.json

rngadam commented 7 years ago

@denglinwei waiting on your test result. What is your test plan?

denglinwei commented 7 years ago

@ruoru 管理后台的数量最多只能上传5张，但现在没有限制，应该加上 booking的图片显示应该添加上规则，现在后台上传的图片在微信端显示比较模糊。

cliuless commented 7 years ago

Problem: @rngadam On the booking web, there is an issue with the html display The product calls for an image to be imported proportionally and cropped

This is the effect we want but when ran, even though the margin's default is 0 (see screenshot), there's still a margin appearing)


return <div style={{width:'100%', height: '200px',backgroundImage:`${item.uri}`, backgroundPosition:'center', backgroundSize:'100% auto'}}></div>;

![wechatimg5](https://user-images.githubusercontent.com/8423034/28405960-20306632-6d61-11e7-9617-541e94c6eca6.jpeg)

2. This can be run but stretches out the pictures

return < img src={item.uri} />;


This is the UI component address that ruoru is using
https://ant.design/components/carousel-cn/

Problem Solving:
* Should @ruoru use another UI component address (estimated 1 day time)
* Should he write his own UI component (estimated 2 -3 day time)

rngadam commented 7 years ago

@ruoru I don't agree that this needs a new component.

I see a lot of tweaking of the div style, but no attempts at changing the img tag style?

cliuless commented 7 years ago

@rngadam desired product is to have the pictures moving horizontal https://ant.design/components/carousel-cn/ (first example)

when using <div> has the pictures stacked vertical and margin effect
tried different browsers with the same "margin" effect when using <div>
tried the <img> tag with style set but the picture's format still came out disproportional

<Panel>
  <Carousel>
    {
      photos.map(item => {
         return <div style={{width:'100%', height: '200px',backgroundImage:`url(${item.uri})`, backgroundPosition:'center', backgroundSize:'100% auto'}}></div>;
      })
    }
  </Carousel>
</Panel>

official example from the carousel webpage:

function onChange(a, b, c) {
  console.log(a, b, c);
}

ReactDOM.render(
  <Carousel afterChange={onChange}>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
, mountNode);

denglinwei commented 7 years ago

在管理后台的课程模版上传了封面后，在微信端没有显示封面图片。需要更改 @ruoru default