form-dataset.component.html 20.1 KB
Newer Older
François Agneray's avatar
François Agneray committed
1
<form name="form" (ngSubmit)="f.form.valid && emit(f.form.value)" #f="ngForm" novalidate>
François Agneray's avatar
François Agneray committed
2
3
4
5
6
7
8
9
10
11
12
    <accordion [isAnimated]="true">
        <accordion-group heading="General information" [isOpen]="'true'">
            <div class="form-group">
                <label for="name">Name</label>
                <input id="name" type="text" class="form-control" name="name" [ngModel]="model.name" [disabled]="model.name" required>
            </div>
            <div class="form-group">
                <label for="label">Label</label>
                <input id="label" type="text" class="form-control" name="label" [ngModel]="model.label" required>
            </div>
            <div class="form-group">
13
14
15
16
                <label for="survey_name">Survey</label>
                <select id="survey_name" class="form-control" name="survey_name" [ngModel]="model.survey_name" [disabled]="model.survey_name" required (change)="onChange($event.target.value)">
                    <option>{{ model.survey_name }}</option>
                    <option *ngFor="let survey of surveyList" [value]="survey.name" [selected]="survey.name === model.survey_name">{{ survey.label }}</option>
François Agneray's avatar
François Agneray committed
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
                </select>
            </div>
            <div class="form-group">
                <label for="table_ref">Table Ref</label>
                <select id="table_ref" class="form-control" name="table_ref" [ngModel]="model.table_ref" [disabled]="model.table_ref" required>
                    <option>{{ model.table_ref }}</option>
                    <option *ngFor="let table of tableList" [value]="table" [selected]="table === model.table_ref">{{ table }}</option>
                </select>
            </div>
            <div class="form-group">
                <label for="id_dataset_family">Family</label>
                <input id="id_dataset_family" *ngIf="idDatasetFamilyQueryParam > 0" type="text" class="form-control" name="datasetFamilySelected" value="{{ getDatasetFamilyByIdQueryParam().label }}" disabled required>
                <select *ngIf="idDatasetFamilyQueryParam === 0" class="form-control" name="id_dataset_family" [ngModel]="model.id_dataset_family" required>
                    <option></option>
                    <option *ngFor="let family of datasetFamilyList" [value]="family.id" [selected]="family.id === model.id_dataset_family">{{ family.label }}</option>
                </select>
            </div>
            <div class="form-group">
                <label for="description">Description</label>
                <textarea id="description" class="form-control" rows="5" name="description" [ngModel]="model.description" required></textarea>
            </div>
            <div class="form-group">
                <label for="data_path">Data path</label>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
42
                        <button (click)="dataPathOpenModal(templateDataPath); $event.stopPropagation()" class="btn btn-outline-secondary" type="button">
François Agneray's avatar
François Agneray committed
43
44
45
46
47
48
49
                            <i class="fas fa-folder-open"></i>
                        </button>
                    </div>
                    <input id="data_path" type="text" class="form-control" name="data_path" [ngModel]="model.data_path">
                </div>
            </div>
            <div class="form-group">
François Agneray's avatar
François Agneray committed
50
                <label for="display">Display</label>
51
                <input id="display" type="number" class="form-control" name="display" [ngModel]="model.display" required>
François Agneray's avatar
François Agneray committed
52
            </div>
François Agneray's avatar
François Agneray committed
53
54
55
            <div class="custom-control custom-switch">
                <input class="custom-control-input" id="public" type="checkbox" name="public" [ngModel]="model.public">
                <label class="custom-control-label" for="public">Public</label>
François Agneray's avatar
François Agneray committed
56
57
            </div>
        </accordion-group>
58
        <accordion-group [isDisabled]="!model.data_path" heading="Images configuration">
59
60
61
            <button (click)="newImageOpenModal(templateAddImage); $event.stopPropagation()" class="btn btn-outline-primary" type="button">
                <i class="far fa-image"></i> Add new image
            </button>
62
            <div *ngIf="datasetImages.length > 0" class="mt-2 table-responsive">
63
64
65
                <table class="table table-striped">
                    <thead>
                        <tr>
66
                            <th scope="col">Path</th>
67
68
69
                            <th scope="col">Size</th>
                            <th scope="col">RA min/max</th>
                            <th scope="col">DEC min/max</th>
70
                            <th scope="col">Action</th>
71
72
73
                        </tr>
                    </thead>
                    <tbody>
74
                        <tr *ngFor="let image of datasetImages">
