Merge pull request #4 from CookieRamen/dev

Dev

angular.json

@@ -25,7 +25,8 @@
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/_redirects"
             ],
             "styles": [
               "src/styles.scss"
@@ -134,5 +135,8 @@
       }
     }
   },
-  "defaultProject": "MiAS"
-}
+  "defaultProject": "MiAS",
+  "cli": {
+    "analytics": false
+  }
+}

package.json

@@ -12,42 +12,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.1.0",
-    "@angular/common": "^9.1.0",
-    "@angular/compiler": "^9.1.0",
-    "@angular/core": "^9.1.0",
-    "@angular/forms": "^9.1.0",
-    "@angular/localize": "^9.1.0",
-    "@angular/platform-browser": "^9.1.0",
-    "@angular/platform-browser-dynamic": "^9.1.0",
-    "@angular/router": "^9.1.0",
-    "@ng-bootstrap/ng-bootstrap": "^6.0.2",
-    "@sweetalert2/ngx-sweetalert2": "^8.0.0",
-    "bootstrap": "^4.4.1",
+    "@angular/animations": "^9.1.9",
+    "@angular/common": "^9.1.9",
+    "@angular/compiler": "^9.1.9",
+    "@angular/core": "^9.1.9",
+    "@angular/forms": "^9.1.9",
+    "@angular/localize": "^9.1.9",
+    "@angular/platform-browser": "^9.1.9",
+    "@angular/platform-browser-dynamic": "^9.1.9",
+    "@angular/router": "^9.1.9",
+    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
+    "@sweetalert2/ngx-sweetalert2": "^8.1.0",
+    "bootstrap": "^4.5.0",
     "core-js": "^2.6.11",
-    "ngx-clipboard": "^13.0.0",
-    "rxjs": "~6.5.4",
-    "sweetalert2": "^9.10.7",
-    "tslib": "^1.10.0",
+    "ngx-clipboard": "^13.0.1",
+    "rxjs": "^6.5.5",
+    "sweetalert2": "^9.14.2",
+    "tslib": "^1.13.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.0",
-    "@angular/cli": "^9.1.0",
-    "@angular/compiler-cli": "^9.1.0",
-    "@angular/language-service": "^9.1.0",
+    "@angular-devkit/build-angular": "^0.901.7",
+    "@angular/cli": "^9.1.7",
+    "@angular/compiler-cli": "^9.1.9",
+    "@angular/language-service": "^9.1.9",
     "@types/jasmine": "^2.8.16",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^12.11.1",
+    "@types/node": "^12.12.44",
     "codelyzer": "^5.1.2",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~3.0.0",
     "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "^2.0.6",
+    "karma-coverage-istanbul-reporter": "^2.1.1",
     "karma-jasmine": "~1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "^5.4.3",
+    "protractor": "^5.4.4",
     "ts-node": "~7.0.0",
     "tslint": "~5.11.0",
     "typescript": "~3.8.3"

src/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/app/app.component.html

@@ -26,7 +26,7 @@
     </div>
     <div class="row">
       <div class="col-md-12 text-center">
-        <p class="mt-2 mb-0">© 2018 Arksoft.</p>
+        <p class="mt-2 mb-0">© 2018 - 2020 Arksoft.</p>
       </div>
     </div>
   </div>

src/app/theme/add/add.component.html

@@ -1,4 +1,5 @@
 <swal #addSuccess title="テーマを共有しました" icon="success" timer="1500" [focusCancel]="true" [showConfirmButton]="false"></swal>
+<swal #addError title="テーマの形式が正しくないか<br>既に登録されています" icon="error" timer="1500" [focusCancel]="true" [showConfirmButton]="false"></swal>
 
 
 <div class="py-5 text-center text-white" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(/assets/img/bg1.jpg);  background-position: center center, center center;  background-size: cover, cover;  background-repeat: repeat, repeat;" >
@@ -9,7 +10,8 @@ <h1 class="text-light">テーマの共有</h1>
         <p class="mb-4 lead text-light">あなたが作成した最高のテーマを他のミスキストにも共有しましょう！</p>
         <form>
           <textarea class="form-control my-3" id="form26" rows="3" placeholder="ここにテーマのコードを貼り付けてください" (input)="code = $event.target.value"></textarea>
-          <button type="button" class="btn btn-primary btn-block" (click)="submit()" [disabled]="!code">共有</button>
+          <input class="form-control" type="text" id="form27" placeholder="削除用パスワード" (input)="delkey = $event.target.value">
+          <button type="button" class="btn btn-primary btn-block" (click)="submit()" [disabled]="!code || !delkey">共有</button>
         </form>
       </div>
     </div>

src/app/theme/add/add.component.ts

@@ -11,7 +11,9 @@ import {Router} from '@angular/router';
 })
 export class AddComponent implements OnInit {
   @ViewChild('addSuccess', { static: true }) private addSuccess: SwalComponent;
-  code: any;
+  @ViewChild('addError', { static: true }) private addError: SwalComponent;
+  code: string;
+  delkey: string;
   constructor(
     private httpClient: HttpClient,
     private router: Router
@@ -21,7 +23,12 @@ export class AddComponent implements OnInit {
   }
 
   submit() {
-    const body = 'theme=' + JSON.stringify(new Function('return ' + this.code)());
+    if (!this.isValidJson(this.code)) {
+      this.addError.fire();
+      return;
+    }
+
+    const body = 'theme=' + JSON.stringify(new Function('return ' + this.code)()) + '&delkey=' + this.delkey;
     const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');
     const options = {headers: headers};
     this.httpClient.post(environment.api + '/api/themes/add', body, options)
@@ -30,9 +37,20 @@ export class AddComponent implements OnInit {
           this.addSuccess.fire().then(() => {
             this.router.navigate(['/theme/list']);
           });
+        }, error => {
+          this.addError.fire();
         }
       );
 
   }
 
+  isValidJson(value) {
+    try {
+      JSON.parse(value);
+    } catch (e) {
+      return false;
+    }
+    return true;
+  }
+
 }

