界面优化

public/index.html

@@ -6,11 +6,9 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
-<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
-    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
-    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
-
-
+  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
+  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <title>vue</title>
 </head>

src/App.vue

 <template>
   <div id="app">
-    <div class="btn-group">
-      <ul>
-        <div v-for="(availableWidget,index) in availableWidgets" :key="index">
-          <li>
-            <a href="#" v-on:click="addWidget(availableWidget)">{{availableWidget}}</a>
-          </li>
-        </div>
-      </ul>
-    </div>
-    <button @click="saveWidgetList">Save</button>
-    <input id="file" type="file" @change="loadTextFromFile" />
-    <!-- <button @click="toggleShowAddWidget">Add</button>
-    <div v-show="isShowAddWidget">
-      <div v-for="(availableWidget,index) in availableWidgets" :key="index">
-        <button v-on:click="addWidget(availableWidget)">{{availableWidget}}</button>
-      </div>
-    </div>-->
-     <div v-for="(widget,index) in widgetList" :key="index">
-      <component :is="widget.widgetComponentName" :ref="widget.ref"></component>
-    </div> 
+    <b-navbar class="Widget">
+      <b-dropdown id="dropdown-1" text="Add Widget" class="m-md-2" variant="primary">
+        <b-dropdown-item v-for="(availableWidget,index) in availableWidgets" :key="index">
+            <div v-on:click="addWidget(availableWidget)">{{availableWidget}}</div>
+        </b-dropdown-item>
+      </b-dropdown>
+      <b-button @click="saveWidgetList" style="margin-left:2%" variant="primary">Save</b-button>
+      <b-form-file  id="file" type="file" @change="loadTextFromFile" placeholder="Choose a widgetTemplate file to laod" accept=".json" style="width:30%;margin-left:2%" />
+    </b-navbar>
+    
+
+    <grid-layout
+            :layout.sync="widgetList"
+            :col-num="12"
+            :row-height="30"
+            :is-draggable="true"
+            :is-resizable="true"
+            :is-mirrored="false"
+            :vertical-compact="true"
+            :margin="[10, 10]"
+            :use-css-transforms="true"
+    >
+       <grid-item v-for="(widget) in widgetList"
+                   :x="widget.x"
+                   :y="widget.y"
+                   :w="widget.w"
+                   :h="widget.h"
+                   :i="widget.i"
+                   :key="widget.i">
+            <div style="height:20px;background-color:rgb(0, 123, 255)"> </div>
+            <component :is="widget.widgetComponentName" :ref="widget.ref"></component>
+        </grid-item>
+    </grid-layout>
 
   </div>
 </template>
@@ -29,6 +42,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import axios from "axios";
+import {  GridItemData,GridLayout,GridItem} from 'vue-grid-layout';
 
 import { WidgetRef } from "./models/WidgetRef";
 import { WidgetConfig, AllWidgetConfig } from "./models/WidgetConfig";
@@ -48,7 +62,9 @@ import Config from "./components/Config/Config.vue";
     Status,
     WaveView,
     Method,
