Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 1 | import '@material/web/fab/fab.js'; |
| 2 | import './components/List.js'; |
| 3 | import './components/AddDialog.js'; |
Adrià Vilanova Martínez | 8803b6c | 2022-10-17 00:36:38 +0200 | [diff] [blame^] | 4 | import './components/WorkflowDialog.js'; |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 5 | |
| 6 | import {css, html, LitElement} from 'lit'; |
| 7 | import {createRef, ref} from 'lit/directives/ref.js'; |
| 8 | |
| 9 | import {SHARED_MD3_STYLES} from '../../common/styles/md3.js'; |
Adrià Vilanova Martínez | 7f1e8ea | 2022-10-14 15:50:11 +0200 | [diff] [blame] | 10 | import {default as WorkflowsStorage, kWorkflowsDataKey} from '../workflowsStorage.js'; |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 11 | |
| 12 | export default class WFApp extends LitElement { |
| 13 | static styles = [ |
| 14 | SHARED_MD3_STYLES, |
| 15 | css` |
| 16 | :host { |
| 17 | font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', |
| 18 | Helvetica, Arial, sans-serif, 'Apple Color Emoji', |
| 19 | 'Segoe UI Emoji', 'Segoe UI Symbol'!important; |
| 20 | |
| 21 | display: block; |
| 22 | max-width: 1024px; |
| 23 | margin: auto; |
| 24 | position: relative; |
| 25 | } |
| 26 | |
| 27 | md-fab { |
| 28 | position: fixed; |
| 29 | bottom: 2em; |
| 30 | right: 2em; |
| 31 | } |
| 32 | `, |
| 33 | ]; |
| 34 | |
| 35 | addFabRef = createRef(); |
Adrià Vilanova Martínez | 8803b6c | 2022-10-17 00:36:38 +0200 | [diff] [blame^] | 36 | addDialog = createRef(); |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 37 | |
Adrià Vilanova Martínez | 7f1e8ea | 2022-10-14 15:50:11 +0200 | [diff] [blame] | 38 | constructor() { |
| 39 | super(); |
| 40 | this._workflows = undefined; |
| 41 | this._updateWorkflows(); |
| 42 | chrome.storage.onChanged.addListener((changes, areaName) => { |
| 43 | if (areaName == 'local' && changes[kWorkflowsDataKey]) |
| 44 | this._updateWorkflows(); |
| 45 | }); |
| 46 | } |
| 47 | |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 48 | render() { |
| 49 | return html` |
| 50 | <h1>Workflows</h1> |
Adrià Vilanova Martínez | 7f1e8ea | 2022-10-14 15:50:11 +0200 | [diff] [blame] | 51 | <p>Workflows allow you to run a customized list of actions on a thread easily.</p> |
| 52 | <wf-list .workflows=${this._workflows}></wf-list> |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 53 | <md-fab ${ref(this.addFabRef)} |
| 54 | icon="add" |
| 55 | @click=${this._showAddDialog}> |
| 56 | </md-fab> |
Adrià Vilanova Martínez | 8803b6c | 2022-10-17 00:36:38 +0200 | [diff] [blame^] | 57 | <wf-add-dialog ${ref(this.addDialog)}> |
| 58 | </wf-add-dialog> |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 59 | `; |
| 60 | } |
| 61 | |
Adrià Vilanova Martínez | 7f1e8ea | 2022-10-14 15:50:11 +0200 | [diff] [blame] | 62 | _updateWorkflows() { |
| 63 | WorkflowsStorage.getAll(/* asProtobuf = */ true).then(workflows => { |
| 64 | this._workflows = workflows; |
| 65 | this.requestUpdate(); |
| 66 | }); |
| 67 | } |
| 68 | |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 69 | _showAddDialog() { |
Adrià Vilanova Martínez | 8803b6c | 2022-10-17 00:36:38 +0200 | [diff] [blame^] | 70 | this.addDialog.value.open = true; |
Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 71 | } |
| 72 | } |
| 73 | window.customElements.define('wf-app', WFApp); |