pigallery2/src/frontend/app/ui/settings/database/database.settings.component.html

80 lines
3.2 KiB
HTML

<form #settingsForm="ngForm" class="form-horizontal">
<div class="card mb-4">
<h5 class="card-header">
{{Name}}
</h5>
<div class="card-body">
<div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
<div class="form-group row">
<label class="col-md-2 control-label" for="Type" i18n>Type</label>
<div class="col-md-10">
<select name="Type" id="Type"
class="form-control" [(ngModel)]="settings.type" required>
<option *ngFor="let type of types" [ngValue]="type.key">{{type.value}}
</option>
</select>
<small *ngIf="settings.type == DatabaseType.mysql"
class="form-text text-muted" i18n>Install manually mysql node module to use mysql (npm install mysql)
</small>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 control-label" for="dbFolder" i18n>Database folder</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="db"
[(ngModel)]="settings.dbFolder" id="dbFolder" name="dbFolder" required>
<small class="form-text text-muted" i18n>
All file-based data will be stored here (sqlite database, user database in case of memory db, job history
data)
</small>
</div>
</div>
<ng-container *ngIf="settings.type == DatabaseType.mysql">
<div class="form-group row">
<label class="col-md-2 control-label" for="host" i18n>Host</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="localhost"
[(ngModel)]="settings.mysql.host" id="host" name="host" required>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 control-label" for="database" i18n>Database</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="pigallery2"
[(ngModel)]="settings.mysql.database" id="database" name="database" required>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 control-label" for="username" i18n>Username</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="username"
[(ngModel)]="settings.mysql.username" id="username" name="username" required>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 control-label" for="password" i18n>Password</label>
<div class="col-md-10">
<input type="password" class="form-control" placeholder="password"
[(ngModel)]="settings.mysql.password" id="password" name="password" required>
</div>
</div>
</ng-container>
<button class="btn btn-success float-right"
[disabled]="!settingsForm.form.valid || !changed || inProgress"
(click)="save()" i18n>Save
</button>
<button class="btn btn-secondary float-right"
[disabled]=" !changed || inProgress"
(click)="reset()" i18n>Reset
</button>
</div>
</div>
</form>