file accessors, work in progress

.gitignore

@@ -59,3 +59,4 @@ test/work
 # Secrets
 githubtoken.secret
 googleTranslateApiKey.txt
+githubApiKey.txt

.npmignore

@@ -47,3 +47,4 @@ test/work
 
 # Secrets
 googleTranslateApiKey.txt
+githubApiKey.txt

projects/tiny-translator/src/app/app-material.module.ts

@@ -1,5 +1,6 @@
 import {NgModule} from '@angular/core';
 import {
+  MatAutocompleteModule,
   MatButtonModule, MatCardModule, MatCheckboxModule, MatDialogModule, MatIconModule, MatInputModule, MatListModule,
   MatMenuModule, MatOptionModule,
   MatProgressSpinnerModule,
@@ -14,6 +15,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
 @NgModule({
   declarations: [],
   imports: [
+    MatAutocompleteModule,
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,
@@ -34,6 +36,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
     FlexLayoutModule
   ],
   exports: [
+    MatAutocompleteModule,
     MatButtonModule,
     MatCardModule,
     MatCheckboxModule,

projects/tiny-translator/src/app/app.component.html

@@ -31,10 +31,9 @@
           <mat-icon>save</mat-icon>
           <span i18n>Save..</span>
         </button>
-        <button mat-menu-item (click)="configureAutoTranslate()"
-                matTooltip="configure Google Translate API Key" i18n-matTooltip>
+        <button mat-menu-item [matMenuTriggerFor]="configMenu">
           <mat-icon>settings</mat-icon>
-          <span i18n>Google Translate settings..</span>
+          <span i18n>Settings..</span>
         </button>
         <button mat-menu-item (click)="autoTranslate()"
           matTooltip="Translate all untranslated units with Google Translate" i18n-matTooltip>
@@ -47,6 +46,19 @@
           <span i18n>Last results..</span>
         </button>
       </mat-menu>
+      <!-- config menu -->
+      <mat-menu #configMenu="matMenu">
+        <button mat-menu-item (click)="configureAutoTranslate()"
+                matTooltip="configure Google Translate API Key" i18n-matTooltip>
+          <mat-icon>g_translate</mat-icon>
+          <span i18n>Google Translate settings..</span>
+        </button>
+        <button mat-menu-item (click)="configureGithub()"
+                matTooltip="configure Github API access" i18n-matTooltip>
+          <img class="mat-icon" src="../assets/Octocat.jpg" id="githublogo">
+          <span i18n>Github access settings..</span>
+        </button>
+      </mat-menu>
     </mat-toolbar-row>
   </mat-toolbar>
   <div id="main" fxFlex="1 1 auto" fxLayout="column" fxLayoutAlign="start start">

projects/tiny-translator/src/app/app.component.scss

@@ -32,3 +32,7 @@ mat-toolbar .mat-toolbar-layout mat-toolbar-row {
   background-color: mat-color($dit-app-primary);
   height: 20px;
 }
+
+#githublogo {
+  width: 30px;
+}

projects/tiny-translator/src/app/app.component.ts

@@ -78,4 +78,8 @@ export class AppComponent implements OnInit {
     this.router.navigateByUrl('autotranslatesummary');
   }
 
+  configureGithub() {
+    this.router.navigateByUrl('configuregithub');
+  }
+
 }

projects/tiny-translator/src/app/app.config.ts

@@ -15,6 +15,12 @@ export class AppConfig {
   // if set to true, all autotranslations containing placeholder or tags will FAIL BY DESIGN
   // Used to allow testing of report page and filters for failed translations.
   GOOGLETRANSLATE_PROVOKE_FAILURES?: boolean;
+  // URL to Github API (optional)
+  GITHUB_API_ROOT_URL?: string;
+  // Your API Key, should not be set here, because it is secret
+  // can be typed in in the application, but test config needs it
+  GITHUB_API_KEY?: string;
+  GITHUB_PROVOKE_FAILURES?: boolean;
   BUILDVERSION: string;
   BUILDTIME: string;
 }
@@ -25,7 +31,10 @@ export const APP_CONFIG_VALUE: AppConfig = {
   'BUILDTIME': '2018-12-02', // TODO should be dynamic
   GOOGLETRANSLATE_API_ROOT_URL: 'https://translation.googleapis.com/',
   GOOGLETRANSLATE_API_KEY: environment.googletranslate_api_key,
-  GOOGLETRANSLATE_PROVOKE_FAILURES: environment.googletranslate_provoke_failures
+  GOOGLETRANSLATE_PROVOKE_FAILURES: environment.googletranslate_provoke_failures,
+  GITHUB_API_ROOT_URL: 'https://api.github.com/',
+  GITHUB_API_KEY: environment.github_api_key,
+  GITHUB_PROVOKE_FAILURES: environment.github_provoke_failures,
 };
 
 export let APP_CONFIG = new InjectionToken<AppConfig>('app.config');

projects/tiny-translator/src/app/app.module.ts

@@ -45,6 +45,9 @@ import { FilterPageComponent } from './filter-page/filter-page.component';
 import { UpdateAvailableComponent } from './update-available/update-available.component';
 import {TranslationFileUploadComponent} from './file-accessors/download-upload/translation-file-upload/translation-file-upload.component';
 import {DownloadUploadService} from './file-accessors/download-upload/download-upload.service';
+import {TranslationFileFromGithubComponent} from './file-accessors/github/translation-file-from-github/translation-file-from-github.component';
+import {GithubAccessorService} from './file-accessors/github/github-accessor.service';
+import {ConfigureGithubPageComponent} from './file-accessors/github/configure-github-page/configure-github-page.component';
 
 @NgModule({
   declarations: [
@@ -56,6 +59,8 @@ import {DownloadUploadService} from './file-accessors/download-upload/download-u
     TranslateUnitComponent,
     TranslateUnitListComponent,
       TranslationFileUploadComponent,
+      TranslationFileFromGithubComponent,
+      ConfigureGithubPageComponent,
     LanguageComponent,
     AbbreviatePipe,
     ProjectComponent,
@@ -89,6 +94,7 @@ import {DownloadUploadService} from './file-accessors/download-upload/download-u
     AsynchronousFileReaderService,
     DownloaderService,
     DownloadUploadService,
+    GithubAccessorService,
     ActiveProjectGuard,
     {provide: BackendServiceAPI, useClass: BackendLocalStorageService},
     {provide: AutoTranslateServiceAPI, useClass: AutoTranslateGoogleService},

projects/tiny-translator/src/app/app.routing.ts

@@ -8,6 +8,7 @@ import {CreateProjectPageComponent} from './create-project-page/create-project-p
 import {EditProjectPageComponent} from './edit-project-page/edit-project-page.component';
 import {AutoTranslateSummaryPageComponent} from './auto-translate-summary-page/auto-translate-summary-page.component';
 import {ConfigureAutoTranslatePageComponent} from './configure-auto-translate-page/configure-auto-translate-page.component';
+import {ConfigureGithubPageComponent} from './file-accessors/github/configure-github-page/configure-github-page.component';
 
 /**
  * Created by martin on 23.03.2017.
@@ -22,6 +23,7 @@ const appRoutes: Routes = [
   { path: 'selectfilter', component: FilterPageComponent, canActivate: [ActiveProjectGuard] },
   { path: 'autotranslatesummary', component: AutoTranslateSummaryPageComponent},
   { path: 'configureautotranslate', component: ConfigureAutoTranslatePageComponent},
+  { path: 'configuregithub', component: ConfigureGithubPageComponent},
   { path: '', redirectTo: '/translate', pathMatch: 'full' },
 ];
 

projects/tiny-translator/src/app/file-accessors/Readme.md

@@ -1,10 +1,16 @@
 # FileAccessors
 An abstract mechanism to load and save files from different sources.
 
+Every file accessor has to provide a component to allow input of a file (and optionally a master file for xmb)
+and a service to load and save.
+
+TODO configuration component
+
 ## Available file accessors
 ### DownloadUpload
 The simplest file accessor.
 
 It can load files via the browser file upload mechanism and store them via browsers file download.
 
-
+### Github
+It can get translation files from a branch in a github repo and commit changes to it.

projects/tiny-translator/src/app/file-accessors/common/file-access-service-factory.service.ts

@@ -0,0 +1,33 @@
+import {Injectable} from '@angular/core';
+import {DownloadUploadService} from '../download-upload/download-upload.service';
+import {IFileAccessService} from './i-file-access-service';
+import {FileAccessorType} from './file-accessor-type';
+import {GithubAccessorService} from '../github/github-accessor.service';
+import {IFileAccessConfiguration} from './i-file-access-configuration';
+import {BackendLocalStorageService} from '../../model/backend-local-storage.service';
+
+/**
+ * This service returns a suitable service used to load and save a translation file.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class FileAccessServiceFactoryService {
+
+  constructor(
+      private downloadUploadService: DownloadUploadService,
+      private githubAccessorService: GithubAccessorService
+  ) { }
+
+  getFileAccessService(filetype: FileAccessorType): IFileAccessService {
+    switch (filetype) {
+      case FileAccessorType.DOWNLOAD_UPLOAD:
+        return this.downloadUploadService;
+      case FileAccessorType.GITHUB:
+        return this.githubAccessorService;
+      default:
+        throw new Error('Unknown file type ' + filetype);
+    }
+  }
+
+}

projects/tiny-translator/src/app/file-accessors/common/file-accessor-type.ts

@@ -1,3 +1,4 @@
 export enum FileAccessorType {
-    DOWNLOAD_UPLOAD
+    DOWNLOAD_UPLOAD = 'Browser Upload and Download',
+    GITHUB = 'Github'
 }

projects/tiny-translator/src/app/file-accessors/common/i-file-access-configuration.ts

@@ -0,0 +1,12 @@
+/**
+ * A generic configuration of a file access service.
+ * It contains informations like access tokens, directory names, etc.
+ * The details depend on the concrete file accessor.
+ */
+import {FileAccessorType} from './file-accessor-type';
+
+export interface IFileAccessConfiguration {
+    type: FileAccessorType;
+    id?: string; // id is auto set when stored
+    label: string;
+}

projects/tiny-translator/src/app/file-accessors/common/i-file-access-service.ts

@@ -4,12 +4,13 @@
 import {Observable} from 'rxjs';
 import {IFile} from './i-file';
 import {IFileDescription} from './i-file-description';
+import {IFileAccessConfiguration} from './i-file-access-configuration';
 
 export interface IFileAccessService {
 
     /**
      * Load a file from the backend system.
-     * @param desription backend dependent description of the file to load.
+     * @param description backend dependent description of the file to load.
      * @return Observable of the loaded file.
      */
     load(description: IFileDescription): Observable<IFile>;
@@ -21,4 +22,17 @@ export interface IFileAccessService {
      */
     save(file: IFile): Observable<any>;
 
+    /**
+     * Serialize a configuration to store it.
+     * @param configuration configuration to be serialized.
+     * @return serialized form that can be deserialized.
+     */
+    serialize(configuration: IFileAccessConfiguration): string;
+
+    /**
+     * Create a configuration from a stored string (generated by serialize()).
+     * @param serialzedConfiguration stored configuration string
+     * @return deserialized version.
+     */
+    deserialize(serialzedConfiguration: string): IFileAccessConfiguration;
 }

projects/tiny-translator/src/app/file-accessors/common/i-file-description.ts

@@ -3,7 +3,9 @@
  * It contains enough information to load and save it.
  */
 import {FileAccessorType} from './file-accessor-type';
+import {IFileAccessConfiguration} from './i-file-access-configuration';
 
 export interface IFileDescription {
     type: FileAccessorType;
+    configuration: IFileAccessConfiguration;
 }

projects/tiny-translator/src/app/file-accessors/download-upload/download-upload-configuration.ts

@@ -0,0 +1,18 @@
+import {IFileAccessConfiguration} from '../common/i-file-access-configuration';
+import {FileAccessorType} from '../common/file-accessor-type';
+
+export class DownloadUploadConfiguration implements IFileAccessConfiguration {
+
+    static _instance = new DownloadUploadConfiguration();
+
+    readonly type = FileAccessorType.DOWNLOAD_UPLOAD;
+
+    readonly label = '';
+
+    readonly id = '0';
+
+    public static singleInstance() {
+        return this._instance;
+    }
+
+}

projects/tiny-translator/src/app/file-accessors/download-upload/download-upload.service.ts

@@ -6,6 +6,8 @@ import {DownloadedFile} from './downloaded-file';
 import {AsynchronousFileReaderService} from './asynchronous-file-reader.service';
 import {DownloaderService} from './downloader.service';
 import {map} from 'rxjs/operators';
+import {IFileAccessConfiguration} from '../common/i-file-access-configuration';
+import {FileAccessorType} from '../common/file-accessor-type';
 
 @Injectable()
 export class DownloadUploadService implements IFileAccessService {
@@ -33,4 +35,12 @@ export class DownloadUploadService implements IFileAccessService {
         // TODO
         return of('ok');
     }
+
+    serialize(configuration: IFileAccessConfiguration): string {
+        return 'DOWNLOAD_UPLOAD';
+    }
+
+    deserialize(serialzedConfiguration: string): IFileAccessConfiguration {
+        return {type: FileAccessorType.DOWNLOAD_UPLOAD, label: ''};
+    }
 }

projects/tiny-translator/src/app/file-accessors/download-upload/downloaded-file.ts

@@ -1,13 +1,13 @@
 import {IFileDescription} from '../common/i-file-description';
 import {FileAccessorType} from '../common/file-accessor-type';
+import {DownloadUploadConfiguration} from './download-upload-configuration';
 
 export class DownloadedFile implements IFileDescription {
 
-    constructor(private _file: File) {}
+    readonly type = FileAccessorType.DOWNLOAD_UPLOAD;
+    readonly configuration = DownloadUploadConfiguration.singleInstance();
 
-    get type(): FileAccessorType {
-        return FileAccessorType.DOWNLOAD_UPLOAD;
-    }
+    constructor(private _file: File) {}
 
     get browserFile(): File {
         return this._file;

projects/tiny-translator/src/app/file-accessors/download-upload/translation-file-upload/translation-file-upload.component.ts

@@ -4,6 +4,8 @@ import {TranslationProject} from '../../../model/translation-project';
 import {FILETYPE_XTB} from '@ngx-i18nsupport/ngx-i18nsupport-lib';
 import {IFileDescription} from '../../common/i-file-description';
 import {DownloadedFile} from '../downloaded-file';
+import {GithubConfiguration} from '../../github/github-configuration';
+import {DownloadUploadConfiguration} from '../download-upload-configuration';
 
 @Component({
   selector: 'app-translation-file-upload',
@@ -13,6 +15,7 @@ import {DownloadedFile} from '../downloaded-file';
 export class TranslationFileUploadComponent implements OnInit {
 
   @Input() createdProject?: TranslationProject;
+  @Input() configuration: DownloadUploadConfiguration;
   @Output() fileSelected: EventEmitter<IFileDescription> = new EventEmitter();
   @Output() masterXmlFileSelected: EventEmitter<IFileDescription> = new EventEmitter();