75
76
                            <td class="align-middle">{{ image.name }}</td>
                            <td class="align-middle">{{ image.size | formatFileSize: false }}</td>
77
78
79
80
81
82
83
                            <td class="align-middle">[{{ image.ra_min }} ; {{ image.ra_max }}]</td>
                            <td class="align-middle">[{{ image.dec_min }} ; {{ image.dec_max }}]</td>
                            <td class="align-middle">
                                <button title="Delete this image" (click)="deleteImage(image)" class="btn btn-outline-danger">
                                    <span class="fas fa-trash-alt"></span>
                                </button>
                            </td>
84
85
86
87
88
                        </tr>
                    </tbody>
                </table>
            </div>
        </accordion-group>
François Agneray's avatar
François Agneray committed
89
        <accordion-group heading="Cone-search configuration" [isDisabled]="isConeSearchDisabled()">
François Agneray's avatar
François Agneray committed
90
            <div class="custom-control custom-switch">
91
92
93
94
95
96
                <input class="custom-control-input" type="checkbox" id="cone_search_enabled" name="cone_search_enabled" [ngModel]="model.config.cone_search.enabled">
                <label class="custom-control-label" for="cone_search_enabled">Enabled</label>
            </div>
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="cone_search_opened" name="cone_search_opened" [ngModel]="model.config.cone_search.opened" [disabled]="!ngForm.form.value.cone_search_enabled">
                <label class="custom-control-label" for="cone_search_opened">Opened</label>
François Agneray's avatar
François Agneray committed
97
98
99
100
101
            </div>
            <div class="form-group">
                <div class="form-row">
                    <div class="col-md-6">
                        <label for="column_ra">Column RA</label>
102
                        <select id="column_ra" class="form-control" name="column_ra" [ngModel]="model.config.cone_search.column_ra" [disabled]="!ngForm.form.value.cone_search_enabled">
François Agneray's avatar
François Agneray committed
103
104
105
106
107
                            <option *ngFor="let attribute of attributeList" [value]="attribute.id">{{ attribute.form_label }}</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="column_dec">Column DEC</label>
108
                        <select id="column_dec" class="form-control" name="column_dec" [ngModel]="model.config.cone_search.column_dec" [disabled]="!ngForm.form.value.cone_search_enabled">
François Agneray's avatar
François Agneray committed
109
110
111
112
113
                            <option *ngFor="let attribute of attributeList" [value]="attribute.id">{{ attribute.form_label }}</option>
                        </select>
                    </div>
                </div>
            </div>
François Agneray's avatar
François Agneray committed
114
            <div class="custom-control custom-switch">
115
                <input class="custom-control-input" type="checkbox" id="plot_enabled" name="plot_enabled" [ngModel]="model.config.cone_search.plot_enabled" [disabled]="!ngForm.form.value.cone_search_enabled">
François Agneray's avatar
François Agneray committed
116
                <label class="custom-control-label" for="plot_enabled">Activate plot</label>
117
            </div>
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
            <div *ngIf="ngForm.form.value.plot_enabled" class="mt-2 table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Enabled</th>
                            <th scope="col">Display</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="align-middle">SDSS (DR16)</td>
                            <td class="align-middle">
                                <div class="custom-control custom-switch">
                                    <input class="custom-control-input" type="checkbox" id="sdss_enabled" name="sdss_enabled" [ngModel]="model.config.cone_search.sdss_enabled">
                                    <label class="custom-control-label" for="sdss_enabled"></label>
                                </div>
                            </td>
                            <td class="align-middle">
                                <input id="sdss_display" type="number" class="form-control" name="sdss_display" value="10" [ngModel]="model.config.cone_search.sdss_display">
                            </td>
                        </tr>
                        <tr *ngFor="let image of datasetImages">
141
                            <td class="align-middle">{{ getImageFilename(image.name) }}</td>
142
143
144
145
146
147
148
149
150
151
152
153
154
                            <td class="align-middle">
                                <div class="custom-control custom-switch">
                                    <input class="custom-control-input" type="checkbox" id="{{ image.id }}_enabled" name="{{ image.id }}_enabled" [ngModel]="getBackgroundEnabled(image)">
                                    <label class="custom-control-label" for="{{ image.id }}_enabled"></label>
                                </div>
                            </td>
                            <td class="align-middle">
                                <input id="{{ image.id }}_display" type="number" class="form-control" name="{{ image.id }}_display" [ngModel]="getBackgroundDisplay(image)">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
François Agneray's avatar
François Agneray committed
155
        </accordion-group>
156
        <accordion-group heading="Download configuration">
