3
3
< head >
4
4
< title > JSON Schema Editor</ title >
5
5
< script type ="module " src ="/ux/curio-ux.mjs "> </ script >
6
+ < script type ="module " src ="/ux/components/Drawer.mjs "> </ script >
6
7
< script src ="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js "> </ script >
7
8
< script src ="https://code.jquery.com/jquery-3.2.1.slim.min.js " integrity ="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN " crossorigin ="anonymous "> </ script >
8
9
< script src ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/umd/popper.min.js "
integrity ="
sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q "
crossorigin ="
anonymous "
> </ script >
13
14
< link href ="
https://cdn.jsdelivr.net/npm/[email protected] /dist/css/bootstrap.min.css "
rel ="
stylesheet "
integrity ="
sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH "
crossorigin ="
anonymous "
>
14
15
</ head >
15
16
< body style ="visibility: hidden; ">
16
- < style >
17
- # saveButton {
18
- display : block;
19
- position : fixed;
20
- bottom : 20px ;
21
- right : 30px ;
22
- z-index : 99 ;
23
- font-size : 18px ;
24
- border : none;
25
- outline : none;
26
- background-color : green;
27
- color : white;
28
- cursor : pointer;
29
- padding : 15px ;
30
- border-radius : 4px ;
31
- }
17
+ < style >
18
+ # saveButton {
19
+ display : block;
20
+ position : fixed;
21
+ bottom : 20px ;
22
+ right : 30px ;
23
+ z-index : 99 ;
24
+ font-size : 18px ;
25
+ border : none;
26
+ outline : none;
27
+ background-color : green;
28
+ color : white;
29
+ cursor : pointer;
30
+ padding : 15px ;
31
+ border-radius : 4px ;
32
+ }
32
33
33
- # saveButton : hover {
34
- background-color : # 555 ;
35
- }
34
+ # saveButton : hover {
35
+ background-color : # 555 ;
36
+ }
36
37
37
- .help-button button {
38
- font-size : 24px ;
39
- border-radius : 50% ;
40
- width : 50px ;
41
- height : 50px ;
42
- position : fixed;
43
- bottom : 20px ;
44
- right : 120px ;
45
- z-index : 99 ;
46
- }
38
+ .help-button button {
39
+ font-size : 24px ;
40
+ border-radius : 50% ;
41
+ width : 50px ;
42
+ height : 50px ;
43
+ position : fixed;
44
+ bottom : 20px ;
45
+ right : 120px ;
46
+ z-index : 99 ;
47
+ }
47
48
48
- .help-text {
49
- display : none;
50
- position : fixed;
51
- border : 1px solid # ccc ;
52
- background-color : gray;
53
- padding : 10px ;
54
- width : 200px ;
55
- bottom : 20px ;
56
- right : 200px ;
57
- z-index : 100 ;
58
- box-shadow : 0 4px 8px rgba (0 , 0 , 0 , 0.1 );
59
- }
49
+ .help-text {
50
+ display : none;
51
+ position : fixed;
52
+ border : 1px solid # ccc ;
53
+ background-color : gray;
54
+ padding : 10px ;
55
+ width : 200px ;
56
+ bottom : 20px ;
57
+ right : 200px ;
58
+ z-index : 100 ;
59
+ box-shadow : 0 4px 8px rgba (0 , 0 , 0 , 0.1 );
60
+ }
60
61
61
- .hidden {
62
- display : none;
63
- }
62
+ .hidden {
63
+ display : none;
64
+ }
64
65
65
- .show {
66
- display : block;
67
- }
66
+ .show {
67
+ display : block;
68
+ }
68
69
69
- /* Fix for dark mode */
70
- .card .bg-light {
71
- background-color : rgb (11 , 22 , 34 ) !important ;
72
- }
73
- input .form-control {
74
- background : # 111 ;
75
- color : white;
76
- font-weight : bold;
77
- }
78
- </ style >
79
- < curio-ux >
80
- < section class ="section container-fluid implementations ">
81
- < div class ="row justify-content-center content ">
82
- < div class ="col-md-8 ">
83
- < div >
84
- < button id ="saveButton " class ="saveButton "> Save</ button >
85
- </ div >
86
-
87
- < div class ="help-button ">
88
- < button id ="helpBtn "> ?</ button >
89
- < p id ="helpText " class ="hidden help-text "> Checking a box and entering a non default value will uncomment the corresponding configuration variable.
90
- Unchecking a box will reset the value to default.</ p >
91
- </ div >
70
+ /* Fix for dark mode */
71
+ .card .bg-light {
72
+ background-color : rgb (11 , 22 , 34 ) !important ;
73
+ }
74
+ input .form-control {
75
+ background : # 111 ;
76
+ color : white;
77
+ font-weight : bold;
78
+ }
79
+ </ style >
80
+ < curio-ux >
81
+ < section class ="section container-fluid implementations ">
82
+ < div class ="row justify-content-center content ">
83
+ < div class ="col-md-8 ">
84
+ < div >
85
+ < button id ="saveButton " class ="saveButton "> Save</ button >
86
+ </ div >
92
87
93
- < div id ="editor " data-bs-theme ="dark "> </ div >
94
- < script >
95
- var editor ;
96
- var urlParams = new URLSearchParams ( window . location . search ) ;
97
- var layer = urlParams . get ( 'layer' ) ;
98
- // Make simultaneous GET requests to fetch the existing data and JSON Schema
99
- const layerPath = layer === 'default' ? 'config/default' : `config/layers/${ layer } ` ;
100
- Promise . all ( [
101
- axios . get ( `/api/${ layerPath } ` ) ,
102
- axios . get ( '/api/config/schema' )
103
- ] )
104
- . then ( responses => {
105
- const existingData = responses [ 0 ] . data ;
106
- const schema = responses [ 1 ] . data ;
88
+ < div class ="help-button ">
89
+ < button id ="helpBtn "> ?</ button >
90
+ < p id ="helpText " class ="hidden help-text "> Checking a box and entering a non default value will uncomment the corresponding configuration variable.
91
+ Unchecking a box will reset the value to default.</ p >
92
+ </ div >
107
93
108
- // Create a JSON Editor instance and pass the schema and existing data
109
- const container = document . getElementById ( 'editor' ) ;
110
- const options = {
111
- //mode: 'tree',
112
- schema : schema ,
113
- startval : existingData ,
114
- theme : 'bootstrap5' ,
115
- iconlib : 'jqueryui' ,
116
- show_opt_in : true ,
117
- disable_edit_json : true ,
118
- form_name_root : "Configuration" ,
119
- disable_properties : true ,
120
- } ;
94
+ < div id ="editor " data-bs-theme ="dark "> </ div >
95
+ < script >
96
+ var editor ;
97
+ var urlParams = new URLSearchParams ( window . location . search ) ;
98
+ var layer = urlParams . get ( 'layer' ) ;
99
+ // Make simultaneous GET requests to fetch the existing data and JSON Schema
100
+ const layerPath = layer === 'default' ? 'config/default' : `config/layers/${ layer } ` ;
101
+ Promise . all ( [
102
+ axios . get ( `/api/${ layerPath } ` ) ,
103
+ axios . get ( '/api/config/schema' )
104
+ ] )
105
+ . then ( responses => {
106
+ const existingData = responses [ 0 ] . data ;
107
+ const schema = responses [ 1 ] . data ;
121
108
122
- editor = new JSONEditor ( container , options ) ;
109
+ // Create a JSON Editor instance and pass the schema and existing data
110
+ const container = document . getElementById ( 'editor' ) ;
111
+ const options = {
112
+ mode : 'tree' ,
113
+ schema : schema ,
114
+ startval : existingData ,
115
+ theme : 'bootstrap5' ,
116
+ iconlib : 'jqueryui' ,
117
+ show_opt_in : true ,
118
+ disable_edit_json : true ,
119
+ form_name_root : "Configuration" ,
120
+ disable_properties : true ,
121
+ } ;
123
122
124
- document . getElementById ( "helpBtn" ) . addEventListener ( "click" , function ( ) {
125
- var helpText = document . getElementById ( "helpText" ) ;
126
- if ( helpText . classList . contains ( "hidden" ) ) {
127
- helpText . classList . remove ( "hidden" ) ;
128
- helpText . classList . add ( "show" ) ;
129
- } else {
130
- helpText . classList . remove ( "show" ) ;
131
- helpText . classList . add ( "hidden" ) ;
132
- }
133
- } ) ;
123
+ editor = new JSONEditor ( container , options ) ;
134
124
135
- // Attach function to saveButton click event
136
- var saveButton = document . getElementById ( 'saveButton' ) ;
137
- saveButton . addEventListener ( 'click' , function ( ) {
138
- if ( layer === 'default' ) {
139
- alert ( 'Error: cannot edit defaults' ) ;
140
- } else {
141
- const value = editor . getValue ( ) ;
142
- function cleanEmptyArrays ( json ) {
143
- if ( Array . isArray ( json ) ) {
144
- return json . filter ( item => item !== "" ) ; // Remove empty strings from arrays
145
- } else if ( typeof json === "object" && json !== null ) {
146
- Object . keys ( json ) . forEach ( key => {
147
- json [ key ] = cleanEmptyArrays ( json [ key ] ) ; // Recursively clean nested structures
148
- } ) ;
125
+ document . getElementById ( "helpBtn" ) . addEventListener ( "click" , function ( ) {
126
+ var helpText = document . getElementById ( "helpText" ) ;
127
+ if ( helpText . classList . contains ( "hidden" ) ) {
128
+ helpText . classList . remove ( "hidden" ) ;
129
+ helpText . classList . add ( "show" ) ;
130
+ } else {
131
+ helpText . classList . remove ( "show" ) ;
132
+ helpText . classList . add ( "hidden" ) ;
149
133
}
150
- return json ;
151
- }
152
- cleanEmptyArrays ( value ) ;
153
- console . log ( value )
154
- axios . post ( '/api/config/layers/' + layer , value )
155
- . then ( response => {
156
- // Set cookie named 'message' with the value 'Data saved successfully'
157
- document . cookie = 'message=The layer "' + layer + '" saved successfully. Please restart all nodes using the layer "' + layer + '".; path=/;' ;
158
- window . location . href = '/pages/config/list/' ;
159
- } )
160
- . catch ( error => {
161
- console . error ( 'Error saving data:' , error ) ;
162
- if ( error . response && error . response . data ) {
163
- alert ( 'Error saving data: ' + error . response . data . message ) ;
164
- } else {
165
- alert ( 'An unexpected error occurred. Please try again.' ) ;
134
+ } ) ;
135
+
136
+ // Attach function to saveButton click event
137
+ var saveButton = document . getElementById ( 'saveButton' ) ;
138
+ saveButton . addEventListener ( 'click' , function ( ) {
139
+ if ( layer === 'default' ) {
140
+ alert ( 'Error: cannot edit defaults' ) ;
141
+ } else {
142
+ const value = editor . getValue ( ) ;
143
+ function cleanEmptyArrays ( json ) {
144
+ if ( Array . isArray ( json ) ) {
145
+ return json . filter ( item => item !== "" ) ; // Remove empty strings from arrays
146
+ } else if ( typeof json === "object" && json !== null ) {
147
+ Object . keys ( json ) . forEach ( key => {
148
+ json [ key ] = cleanEmptyArrays ( json [ key ] ) ; // Recursively clean nested structures
149
+ } ) ;
150
+ }
151
+ return json ;
166
152
}
167
- } ) ;
168
- }
169
- } ) ;
170
- } )
171
- . catch ( error => {
172
- console . error ( 'Error fetching data:' , error ) ;
173
- } ) ;
174
- </ script >
175
- </ div >
176
- </ div >
177
- </ section > </ curio-ux >
153
+ cleanEmptyArrays ( value ) ;
154
+ console . log ( value )
155
+ axios . post ( '/api/config/layers/' + layer , value )
156
+ . then ( response => {
157
+ // Set cookie named 'message' with the value 'Data saved successfully'
158
+ document . cookie = 'message=The layer "' + layer + '" saved successfully. Please restart all nodes using the layer "' + layer + '".; path=/;' ;
159
+ window . location . href = '/pages/config/list/' ;
160
+ } )
161
+ . catch ( error => {
162
+ alert ( 'Error saving data:' , error ) ;
163
+ } ) ;
164
+ }
165
+ } ) ;
166
+ } )
167
+ . catch ( error => {
168
+ console . error ( 'Error fetching data:' , error ) ;
169
+ } ) ;
170
+ </ script >
171
+ </ div >
172
+ </ div >
173
+ </ section >
174
+ </ curio-ux >
178
175
</ body >
179
- </ html >
176
+ </ html >
0 commit comments