1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | |
19 | |
20 | |
21 | |
22 | |
23 | |
24 | |
25 | import DockableBaseDialog from '../baseDialog/DockableBaseDialog.js'; |
26 | import TextInputControl from '../../controls/textInputControl/TextInputControl.js'; |
27 | import theTranslator from '../../core/uiLib/Translator.js'; |
28 | import theTravelNotesData from '../../data/TravelNotesData.js'; |
29 | import SortableListControl from '../../controls/sortableListControl/SortableListControl.js'; |
30 | import theHTMLElementsFactory from '../../core/uiLib/HTMLElementsFactory.js'; |
31 | import theTravelEditor from '../../core/TravelEditor.js'; |
32 | import RouteContextMenu from '../../contextMenus/RouteContextMenu.js'; |
33 | import TravelNameChangeEL from './TravelNameChangeEL.js'; |
34 | import theConfig from '../../data/Config.js'; |
35 | import { ROUTE_EDITION_STATUS } from '../../main/Constants.js'; |
36 | |
37 | |
38 | |
39 | |
40 | |
41 | |
42 | |
43 | class TravelPropertiesDialog extends DockableBaseDialog { |
44 | |
45 | |
46 | |
47 | |
48 | |
49 | |
50 | #travelNameControl = null; |
51 | |
52 | |
53 | |
54 | |
55 | |
56 | |
57 | #travelRoutesControl = null; |
58 | |
59 | |
60 | |
61 | |
62 | |
63 | constructor ( ) { |
64 | super ( theConfig.travelPropertiesDialog.dialogX, theConfig.travelPropertiesDialog.dialogY ); |
65 | } |
66 | |
67 | |
68 | |
69 | |
70 | |
71 | |
72 | createContentHTML ( ) { |
73 | this.#travelNameControl = new TextInputControl ( |
74 | theTranslator.getText ( 'TravelPropertiesDialog - Name' ), |
75 | { controlChange : new TravelNameChangeEL ( ) } |
76 | ); |
77 | this.#travelNameControl.value = theTravelNotesData.travel.name; |
78 | this.#travelRoutesControl = new SortableListControl ( |
79 | theTravelEditor.routeDropped, |
80 | RouteContextMenu, |
81 | theTranslator.getText ( 'TravelPropertiesDialog - Routes' ) |
82 | ); |
83 | } |
84 | |
85 | |
86 | |
87 | |
88 | |
89 | |
90 | |
91 | get contentHTMLElements ( ) { |
92 | return [ |
93 | this.#travelNameControl.controlHTMLElement, |
94 | this.#travelRoutesControl.controlHTMLElement |
95 | ]; |
96 | } |
97 | |
98 | |
99 | |
100 | |
101 | |
102 | |
103 | get title ( ) { return theTranslator.getText ( 'TravelPropertiesDialog - Travel properties' ); } |
104 | |
105 | |
106 | |
107 | |
108 | |
109 | |
110 | |
111 | #addRoute ( route, listItemsHTMLElements ) { |
112 | const routeName = |
113 | ( route.editionStatus === ROUTE_EDITION_STATUS.notEdited ? '' : '🔴\u00a0' ) + |
114 | ( route.chain ? '⛓\u00a0' : '' ) + |
115 | ( |
116 | route.objId === theTravelNotesData.editedRouteObjId ? |
117 | theTravelNotesData.travel.editedRoute.computedName : |
118 | route.computedName |
119 | ); |
120 | listItemsHTMLElements.push ( |
121 | theHTMLElementsFactory.create ( |
122 | 'div', |
123 | { |
124 | textContent : routeName, |
125 | dataset : { ObjId : String ( route.objId ) } |
126 | } |
127 | ) |
128 | ); |
129 | } |
130 | |
131 | |
132 | |
133 | |
134 | |
135 | updateContent ( ) { |
136 | if ( ! this.#travelRoutesControl ) { |
137 | return; |
138 | } |
139 | const listItemsHTMLElements = []; |
140 | theTravelNotesData.travel.routes.forEach ( |
141 | route => { |
142 | if ( route.objId === theTravelNotesData.editedRouteObjId ) { |
143 | this.#addRoute ( theTravelNotesData.travel.editedRoute, listItemsHTMLElements ); |
144 | } |
145 | else { |
146 | this.#addRoute ( route, listItemsHTMLElements ); |
147 | } |
148 | } |
149 | ); |
150 | this.#travelRoutesControl.updateContent ( listItemsHTMLElements ); |
151 | this.#travelNameControl.value = theTravelNotesData.travel.name; |
152 | } |
153 | } |
154 | |
155 | export default TravelPropertiesDialog; |
156 | |
157 | |
158 | |