-    Config
+    Config,
+    GridLayout,
+    GridItem
   }
 })
 export default class App extends Vue {
@@ -65,22 +81,21 @@ export default class App extends Vue {
     this.isShowAddWidget = !this.isShowAddWidget;
   }
 
-  UIAutomaticGenerated() {
+  async UIAutomaticGenerated() {
     var fragment = window.location.hash;
     if (fragment != "#") {
-      axios
-        .get(" ")
-        .then(function(response) {
-          // handle success
-          console.log(response);
-        })
-        .catch(function(error) {
-          // handle error
-          console.log(error);
-        })
-        .then(function() {
-          // always executed
-        });
+      fragment = fragment.substring(1,fragment.length-1);
+      var customViewURL = "/customView" + fragment;
+      await axios.get(customViewURL).then(response => {
+        var widgets = Object.assign(
+        new AllWidgetConfig(),
+        JSON.parse(response.data.ObjectVal)
+      );
+       this.widgetList = widgets.widgetList;
+       this.lastWidgetIndex = Number(widgets.currentRef);
+       this.importActiveWidgetList();
+
+    });
     }
   }
 
@@ -147,6 +162,8 @@ export default class App extends Vue {
     var newWidget = new WidgetRef();
     newWidget.widgetComponentName = widgetName;
     newWidget.ref = this.lastWidgetIndex.toString();
+    newWidget.y=this.lastWidgetIndex*4;
+    newWidget.i=Number(newWidget.ref);
     this.lastWidgetIndex++;
     this.widgetList = [...this.widgetList, newWidget];
   }
@@ -171,6 +188,9 @@ export default class App extends Vue {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+.Widget{
+  width: 100%;
+  border-color: rgb(206, 212, 218);
 }
 </style>

src/components/Status/Status.vue

 <template>
-  <div class="Status">
+  <!-- <b-card class="Status">
     <p>{{ config.data.url }}</p>
-    <p>{{ StatusValue }}</p>
     <button @click="showPathConfig">Setting</button>
+    <p>{{ StatusValue }}</p>
     <div v-show="isShowPath">
       <input v-model="config.data.url" />
       <button @click="updateUI">OK</button>
     </div>
     <WidgetParams ref="WidgetParams" v-show="isShowParams" action="get"  @updataVariables="viewLoad" ></WidgetParams>
-  </div>
+  </b-card> -->
+  <b-container class="bv-example-row">
+    <b-row style="margin-top:10px">
+      <b-col>
+        <span style="float:left;font-size:20px">path: {{ config.data.url }}</span>
+      </b-col>
+      <b-col>
+        <b-button @click="showPathConfig" variant="primary" style="float:right"><span class="glyphicon glyphicon-cog"></span></b-button>
+      </b-col>
+      <hr />
+    </b-row>
+    <div style="width:100%">
+      <span style="float:left;font-size:20px">{{ StatusValue }}</span>
+      <hr />
+    </div>
+    <div v-show="isShowPath">
+      <input v-model="config.data.url" />
+      <button @click="updateUI">OK</button>
+    </div>
+    <WidgetParams ref="WidgetParams" v-show="isShowParams" action="get"  @updataVariables="viewLoad" ></WidgetParams>
+  </b-container>
 </template>
 
 <script lang="ts">
@@ -48,7 +68,6 @@ export default class Status extends Widget {
       userInputData: ""
     }
   };
-  tempUrl: string = "";
 
   created() {
     // this.config.data.userInputData = this.userInputData;
@@ -90,9 +109,15 @@ export default class Status extends Widget {
     (this.$refs.WidgetParams as WidgetParams).setVariableInput(this.userInputData);
   }
 
+  replaceStartPath(startPath:string)
+  {
+
+  }
+
   parentUpdate(payload: UpdatePayload): void {
     
   }
+
   refresh() {
     var Args: UpdatePayload = {
       action: "get",
@@ -130,4 +155,5 @@ export default class Status extends Widget {
   width: 100%;
   height: auto;
 }
+
 </style>
\ No newline at end of file

src/models/WidgetRef.ts

@@ -6,4 +6,10 @@ export class WidgetRef {
   public widgetComponentName: string = '';
   public ref: string = '';
   public widgetConfig?: WidgetConfig;
+  //below is for grid layout
+  public x:number=0;
+  public y:number=0;
+  public w:number=4;
+  public h:number=4;
+  public i:number=0;
 }

src/models/wiget.ts

@@ -15,6 +15,8 @@ export abstract class Widget extends Vue {
   public abstract parentUpdate(paylosd: UpdatePayload): void;
   public abstract refresh(): void;
   public abstract updateUI(): void;
+  // public abstract replaceStartPath(startPath:string):void;
+
 //   public poke(sample: object): PokePath
 //   {
 //     let pokePath:PokePath;