파일 시스템logger추가

.eslintrc.js

@@ -17,10 +17,12 @@ module.exports = {
         "babel/camelcase": 1,
         "babel/no-invalid-this": 1,
         "babel/object-curly-spacing": 1,
-        "babel/quotes": 1,
+        "babel/quotes": 0,
         "babel/semi": 1,
         "babel/no-unused-expressions": 1,
-        "babel/valid-typeof": 1
+        "babel/valid-typeof": 1,
+        "@typescript-eslint/explicit-function-return-type":0,
+        "@typescript-eslint/no-use-before-define":0
     }
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mockup-server",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "private": true,
   "scripts": {
     "build": "vue-cli-service build",
@@ -15,14 +15,17 @@
     "@types/cors": "^2.8.6",
     "@types/express": "^4.17.2",
     "@types/node": "^12.12.6",
+    "axios": "^0.19.0",
     "body-parser": "^1.19.0",
     "core-js": "^2.6.10",
     "cors": "^2.8.5",
     "eslint-plugin-babel": "^5.3.0",
     "express": "^4.17.1",
+    "moment": "^2.24.0",
     "style-loader": "^1.0.0",
     "ts-loader": "^6.2.1",
     "vue": "^2.6.10",
+    "vue-axios": "^2.1.5",
     "vue-class-component": "^7.0.2",
     "vue-property-decorator": "^8.3.0",
     "vue-router": "^3.0.3",
@@ -71,4 +74,4 @@
     "last 2 versions"
   ],
   "main": "background.js"
-}
+}

src/App.vue

@@ -1,24 +1,70 @@
 <template lang="pug">
-  v-app(dark)
+  v-app(dark  style="-webkit-app-region: drag")
     v-app-bar(app)
-      v-toolbar-title.headline.text-uppercase
-        span Mockup Server
+      v-toolbar-title.headline
+        span Mockup 
+        | {{'v'+packageVersion}}
       v-spacer
-      v-btn(text @click="openBrowser()")
-        span.mr-2 Latest Release
-        v-icon mdi-open-in-new
+      v-btn(v-if="diffResult === true" text @click="openBrowser()")
+        v-badge(overlap='', color='red' :overlap="false")
+          template(v-slot:badge='')
+            | New {{newVersion}}
+          span.mr-2 Latest Release
+          v-icon mdi-open-in-new
+      v-btn(v-else)
+          span.mr-2 github
+          v-icon mdi-open-in-new
     v-content
       router-view
-</template>
+</template>　　 
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-const shell = require("electron").shell;
+import fs from 'fs';
+import {Component, Vue} from 'vue-property-decorator';
+const shell = require('electron').shell;
 @Component