François Agneray's avatar
François Agneray committed
157
            <div class="custom-control custom-switch">
158
159
                <input class="custom-control-input" type="checkbox" id="download_enabled" name="download_enabled" [ngModel]="model.config.download.enabled">
                <label class="custom-control-label" for="download_enabled">Enabled</label>
François Agneray's avatar
François Agneray committed
160
            </div>
François Agneray's avatar
François Agneray committed
161
            <div class="custom-control custom-switch">
162
163
                <input class="custom-control-input" type="checkbox" id="download_opened" name="download_opened" [ngModel]="model.config.download.opened" [disabled]="!ngForm.form.value.download_enabled">
                <label class="custom-control-label" for="download_opened">Opened</label>
François Agneray's avatar
François Agneray committed
164
            </div>
François Agneray's avatar
François Agneray committed
165
            <div class="custom-control custom-switch">
166
                <input class="custom-control-input" type="checkbox" id="download_result_csv" name="download_result_csv" [ngModel]="model.config.download.csv" [disabled]="!ngForm.form.value.download_enabled">
François Agneray's avatar
François Agneray committed
167
                <label class="custom-control-label" for="download_result_csv">Display download results button in CSV format</label>
François Agneray's avatar
François Agneray committed
168
            </div>
François Agneray's avatar
François Agneray committed
169
            <div class="custom-control custom-switch">
170
                <input class="custom-control-input" type="checkbox" id="download_result_ascii" name="download_result_ascii" [ngModel]="model.config.download.ascii" [disabled]="!ngForm.form.value.download_enabled">
François Agneray's avatar
François Agneray committed
171
                <label class="custom-control-label" for="download_result_ascii">Display download results button in ASCII format</label>
François Agneray's avatar
François Agneray committed
172
            </div>
François Agneray's avatar
François Agneray committed
173
            <div class="custom-control custom-switch">
174
                <input class="custom-control-input" type="checkbox" id="download_result_vo" name="download_result_vo" [ngModel]="model.config.download.vo" [disabled]="!ngForm.form.value.download_enabled">
François Agneray's avatar
François Agneray committed
175
                <label class="custom-control-label" for="download_result_vo">Display download results button in VO format</label>
François Agneray's avatar
François Agneray committed
176
            </div>
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="download_result_archive" name="download_result_archive" [ngModel]="model.config.download.archive" [disabled]="!ngForm.form.value.download_enabled">
                <label class="custom-control-label" for="download_result_archive">Display download results archive button</label>
            </div>
        </accordion-group>
        <accordion-group heading="Summary configuration">
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="summary_enabled" name="summary_enabled" [ngModel]="model.config.summary.enabled">
                <label class="custom-control-label" for="summary_enabled">Enabled</label>
            </div>
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="summary_opened" name="summary_opened" [ngModel]="model.config.summary.opened" [disabled]="!ngForm.form.value.summary_enabled">
                <label class="custom-control-label" for="summary_opened">Opened</label>
            </div>
        </accordion-group>
        <accordion-group heading="Server link configuration">
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="server_link_enabled" name="server_link_enabled" [ngModel]="model.config.server_link.enabled">
                <label class="custom-control-label" for="server_link_enabled">Enabled</label>
            </div>
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="server_link_opened" name="server_link_opened" [ngModel]="model.config.server_link.opened" [disabled]="!ngForm.form.value.server_link_enabled">
                <label class="custom-control-label" for="server_link_opened">Opened</label>
            </div>
        </accordion-group>
        <accordion-group heading="SAMP configuration">
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="samp_enabled" name="samp_enabled" [ngModel]="model.config.samp.enabled">
                <label class="custom-control-label" for="samp_enabled">Enabled</label>
            </div>
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="samp_opened" name="samp_opened" [ngModel]="model.config.samp.opened" [disabled]="!ngForm.form.value.samp_enabled">
                <label class="custom-control-label" for="samp_opened">Opened</label>
            </div>
        </accordion-group>
        <accordion-group heading="Datatable configuration">
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="datatable_enabled" name="datatable_enabled" [ngModel]="model.config.datatable.enabled">
                <label class="custom-control-label" for="datatable_enabled">Enabled</label>
            </div>
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="datatable_opened" name="datatable_opened" [ngModel]="model.config.datatable.enabled">
                <label class="custom-control-label" for="datatable_opened">Open the results datatable accordion</label>
            </div>
            <div class="custom-control custom-switch">
                <input class="custom-control-input" type="checkbox" id="selectable_row" name="selectable_row" [ngModel]="model.config.datatable.selectable_row">
                <label class="custom-control-label" for="selectable_row">Datatable rows selectable</label>
            </div>
