Self-service custom venue image display from WeChat interface

[rngadam]

• get mock up from designer @Danny002
• get users mockup feedback
• update calendar in booking to show mockup
  • booking report achieve
• update studio-web repository to fix upload image function
  • studio report achieve
• deploy to staging
• test on staging
• push to production
• 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]

Here's the mockup:

[rngadam]

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

[Danny002]

@rngadam The picture has been updated。

[rngadam]

@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. </THIS IS WRONG> --> 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]

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

[denglinwei]

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

[cliuless]

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

1. 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>;

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]

@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]

@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]

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

[denglinwei]

测试服务器测试，暂未发现问题，测试通过 @Danny002

[Danny002]

@ruoru 将高度调节成300px

[ruoru]

@Danny002 @denglinwei it`s changed and push to dev server, i`m connect dev server do a little test and it`s work well

[denglinwei]

@Danny002 测试服务器下测试，高度已经调节至200px。

测试通过

[ruoru]

@denglinwei
booking & studio already push to production server.

[rngadam]

@denglinwei validate in production? this was assigned to you 4 days ago.