-export default class ComponentName extends Vue {
-  private openBrowser(): void {
-    shell.openExternalSync("https://github.com/joon610/mock-server/releases");
-    return;
-  }
+  export default class ComponentName extends Vue {
+    private newVersion = '';
+    private packageVersion = '';
+
+    private openBrowser() {
+        shell.openExternalSync(
+            'https://github.com/joon610/mock-server/releases',
+        );
+        return;
+    }
+
+    private created() {
+      this.getNewRelease();
+      this.getCurrentVersion();
+    }
+
+    private get diffResult() {
+      if(this.newVersion === '') return false;
+      if(this.packageVersion === '') return false;
+      console.log('this.newVersion :', this.newVersion);
+      console.log('this.packageVersion :', this.packageVersion);
+      const githubVersionNum = Number(this.removeVersion(this.removePoint(this.newVersion)));
+      const packageVersionNum = Number(this.removePoint(this.packageVersion));
+      console.log('object :', githubVersionNum > packageVersionNum ? true:false);
+      return githubVersionNum > packageVersionNum ? true:false;
+    }
+
+
+    private async getNewRelease(){
+      const url = "https://api.github.com/repos/joon610/mockup-server/releases/latest";
+      const response = await this.axios.get(url);
+      const data = response?.data?.name;
+      this.newVersion = data;
+    }
+
+    private getCurrentVersion() {
+      const json = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+      this.packageVersion = json.version;
+    }
+
+    private removePoint = (value:string):string => (value.replace(/\./g ,''));
+    private removeVersion = (value:string):string => (value.replace(/v/ ,''));
+
 }
 </script>

src/background.ts

@@ -15,15 +15,17 @@ protocol.registerSchemesAsPrivileged([
 ]);
 
 function createWindow(): void {
-    let appWidth = 570;
+    let appWidth = 878;
     if (process.platform === 'darwin') {
-        appWidth = 540;
+        appWidth = 840;
     }
     // Create the browser window.
     win = new BrowserWindow({
         resizable: true,
         width: appWidth,
-        height: 600,
+        transparent: isDevelopment? false: true, 
+        frame: isDevelopment? true: false,
+        height: 760,
         webPreferences: {
             nodeIntegration: true,
         },

src/components/ApiList.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import {Component, Prop, Vue} from "vue-property-decorator";
 import MockupServer from "@/utils/server/mockupServer";
-import { ApiInfo } from "@/const/mockType";
+import {ApiInfo} from "@/const/mockType";
 
 import {
   LOCAL_HOST,
@@ -27,7 +27,6 @@ const shell = require("electron").shell;
 @Component
 export default class ApiList extends Vue {
   private get hasApiList(): boolean {
-    console.log("object :", this.$store.getters.apiInfoList);
     return this.$store.getters.apiInfoList.length === 0 ? true : false;
   }
 
@@ -98,12 +97,12 @@ button {
   display: inline-block;
 
   background-color: #424242;
-  border-radius: 5px;
-  margin-bottom: 5px;
+  padding-bottom: 5px;
   justify-content: center;
   vertical-align: middle;
   height: 50px;
-  width: 510px;
+  border-bottom: 3px solid #303030;
+  /* width: 510px; */
   display: flex;
 }
 .api-container:hover {
@@ -142,10 +141,6 @@ button {
   text-align: left;
   padding: 10px;
 }
-
-.api-list-container {
-  width: 340px;
-}
 .api-path {
   width: 250px;
   float: left;
@@ -157,6 +152,11 @@ button {
   white-space: nowrap;
 }
 
+.api-container .radio-group .v-input__control .v-input__slot{
+  margin-bottom: 0 !important;
+}
+
+
 .http-method {
   line-height: 50px;
   width: 50px;
@@ -165,13 +165,19 @@ button {
 
 .radio-style {
   height: 50px;
+  margin-right: 10px;
+  padding: 0;
 }
 
 .radio-group {
   margin: 0px;
   padding: 0px;
+  display: contents;
+}
+.v-input__slot {
+  margin: 0px !important;
+  padding: 0px !important;
 }
-
 .loacalhost-label {
   height: 48px;
   line-height: 48px;

src/components/Logger.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+    .log-container
+        .log-info
+            | GET  /index.js
+        .log-request
+            | Request : {{request}} 
+</template>>
+
+<script lang="ts">
+import {Component, Prop, Vue} from 'vue-property-decorator';
+
+@Component
+export default class ComponentName extends Vue {
+    request = {
+        test :'hello'
+    };
+}
+</script>
+
+<style scoped>
+ .log-info {
+    background: dimgray;
+ }
+.log-request {
+    background: none;    
+ }
+</style>

src/main.ts

@@ -3,7 +3,10 @@ import App from './App.vue';
 import router from './router';
 import store from './store';
 import vuetify from './plugins/vuetify';
-
+import axios from 'axios';
+import VueAxios from 'vue-axios'
+
+Vue.use(VueAxios, axios)
 Vue.config.productionTip = false;
 
 new Vue({

src/store.ts

@@ -1,20 +1,36 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { stat } from 'fs';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
     state: {
         apiInfoList: [],
+        apiRequestLog: [],
+        rootPath: '',
     },
     getters: {
         apiInfoList: state => {
             return state.apiInfoList;
         },
+        apiRequestLog: state => {
+            return state.apiRequestLog;
+        },
+        rootPath: state =>{
+            return state.rootPath;
+        }
     },
     mutations: {
         apiInfoList(state, payload): void {
             state.apiInfoList = payload;
         },
+        rootPath(state,payload):void {
+            state.rootPath = payload;
+        },
+        apiRequest(state,payload):void {
+            state.apiRequestLog = payload;
+        }
+
     },
 });

src/utils/server/jsonLogic.ts

@@ -11,7 +11,7 @@ export default class JsonLogic {
             }, false);
 
             if (!hasKey) {
-                if (Object.keys(req.body).length !== 0) {
+                if (req.body?.id) {
                     restful.index.push(req.body);
                 }
             }