Commit 01b12a7e authored by François Agneray's avatar François Agneray
Browse files

Add and delete dataset image => done

parent b7e375b9
......@@ -59,7 +59,7 @@
<button (click)="newImageOpenModal(templateAddImage); $event.stopPropagation()" class="btn btn-outline-primary" type="button">
<i class="far fa-image"></i> Add new image
</button>
<div class="mt-2 table-responsive">
<div *ngIf="datasetImages.length > 0" class="mt-2 table-responsive">
<table class="table table-striped">
<thead>
<tr>
......@@ -67,14 +67,20 @@
<th scope="col">Size</th>
<th scope="col">RA min/max</th>
<th scope="col">DEC min/max</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let image of imagesSelected">
<tr *ngFor="let image of datasetImages">
<td class="align-middle">{{ image.name }}</td>
<td class="align-middle">{{ image.size | formatFileSize: false }}</td>
<td></td>
<td></td>
<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>
</tr>
</tbody>
</table>
......@@ -258,7 +264,10 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let fileInfo of directoryInfo" (click)="newImageAction(fileInfo)" [class.cursor-pointer]="fileInfo.name !== '.'">
<tr *ngFor="let fileInfo of directoryInfo"
(click)="newImageAction(fileInfo)"
[class.table-active]="fileInfo === imageSelected && imageLimitIsLoaded"
[class.cursor-pointer]="fileInfo.name !== '.'">
<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>
......@@ -274,6 +283,14 @@
</div>
</div>
<div class="modal-footer">
{{ imageLimitIsLoading }}
<button (click)="modalRef.hide()" class="btn btn-danger">Cancel</button>
&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>
</div>
</ng-template>
\ No newline at end of file
import { Component, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
import { Component, Input, Output, EventEmitter, ViewChild, TemplateRef, OnChanges, SimpleChanges } from '@angular/core';
import { NgForm } from '@angular/forms';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { Dataset, Survey, Attribute, DatasetFamily, FileInfo } from '../../store/model';
import { Dataset, Survey, Attribute, DatasetFamily, FileInfo, ImageLimit } from '../../store/model';
@Component({
selector: 'app-form-dataset',
templateUrl: 'form-dataset.component.html',
styleUrls: ['form-dataset.component.css']
})
export class FormDatasetComponent {
export class FormDatasetComponent implements OnChanges {
@ViewChild(NgForm, {static: true}) ngForm: NgForm;
@Input() model: Dataset = new Dataset();
@Input() surveyList: Survey[];
......@@ -22,19 +22,24 @@ export class FormDatasetComponent {
@Input() directoryInfo: FileInfo[];
@Input() directoryInfoIsLoading: boolean;
@Input() directoryInfoIsLoaded: boolean;
@Input() imageLimitIsLoading: boolean;
@Input() imageLimitIsLoaded: boolean;
@Input() imageLimit: ImageLimit;
@Output() changeSurvey: EventEmitter<number> = new EventEmitter();
@Output() loadDirectoryInfo: EventEmitter<string> = new EventEmitter();
@Output() loadFitsImageLimits: EventEmitter<string> = new EventEmitter();
@Output() submitted: EventEmitter<Dataset> = new EventEmitter();
modalRef: BsModalRef;
dataPathFileExplorerPristine = true;
fileExplorerPath = '';
imagesSelected = [];
imageSelected = null;
datasetImages = [];
constructor(private modalService: BsModalService) { }
ngOnInit() {
console.log(this.model);
ngOnChanges(changes: SimpleChanges) {
this.datasetImages = changes.model.currentValue.config.images.map(i => ({...i}));
}
dataPathOpenModal(template: TemplateRef<any>) {
......@@ -72,17 +77,28 @@ export class FormDatasetComponent {
return;
}
if (fileInfo.type === 'file') {
this.imagesSelected.push(fileInfo);
this.modalRef.hide();
if (fileInfo.type === 'file' && fileInfo.mimetype === 'image/fits') {
this.loadFitsImageLimits.emit(fileInfo.name);
this.imageSelected = fileInfo;
} else {
if (fileInfo.name === '..') {
this.fileExplorerPath = this.fileExplorerPath.substr(0, this.fileExplorerPath.lastIndexOf("/"));
} else {
this.fileExplorerPath += '/' + fileInfo.name;
}
this.imageSelected = null;
this.loadDirectoryInfo.emit(this.fileExplorerPath);
}
this.loadDirectoryInfo.emit(this.fileExplorerPath);
}
selectImage(): void {
this.datasetImages.push({ ...this.imageSelected, ...this.imageLimit });
this.modalRef.hide();
this.ngForm.controls['data_path'].markAsDirty();
}
deleteImage(image): void {
this.datasetImages = this.datasetImages.filter(i => i.name !== image.name);
}
selectDirectory() {
......@@ -116,6 +132,7 @@ export class FormDatasetComponent {
datasetEmitted.id_dataset_family = this.idDatasetFamilyQueryParam;
}
datasetEmitted.config = {
images: this.datasetImages,
cone_search: {
enabled: this.ngForm.form.value.cone_search_enabled,
opened: this.ngForm.form.value.cone_search_opened,
......
......@@ -26,7 +26,9 @@
<app-form-dataset [model]="dataset | async" [datasetFamilyList]="datasetFamilyList | async"
[directoryInfo]="directoryInfo | async" [directoryInfoIsLoading]="directoryInfoIsLoading | async"
[directoryInfoIsLoaded]="directoryInfoIsLoaded | async" [attributeList]="attributeList | async"
(loadDirectoryInfo)="loadDirectoryInfo($event)" (submitted)="editDataset($event)" #formDataset>
[imageLimit]="imageLimit | async" [imageLimitIsLoading]="imageLimitIsLoading | async"
[imageLimitIsLoaded]="imageLimitIsLoaded | async" (loadDirectoryInfo)="loadDirectoryInfo($event)"
(loadFitsImageLimits)="loadFitsImageLimits($event)" (submitted)="editDataset($event)" #formDataset>
<button [disabled]="!formDataset.ngForm.form.valid || formDataset.ngForm.form.pristine"
type="submit" class="btn btn-primary">
<i class="fa fa-database"></i> Update dataset information
......
......@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { DatasetFamily, Dataset, Attribute, FileInfo } from '../../store/model';
import { DatasetFamily, Dataset, Attribute, FileInfo, ImageLimit } from '../../store/model';
import * as datasetFamilyActions from '../../store/action/dataset-family.action';
import * as datasetFamilySelector from '../../store/selector/dataset-family.selector';
import * as datasetActions from '../../store/action/dataset.action';
......@@ -33,6 +33,9 @@ export class EditDatasetComponent implements OnInit {
public attributeList: Observable<Attribute[]>;
public attributeListIsLoading: Observable<boolean>;
public attributeListIsLoaded: Observable<boolean>;
public imageLimitIsLoading: Observable<boolean>;
public imageLimitIsLoaded: Observable<boolean>;
public imageLimit: Observable<ImageLimit>;
constructor(private store: Store<metamodelReducer.State>) {
this.instanceSelected = store.select(instanceSelector.getInstanceSelected);
......@@ -49,6 +52,9 @@ export class EditDatasetComponent implements OnInit {
this.attributeList = store.select(attributeSelector.getAttributeList);
this.attributeListIsLoading = store.select(attributeSelector.getAttributeListIsLoading);
this.attributeListIsLoaded = store.select(attributeSelector.getAttributeListIsLoaded);
this.imageLimitIsLoading = store.select(fileExplorerSelector.getImageLimitIsLoading);
this.imageLimitIsLoaded = store.select(fileExplorerSelector.getImageLimitIsLoaded);
this.imageLimit = store.select(fileExplorerSelector.getImageLimit);
}
ngOnInit() {
......@@ -61,6 +67,10 @@ export class EditDatasetComponent implements OnInit {
this.store.dispatch(new fileExplorerAction.LoadDirectoryInfoAction(path));
}
loadFitsImageLimits(filename: string) {
this.store.dispatch(new fileExplorerAction.LoadImageLimit(filename));
}
editDataset(dataset: Dataset) {
this.store.dispatch(new datasetActions.EditDatasetAction(dataset));
}
......
......@@ -38,6 +38,7 @@ export class FileExplorerEffects {
tap(_ => this.toastr.error('Loading Failed!', 'Directory info failed'))
);
@Effect()
loadImageLimitAction$ = this.actions$.pipe(
ofType(fileExplorerActions.LOAD_IMAGE_LIMIT),
withLatestFrom(this.store$),
......
import { Displayable } from './displayable.model';
import { Image } from './image.model';
export class Dataset implements Displayable {
name: string;
......@@ -13,6 +14,7 @@ export class Dataset implements Displayable {
id_dataset_family: number;
public: boolean;
config: {
images: Image[],
cone_search: {
enabled: boolean;
opened: boolean;
......@@ -50,6 +52,7 @@ export class Dataset implements Displayable {
constructor() {
this.public = true;
this.config = {
images: [],
cone_search: {
enabled: false,
opened: false,
......
import { FileInfo } from "./file-info.model";
export interface Image extends FileInfo {
ra_min: number;
ra_max: number;
dec_min: number;
dec_max: number;
}
\ No newline at end of file
......@@ -14,3 +14,4 @@ export * from './renderer';
export * from './file-info.model';
export * from './column.model';
export * from './image-limit.model';
export * from './image.model';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment