1+ export function init ( ctx , { terminals, groups } ) {
2+ ctx . importCSS ( "main.css" ) ;
3+
4+ const root = ctx . root ;
5+ const container = document . createElement ( "div" ) ;
6+ container . className = "multiselect-container" ;
7+
8+ root . append ( container ) ;
9+
10+ const checkboxContainers = terminals . map ( ( [ id , { label, checked } ] ) => {
11+ const inputContainer = document . createElement ( "div" ) ;
12+
13+ const inputEl = document . createElement ( "input" ) ;
14+ inputEl . type = "checkbox" ;
15+ inputEl . name = id ;
16+ inputEl . id = id ;
17+ inputEl . checked = checked ;
18+ inputEl . addEventListener ( "click" , ( _event ) => {
19+ ctx . pushEvent ( "toggle_terminal" , id ) ;
20+ } ) ;
21+
22+ const labelEl = document . createElement ( "label" ) ;
23+ labelEl . htmlFor = id ;
24+ labelEl . innerText = label ;
25+
26+ inputContainer . append ( inputEl , labelEl ) ;
27+ return inputContainer ;
28+ } ) ;
29+
30+ const groupCheckboxContainers = groups . map ( ( [ id , { label, checked, indeterminate } ] ) => {
31+ const inputContainer = document . createElement ( "div" ) ;
32+
33+ const inputEl = document . createElement ( "input" ) ;
34+ inputEl . type = "checkbox" ;
35+ inputEl . name = id ;
36+ inputEl . id = id ;
37+ inputEl . checked = checked ;
38+ inputEl . indeterminate = indeterminate ;
39+ inputEl . addEventListener ( "click" , ( _event ) => {
40+ ctx . pushEvent ( "toggle_group" , id ) ;
41+ } ) ;
42+
43+ const labelEl = document . createElement ( "label" ) ;
44+ labelEl . htmlFor = id ;
45+ labelEl . innerText = label ;
46+
47+ inputContainer . append ( inputEl , labelEl ) ;
48+ return inputContainer ;
49+ } ) ;
50+
51+ const groupContainer = document . createElement ( "div" ) ;
52+ groupContainer . className = "multiselect-group-container" ;
53+ groupContainer . style . marginBottom = "8px" ;
54+
55+ if ( groupCheckboxContainers . length > 0 ) {
56+ const groupsHeader = document . createElement ( "h3" ) ;
57+ groupsHeader . className = "multiselect-group-header" ;
58+ groupsHeader . innerText = "Stop Groups" ;
59+ const hr = document . createElement ( "hr" ) ;
60+ groupContainer . append ( groupsHeader , ...groupCheckboxContainers , hr ) ;
61+ } else {
62+ groupContainer . hidden = true ;
63+ }
64+
65+ const stopsHeader = document . createElement ( "h3" ) ;
66+ stopsHeader . className = "multiselect-stops-header" ;
67+ stopsHeader . innerText = "Stops" ;
68+
69+ container . append ( groupContainer , stopsHeader , ...checkboxContainers ) ;
70+
71+ ctx . handleEvent ( "update" , ( { terminals, groups } ) => {
72+ groups . forEach ( ( [ id , { checked, indeterminate } ] ) => {
73+ const input = document . getElementById ( id ) ;
74+ if ( input ) {
75+ input . checked = checked ;
76+ input . indeterminate = indeterminate ;
77+ }
78+ } ) ;
79+
80+ terminals . forEach ( ( [ id , { checked } ] ) => {
81+ const input = document . getElementById ( id ) ;
82+ if ( input ) { input . checked = checked ; }
83+ } ) ;
84+ } ) ;
85+ } ;
0 commit comments