From 74badced0821bf8d1ebdd5b19971675cf81fc33f Mon Sep 17 00:00:00 2001 From: futpib Date: Tue, 13 Nov 2018 06:01:58 +0300 Subject: [PATCH] Add cards --- actions/pulse.js | 2 + components/button/index.js | 1 + components/cards/index.js | 83 +++++++++++++++++++++++++++++++++ components/label/index.js | 1 + components/preferences/index.js | 1 + components/select/index.js | 7 +++ index.css | 42 +++++++++++++---- package.json | 2 +- renderer.js | 2 + store/pulse-middleware.js | 33 +++++++++---- yarn.lock | 8 ++-- 11 files changed, 159 insertions(+), 23 deletions(-) create mode 100644 components/cards/index.js create mode 100644 components/select/index.js diff --git a/actions/pulse.js b/actions/pulse.js index 8d55d52..e1bb3d8 100644 --- a/actions/pulse.js +++ b/actions/pulse.js @@ -31,5 +31,7 @@ module.exports = createActionCreators({ SET_SOURCE_CHANNEL_VOLUME: (index, channelIndex, volume) => ({ index, channelIndex, volume }), SET_SINK_INPUT_CHANNEL_VOLUME: (index, channelIndex, volume) => ({ index, channelIndex, volume }), SET_SOURCE_OUTPUT_CHANNEL_VOLUME: (index, channelIndex, volume) => ({ index, channelIndex, volume }), + + SET_CARD_PROFILE: (index, profileName) => ({ index, profileName }), }, }); diff --git a/components/button/index.js b/components/button/index.js index 5f97b9e..b1d8b27 100644 --- a/components/button/index.js +++ b/components/button/index.js @@ -2,6 +2,7 @@ const r = require('r-dom'); const Button = props => r.button({ + className: 'button', ...props, }, props.children); diff --git a/components/cards/index.js b/components/cards/index.js new file mode 100644 index 0000000..ab7f96c --- /dev/null +++ b/components/cards/index.js @@ -0,0 +1,83 @@ + +const { + values, + map, + path, +} = require('ramda'); + +const r = require('r-dom'); + +const { connect } = require('react-redux'); +const { bindActionCreators } = require('redux'); + +const { withStateHandlers } = require('recompose'); + +const { pulse: pulseActions } = require('../../actions'); + +const Button = require('../button'); +const Label = require('../label'); +const Select = require('../select'); + +const Preferences = withStateHandlers( + { + open: false, + }, + { + toggle: ({ open }) => () => ({ open: !open }), + }, +)(({ open, toggle, ...props }) => r.div({ + classSet: { + panel: true, + cards: true, + open, + }, +}, open ? [ + r.div([ + r(Button, { + style: { width: '100%' }, + onClick: toggle, + }, 'Close'), + ]), + + r.hr(), + + ...map(card => r(Label, { + title: card.name, + }, [ + r(Label, [ + path([ 'properties', 'device', 'description' ], card), + ]), + + r(Select, { + options: card.profiles, + optionValue: p => p.name, + optionText: p => p.description, + value: card.activeProfileName, + onChange: e => { + props.actions.setCardProfile(card.index, e.target.value); + }, + }), + ]), values(props.cards)), + + props.preferences.showDebugInfo && r.pre({ + style: { + fontSize: '0.75em', + }, + }, [ + JSON.stringify(props, null, 2), + ]), +] : [ + r(Button, { + onClick: toggle, + }, 'Cards'), +])); + +module.exports = connect( + state => ({ + cards: state.pulse.infos.cards, + preferences: state.preferences, + }), + dispatch => ({ + actions: bindActionCreators(pulseActions, dispatch), + }), +)(Preferences); diff --git a/components/label/index.js b/components/label/index.js index 3e85b33..d79d81d 100644 --- a/components/label/index.js +++ b/components/label/index.js @@ -3,4 +3,5 @@ const r = require('r-dom'); module.exports = props => r.label({ className: 'label', + ...props, }, props.children); diff --git a/components/preferences/index.js b/components/preferences/index.js index 5ed0e2d..c6113c3 100644 --- a/components/preferences/index.js +++ b/components/preferences/index.js @@ -26,6 +26,7 @@ const Preferences = withStateHandlers( }, )(({ open, toggle, ...props }) => r.div({ classSet: { + panel: true, preferences: true, open, }, diff --git a/components/select/index.js b/components/select/index.js new file mode 100644 index 0000000..4492c1b --- /dev/null +++ b/components/select/index.js @@ -0,0 +1,7 @@ + +const r = require('r-dom'); + +module.exports = ({ options, optionValue, optionText, ...props }) => r.select({ + className: 'select', + ...props, +}, options.map(o => r.option({ value: optionValue(o) }, optionText(o)))); diff --git a/index.css b/index.css index 8665fad..7330337 100644 --- a/index.css +++ b/index.css @@ -9,7 +9,7 @@ div { box-sizing: border-box; } -button { +.button { background: var(--themeBgColor); color: var(--themeTextColor); border: 1px solid var(--borders); @@ -18,16 +18,16 @@ button { padding: 8px; } -button:hover { +.button:hover { border-color: var(--themeSelectedBgColor); } -button:focus { +.button:focus { outline: none; border-color: var(--themeSelectedBgColor); } -button:active { +.button:active { background: var(--themeSelectedBgColor); position: relative; top: 1px; @@ -62,6 +62,21 @@ button:active { width: 64px; } +.select { + background: var(--themeUnfocusedBgColor); + color: var(--themeUnfocusedFgColor); + border: 1px solid var(--borders); + padding: 4px; + cursor: pointer; +} +.select:hover { + border-color: var(--themeSelectedBgColor); +} +.select:focus { + outline: none; + border-color: var(--themeSelectedBgColor); +} + .view-wrapper .graph { background: var(--themeBaseColor); } @@ -138,28 +153,35 @@ button:active { opacity: 1; } -.preferences { +.panel { position: absolute; - right: 0; top: 0; bottom: 0; padding: 1rem; overflow: auto; } -.preferences:not(.open) { +.cards { + left: 0; +} + +.preferences { + right: 0; +} + +.panel:not(.open) { pointer-events: none; } -.preferences:not(.open) > * { +.panel:not(.open) > * { pointer-events: initial; } -.preferences.open { +.panel.open { background: var(--themeBgColor); } -.preferences > hr { +.panel > hr { border: none; border-top: 1px solid var(--borders); } diff --git a/package.json b/package.json index fd05250..2659ce8 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ ] }, "dependencies": { - "@futpib/paclient": "^0.0.5", + "@futpib/paclient": "^0.0.7", "bluebird": "^3.5.3", "camelcase": "^5.0.0", "electron-store": "^2.0.0", diff --git a/renderer.js b/renderer.js index 1100fcd..4682713 100644 --- a/renderer.js +++ b/renderer.js @@ -11,6 +11,7 @@ const { Provider } = require('react-redux'); const createStore = require('./store'); const Graph = require('./components/graph'); +const Cards = require('./components/cards'); const Preferences = require('./components/preferences'); const theme = require('./utils/theme'); @@ -19,6 +20,7 @@ const Root = () => r(Provider, { store: createStore(), }, r(React.Fragment, [ r(Graph), + r(Cards), r(Preferences), ])); diff --git a/store/pulse-middleware.js b/store/pulse-middleware.js index 69f68b0..2580b46 100644 --- a/store/pulse-middleware.js +++ b/store/pulse-middleware.js @@ -51,17 +51,30 @@ function setSourceOutputChannelVolume(pa, store, index, channelIndex, volume, cb module.exports = store => { const pa = new PAClient(); - const getInfo = (type, index) => pa[getFnFromType(type)](index, (err, info) => { - if (err) { - if (err.message === 'No such entity') { - console.warn(err.message, type, index); + const getInfo = (type, index) => { + let method; + try { + method = getFnFromType(type); + } catch (error) { + if (error.message.startsWith('Unexpected type:')) { + console.warn(error); return; } - throw err; + throw error; } - info.type = info.type || type; - store.dispatch(pulseActions.info(info)); - }); + + pa[method](index, (err, info) => { + if (err) { + if (err.message === 'No such entity') { + console.warn(err.message, type, index); + return; + } + throw err; + } + info.type = info.type || type; + store.dispatch(pulseActions.info(info)); + }); + }; pa .on('ready', () => { @@ -178,6 +191,10 @@ module.exports = store => { return setSourceOutputChannelVolume(pa, store, index, channelIndex, volume, rethrow); }, + [pulseActions.setCardProfile]: (state, { payload: { index, profileName } }) => { + pa.setCardProfile(index, profileName, rethrow); + return state; + }, }, null); return next => action => { diff --git a/yarn.lock b/yarn.lock index 4f272c0..1ecdc01 100644 --- a/yarn.lock +++ b/yarn.lock @@ -84,10 +84,10 @@ dependencies: arrify "^1.0.1" -"@futpib/paclient@^0.0.5": - version "0.0.5" - resolved "https://registry.yarnpkg.com/@futpib/paclient/-/paclient-0.0.5.tgz#0de89ee7175e3de994bc298ddb1e461aa3007543" - integrity sha512-49jeRSEOXto3MntDj2Dzm4t7U9M0X41seqF+T/xwFRYk/pBUKdiXHuofNFJvn4rwM7P4BVjxU6fRpCOEAxH/VA== +"@futpib/paclient@^0.0.7": + version "0.0.7" + resolved "https://registry.yarnpkg.com/@futpib/paclient/-/paclient-0.0.7.tgz#d8957135ba81888f5e92812d8e9e4e8e1ebf935f" + integrity sha512-fjpJaS3LHuo+51/7g3dqpZBGO2wZtnLAWYKVk5CIBsfqn3345xJaEe0HfLpBxPAdpAHRTcTz5aWXlhOWsBClHA== "@ladjs/time-require@^0.1.4": version "0.1.4"