François Agneray's avatar
François Agneray committed
225
226
        </accordion-group>
    </accordion>
227
    <div class="form-group mt-3">
François Agneray's avatar
François Agneray committed
228
229
        <ng-content></ng-content>
    </div>
230
231
</form>

232
<ng-template #templateDataPath>
233
234
235
236
    <div class="modal-header">
        <h4 class="modal-title pull-left">ANIS file explorer</h4>
    </div>
    <div>
237
        <div *ngIf="rootDirectoryInfoIsLoading" class="row justify-content-center mt-5">
238
239
240
241
242
243
244
245
            <span class="fas fa-circle-notch fa-spin fa-3x"></span>
            <span class="sr-only">Loading...</span>
        </div>

        <p class="ml-3 mt-3">
            <i class="far fa-folder"></i>
            {{ fileExplorerPath }}
        </p>
246
        <div *ngIf="rootDirectoryInfoIsLoaded" class="table-responsive">
247
248
249
250
251
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th scope="col">Name</th>
252
                        <th scope="col">Size</th>
253
254
255
256
                        <th scope="col">MimeType</th>
                    </tr>
                </thead>
                <tbody>
257
                    <tr *ngFor="let fileInfo of rootDirectoryInfo" (click)="dataPathAction(fileInfo)" [class.cursor-pointer]="fileInfo.type === 'dir' && fileInfo.name !== '.'">
258
259
260
261
262
263
264
                        <td>
                            <span *ngIf="fileInfo.type === 'dir'"><i class="far fa-folder"></i></span>
                            <span *ngIf="fileInfo.type === 'file'"><i class="far fa-file"></i></span>
                        </td>
                        <td class="align-middle">
                            {{ fileInfo.name }}
                        </td>
265
                        <td class="align-middle">{{ fileInfo.size | formatFileSize: false }}</td>
266
267
268
269
270
271
272
273
274
                        <td class="align-middle">{{ fileInfo.mimetype }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button (click)="modalRef.hide()" class="btn btn-danger">Cancel</button>
        &nbsp;
275
276
277
278
279
280
281
282
283
        <button [disabled]="dataPathFileExplorerPristine" (click)="selectDirectory()" class="btn btn-primary">Select this directory</button>
    </div>
</ng-template>

<ng-template #templateAddImage>
    <div class="modal-header">
        <h4 class="modal-title pull-left">Add an image</h4>
    </div>
    <div>
284
        <div *ngIf="datasetDirectoryInfoIsLoading" class="row justify-content-center mt-5">
285
286
287
288
289
290
291
292
            <span class="fas fa-circle-notch fa-spin fa-3x"></span>
            <span class="sr-only">Loading...</span>
        </div>

        <p class="ml-3 mt-3">
            <i class="far fa-folder"></i>
            {{ fileExplorerPath }}
        </p>
293
        <div *ngIf="datasetDirectoryInfoIsLoaded" class="table-responsive">
294
295
296
297
298
299
300
301
302
303
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th scope="col">Name</th>
                        <th scope="col">Size</th>
                        <th scope="col">MimeType</th>
                    </tr>
                </thead>
                <tbody>
304
                    <tr *ngFor="let fileInfo of datasetDirectoryInfo" 
305
306
307
                        (click)="newImageAction(fileInfo)" 
                        [class.table-active]="fileInfo === imageSelected && imageLimitIsLoaded" 
                        [class.cursor-pointer]="fileInfo.name !== '.'">
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
                        <td>
                            <span *ngIf="fileInfo.type === 'dir'"><i class="far fa-folder"></i></span>
                            <span *ngIf="fileInfo.type === 'file'"><i class="far fa-file"></i></span>
                        </td>
                        <td class="align-middle">
                            {{ fileInfo.name }}
                        </td>
                        <td class="align-middle">{{ fileInfo.size | formatFileSize: false }}</td>
                        <td class="align-middle">{{ fileInfo.mimetype }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button (click)="modalRef.hide()" class="btn btn-danger">Cancel</button>
324
325
326
327
328
329
330
        &nbsp;
        <button [disabled]="!imageSelected || !imageLimitIsLoaded" (click)="selectImage()" class="btn btn-primary">
            Select this image
            <span *ngIf="imageLimitIsLoading">
                <span class="fas fa-circle-notch fa-spin fa-1x"></span>
            </span>
        </button>
331
332
    </div>
</ng-template>