src/app/theme/list/list.component.html

@@ -7,35 +7,80 @@ <h2>テーマ一覧</h2>
   </section>
 
   <section class="section">
+    <div class="btn-group btn-group-toggle" data-toggle="buttons">
+      <label class="btn btn-light" [class.active]="selectVersion == 11" (click)="selectVersion = 11">v11</label>
+      <label class="btn btn-light" [class.active]="selectVersion == 12" (click)="selectVersion = 12">v12</label>
+    </div>
+
     <div class="theme-previews row">
-      <ng-template ngFor let-data [ngForOf]="list">
-        <div class="col-md-4 py-2">
-          <div class="col-12 theme-preview-post" [style.background-color]="data.vars.secondary">
-            <div class="mb-2 row">
-              <div class="col-3">
-                <div class="theme-preview-icon my-3" [style.background-color]="data.vars.primary"></div>
+      <ng-template [ngIf]="selectVersion == 11">
+        <ng-template ngFor let-data [ngForOf]="list">
+          <ng-template [ngIf]="data?.version === 11">
+            <div class="col-md-4 py-2">
+              <div class="col-12 theme-preview-post" [style.background-color]="data?.theme.vars.secondary">
+                <div class="mb-2 row">
+                  <div class="col-3">
+                    <div class="theme-preview-icon my-3" [style.background-color]="data?.theme.vars.primary"></div>
+                  </div>
+                  <div class="col-9">
+                    <div class="mt-1" [style.color]="data?.theme.vars.primary">{{data?.theme.name}}</div>
+                    <div class="theme-preview-body" [style.color]="data?.theme.vars.text">
+                      <ul class="list-unstyled">
+                        <li>テーマを作った人:</li>
+                        <li>{{data?.theme.author}}</li>
+                        <hr [style.border-color]="data?.theme.vars.text">
+                        <li>テーマの説明:</li>
+                        <li>{{data?.theme.desc}}</li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
               </div>
-              <div class="col-9">
-                <div class="mt-1" [style.color]="data.vars.primary">{{data.name}}</div>
-                <div class="theme-preview-body" [style.color]="data.vars.text">
-                  <ul class="list-unstyled">
-                    <li>テーマを作った人:</li>
-                    <li>{{data.author}}</li>
-                    <hr [style.border-color]="data.vars.text">
-                    <li>テーマの説明:</li>
-                    <li>{{data.desc}}</li>
-                  </ul>
+              <button class="btn btn-block"
+                      [style.background-color]="data?.theme.vars.primary"
+                      [style.color]="data?.theme.vars.text"
+                      ngxClipboard
+                      (click)="copy.fire()"
+                      [cbContent]="data?.theme | json">テーマコードをコピー
+              </button>
+            </div>
+          </ng-template>
+        </ng-template>
+      </ng-template>
+
+      <ng-template [ngIf]="selectVersion == 12">
+        <ng-template ngFor let-data [ngForOf]="list">
+          <ng-template [ngIf]="data?.version === 12">
+            <div class="col-md-4 py-2">
+              <div class="col-12 theme-preview-post" [style.background-color]="data?.theme.props.panel">
+                <div class="mb-2 row">
+                  <div class="col-3">
+                    <div class="theme-preview-icon my-3" [style.background-color]="data?.theme.props.accent"></div>
+                  </div>
+                  <div class="col-9">
+                    <div class="mt-1" [style.color]="data?.theme.props.fg">{{data?.theme.name}}</div>
+                    <div class="theme-preview-body" [style.color]="data?.theme.props.fg">
+                      <ul class="list-unstyled">
+                        <li>テーマを作った人:</li>
+                        <li>{{data?.theme.author}}</li>
+                        <hr [style.border-color]="data?.theme.props.fg">
+                        <li>テーマの説明:</li>
+                        <li>{{data?.theme.desc}}</li>
+                      </ul>
+                    </div>
+                  </div>
                 </div>
               </div>
+              <button class="btn btn-block"
+                      [style.background-color]="data?.theme.props.bg"
+                      [style.color]="data?.theme.props.fg"
+                      ngxClipboard
+                      (click)="copy.fire()"
+                      [cbContent]="data?.theme | json">テーマコードをコピー
+              </button>
             </div>
-          </div>
-          <button class="btn btn-block"
-                  [style.background-color]="data.vars.primary"
-                  [style.color]="data.vars.text"
-                  ngxClipboard
-                  (click)="copy.fire()"
-                  [cbContent]="data | json">テーマコードをコピー</button>
-        </div>
+          </ng-template>
+        </ng-template>
       </ng-template>
     </div>
   </section>

src/app/theme/list/list.component.ts

@@ -11,6 +11,7 @@ import {SwalComponent} from '@sweetalert2/ngx-sweetalert2';
 export class ListComponent implements OnInit {
   @ViewChild('copy', { static: true }) private copy: SwalComponent;
   list = [];
+  selectVersion = 11;
   constructor(
     private httpClient: HttpClient
   ) { }
@@ -19,7 +20,11 @@ export class ListComponent implements OnInit {
     this.httpClient.get<any[]>(environment.api + '/api/themes/list')
       .subscribe(data => {
         data.forEach(a => {
-          this.list.push(JSON.parse(a.theme));
+          this.list.push({
+            id: a.id,
+            theme: JSON.parse(a.theme),
+            version: a.version
+          });
         });
       });
   }