diff options
author | Andy Ladjadj <andy.ladjadj@adevinta.com> | 2020-04-17 20:48:33 +0200 |
---|---|---|
committer | Monty Taylor <mordred@inaugust.com> | 2020-05-20 16:54:54 -0500 |
commit | 86eba8b05d5a3f913ba7e255565e8cd5d20fea35 (patch) | |
tree | 8c2a498836c8bab1db16808a5e4e300ee9afac42 /web/src/containers/timezone/SelectTz.jsx | |
parent | 349991c5686b47c72fed1cd8123f8caf72ac422e (diff) | |
download | zuul-86eba8b05d5a3f913ba7e255565e8cd5d20fea35.tar.gz |
Add new timezone selector in web interface
- the default value keep UTC
- the timezone is saved in cookie in zuul_timezone_string
- the render format is YYYY-MM-DD HH:mm:ss
Change-Id: Ib4ac2af4194ac2722c5574577661f4ddda8cc398
Diffstat (limited to 'web/src/containers/timezone/SelectTz.jsx')
-rw-r--r-- | web/src/containers/timezone/SelectTz.jsx | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/web/src/containers/timezone/SelectTz.jsx b/web/src/containers/timezone/SelectTz.jsx new file mode 100644 index 000000000..78092d2ab --- /dev/null +++ b/web/src/containers/timezone/SelectTz.jsx @@ -0,0 +1,142 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may +// not use this file except in compliance with the License. You may obtain +// a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations +// under the License. + +import PropTypes from 'prop-types' +import React from 'react' +import Select from 'react-select' +import moment from 'moment-timezone' +import { Icon } from 'patternfly-react' +import { connect } from 'react-redux' +import { setTimezoneAction } from '../../actions/timezone' + +class SelectTz extends React.Component { + static propTypes = { + dispatch: PropTypes.func + } + + state = { + availableTz: moment.tz.names().map(item => ({value: item, label: item})), + defaultValue: {value: 'UTC', label: 'UTC'} + } + + componentDidMount () { + this.loadState() + } + + handleChange = (selectedTz) => { + const tz = selectedTz.value + + this.setCookie('zuul_tz_string', tz) + this.updateState(tz) + } + + setCookie (name, value) { + document.cookie = name + '=' + value + '; path=/' + } + + loadState = () => { + function readCookie (name, defaultValue) { + let nameEQ = name + '=' + let ca = document.cookie.split(';') + for (let i = 0; i < ca.length; i++) { + let c = ca[i] + while (c.charAt(0) === ' ') { + c = c.substring(1, c.length) + } + if (c.indexOf(nameEQ) === 0) { + return c.substring(nameEQ.length, c.length) + } + } + return defaultValue + } + let tz = readCookie('zuul_tz_string', '') + if (tz) { + this.updateState(tz) + } + } + + updateState = (tz) => { + + this.setState({ + currentValue: {value: tz, label: tz} + }) + + let timezoneAction = setTimezoneAction(tz) + this.props.dispatch(timezoneAction) + } + + render() { + const textColor = '#d1d1d1' + const containerStyles= { + border: 'solid #2b2b2b', + borderWidth: '0 0 0 1px', + cursor: 'pointer', + display: 'initial', + fontSize: '11px', + padding: '6px' + } + const iconStyles = { + padding: '5px' + } + const customStyles = { + container: () => ({ + display: 'inline-block', + }), + control: () => ({ + width: 'auto', + display: 'flex' + }), + singleValue: () => ({ + color: textColor, + }), + input: (provided) => ({ + ...provided, + color: textColor + }), + dropdownIndicator:(provided) => ({ + ...provided, + padding: '3px' + }), + indicatorSeparator: () => {}, + menu: (provided) => ({ + ...provided, + width: 'auto', + right: '0', + top: '22px', + }) + } + return ( + <div style={containerStyles}> + <Icon style={iconStyles} type="fa" name="clock-o" /> + <Select + styles={customStyles} + value={this.state.currentValue} + onChange={this.handleChange} + options={this.state.availableTz} + noOptionsMessage={() => 'No api found'} + placeholder={'Select Tz'} + defaultValue={this.state.defaultValue} + theme={(theme) => ({ + ...theme, + borderRadius: 0, + spacing: { + ...theme.spacing, + baseUnit: 2, + }, + })} + /> + </div> + ) + } +} + +export default connect()(SelectTz) |