Added button to tag panel to quickly add new tags

Also moved download link to be the path to the file

.gitignore

@@ -15,3 +15,4 @@ test*.sh
 test_data*
 dump/*
 version
+data/

client/src/app/components/tag-panel/tag-panel.component.html

@@ -2,7 +2,7 @@
   <div class="card tag-panel margin-bottom">
     <div class="card-header card-small tag-header">
       Tags
-      <a *ngIf="media" [href]="'/api/images/' + media.hash + '/file?download=true'">Download</a>
+      <button class="btn btn-primary ms-auto" (click)="createTag()"><fa-icon [icon]="faPlus"></fa-icon></button>
     </div>
     <div *ngIf="tagsModel && media && columnIndexes && columnTags; else loading" class="card-body card-small tag-list">
       <div class="tag-list-column" *ngFor="let i of columnIndexes">

client/src/app/components/tag-panel/tag-panel.component.scss

@@ -10,6 +10,10 @@
 .tag-header {
   height: 2rem;
   min-width: 10rem;
+
+  & > button {
+    width: 1.5rem;
+  }
 }
 
 .tag-label {

client/src/app/components/tag-panel/tag-panel.component.ts

@@ -5,8 +5,11 @@ import { MediaService } from 'services/media.service';
 import { PlaylistService } from 'services/playlist.service';
 import { TagService } from 'services/tag.service';
 import { ActorService } from 'services/actor.service';
-import { Subscription } from 'rxjs';
+import { PromptService } from 'services/prompt.service';
+import { Subscription, from } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { ListItem, toListItems } from 'app/shared/types';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
 
 const DEFAULT_COLUMN_COUNT = 1;
 
@@ -22,6 +25,7 @@ interface MetadataModel {
   styleUrls: ['./tag-panel.component.scss'],
 })
 export class TagPanelComponent implements OnInit, OnDestroy, AfterViewChecked {
+  public readonly faPlus = faPlus;
   public tagsModel?: Record<string, boolean>;
   public ratingModel = 0;
   public actorsModel?: string[];
@@ -44,6 +48,7 @@ export class TagPanelComponent implements OnInit, OnDestroy, AfterViewChecked {
   @ViewChild('ratingElement', { static: false }) private ratingElement: any;
   private configService: ConfigService;
   private tagService: TagService;
+  private promptService: PromptService;
   private subscriptions: Subscription[] = [];
 
   public constructor(
@@ -52,12 +57,14 @@ export class TagPanelComponent implements OnInit, OnDestroy, AfterViewChecked {
     tagService: TagService,
     actorService: ActorService,
     playlistService: PlaylistService,
+    promptService: PromptService,
   ) {
     this.configService = configService;
     this.mediaService = mediaService;
     this.tagService = tagService;
     this.actorService = actorService;
     this.playlistService = playlistService;
+    this.promptService = promptService;
   }
 
   public ngOnInit() {
@@ -168,6 +175,30 @@ export class TagPanelComponent implements OnInit, OnDestroy, AfterViewChecked {
     }
   }
 
+  public createTag(): void {
+    this.subscriptions.push(
+      from(this.promptService.prompt('Enter Tag'))
+        .pipe(
+          map(tag => {
+            if (!tag || !tag.trim()) {
+              return;
+            }
+            console.log(tag);
+            this.mediaService.addTag(tag);
+          }),
+        )
+        .subscribe(
+          () => {
+            // Nothing to do
+          },
+          err => {
+            // TODO
+            console.error(err);
+          },
+        ),
+    );
+  }
+
   private updateColumnIndexes(): void {
     const count = (this.config && this.config.user.tagColumnCount) || DEFAULT_COLUMN_COUNT;
     const indexes: number[] = [];

client/src/app/components/viewer/viewer.component.html

@@ -3,9 +3,13 @@
     <app-tag-panel></app-tag-panel>
   </div>
   <div class="right-panel full-height">
-    <div *ngIf="media && tagsOpen && config && config.user.quickTagShowPath && mediaSrc" class="text-overlay">
+    <a
+      [href]="'/api/images/' + media.hash + '/file?download=true'"
+      *ngIf="media && tagsOpen && config && config.user.quickTagShowPath && mediaSrc"
+      class="text-overlay"
+    >
       {{ media.path }}
-    </div>
+    </a>
     <div *ngIf="media && media.autoTags && tagsOpen && config && config.user.quickTagShowAutoTags" class="text-overlay bottom">
       May contain: {{ media.autoTags | formatArray }}
     </div>

env.sh

@@ -0,0 +1,8 @@
+export PORT=8444
+export DATABASE=mongodb
+export DATABASE_URI=mongodb://root:root@localhost:27017
+export DATABASE_DB=vimtur
+export CACHE_PATH=$(pwd)/data/cache
+export DATA_PATH=$(pwd)/data/raw
+
+mkdir -p "${CACHE_PATH}" "${DATA_PATH}"

start-mongodb.sh

@@ -0,0 +1,3 @@
+#!/bin/sh -e
+
+docker run -v /data/db --restart unless-stopped -e MONGO_INITDB_ROOT_USERNAME=root -e MONGO_INITDB_ROOT_PASSWORD=root -p 27017:27017 -d mongo:4