Frontend improvements

2021-10-31 21:00:12 +01:00
parent c03e9d8262
commit 0fb161f550
4 changed files with 246 additions and 161 deletions
@@ -1,137 +1,207 @@
 <template lang="html">
  <v-sheet class="pa-4" elevation="8">
-    <p>Compare commit</p>
-    <v-row dense no-gutters>
-      <v-col cols="6">
-        <v-slide-group v-model="commitA" center-active show-arrows>
-          <v-slide-item
-            v-for="n in commits"
-            :key="n.id"
-            v-slot="{ active, toggle }"
-            :value="n"
-          >
-            <v-tooltip bottom>
-              <template v-slot:activator="{ on, attrs }">
-                <v-card
-                  v-bind="attrs"
-                  v-on="on"
-                  :color="active ? 'success' : 'primary lighten-1'"
-                  class="ma-1"
-                  height="100"
-                  width="40"
-                  @click="toggle"
-                >
-                  <div class="d-flex fill-height justify-center align-center">
-                    <v-scale-transition mode="out-in">
-                      <span v-if="!active" style="writing-mode: vertical-rl;">
-                        {{ n.id }}
-                      </span>
-                      <v-icon
-                        v-else
-                        color="white"
-                        size="20"
-                        v-text="'mdi-close-circle-outline'"
-                      ></v-icon>
-                    </v-scale-transition>
-                  </div>
-                </v-card>
-              </template>
-              <span>{{ n.message }}</span>
-            </v-tooltip>
-          </v-slide-item>
-        </v-slide-group>
-      </v-col>
-      <v-col cols="6">
-        <v-slide-group v-model="commitB" center-active show-arrows>
-          <v-slide-item
-            v-for="n in commits"
-            :key="n.id"
-            v-slot="{ active, toggle }"
-            :value="n"
-            :disabled="commitA && n.id === commitA['id']"
-          >
-            <v-tooltip bottom>
-              <template v-slot:activator="{ on, attrs }">
-                <v-card
-                  v-bind="attrs"
-                  v-on="on"
-                  :color="active ? 'success' : 'primary lighten-1'"
-                  class="ma-1"
-                  height="100"
-                  width="40"
-                  @click="toggle"
-                  :disabled="commitA && n.id === commitA['id']"
-                >
-                  <div class="d-flex fill-height justify-center align-center">
-                    <v-scale-transition mode="out-in">
-                      <span v-if="!active" style="writing-mode: vertical-rl;">
-                        {{ n.id }}
-                      </span>
-                      <v-icon
-                        v-else
-                        color="white"
-                        size="20"
-                        v-text="'mdi-close-circle-outline'"
-                      ></v-icon>
-                    </v-scale-transition>
-                  </div>
-                </v-card>
-              </template>
-              <span>{{ n.message }}</span>
-            </v-tooltip>
-          </v-slide-item>
-        </v-slide-group>
-      </v-col>
-      <div>
-        You are about to compare commit
-        <v-chip :close="commitA != null" @click:close="commitA = null">
-          {{ commitA ? commitA.id : "Select commit" }}
-        </v-chip>
-        against
-        <v-chip :close="commitB != null" @click:close="commitB = null">
-          {{ commitB ? commitB.id : "Select commit" }}
-        </v-chip>
-        <v-btn
-          color="success"
-          :disabled="!commitA || !commitB"
-          @click="requestDiff"
-        >
-          Run this!
-        </v-btn>
-      </div>
-    </v-row>
+    <div>
+      Compare commit
+      <v-chip
+        :close="currentCommit != null"
+        @click:close="$emit('update:currentCommit', null)"
+        @click="show_commit_selector = 'A'"
+      >
+        {{ currentCommit ? currentCommit.id : "Select commit" }}
+      </v-chip>
+      against
+      <v-chip
+        :close="prevCommit != null"
+        @click:close="$emit('update:prevCommit', null)"
+        @click="show_commit_selector = 'B'"
+      >
+        {{ prevCommit ? prevCommit.id : "Select commit" }}
+      </v-chip>
+      <v-btn
+        color="success"
+        :disabled="!currentCommit || !prevCommit"
+        :loading="loading"
+        @click="requestDiff"
+      >
+        Request diff
+      </v-btn>
+      <v-btn :disabled="!diffCommit" color="primary" @click="toggleDiffView">
+        {{ showDiff ? "View commits" : "View diff" }}
+      </v-btn>
+    </div>
+
+    <v-slide-group
+      v-if="show_commit_selector == 'A'"
+      :value="currentCommit"
+      @change="$emit('update:currentCommit', $event)"
+      center-active
+      show-arrows
+    >
+      <v-slide-item
+        v-for="n in commits"
+        :key="n.id"
+        v-slot="{ active, toggle }"
+        :value="n"
+        :disabled="prevCommit && n.id === prevCommit['id']"
+      >
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-card
+              v-bind="attrs"
+              v-on="on"
+              :color="active ? 'success' : 'primary lighten-1'"
+              class="ma-1"
+              height="100"
+              width="40"
+              @click="toggle"
+              v-on:click="show_commit_selector = null"
+              :disabled="prevCommit && n.id === prevCommit['id']"
+            >
+              <div class="d-flex fill-height justify-center align-center">
+                <v-scale-transition mode="out-in">
+                  <span v-if="!active" style="writing-mode: vertical-rl;">
+                    {{ n.id }}
+                  </span>
+                  <v-icon
+                    v-else
+                    color="white"
+                    size="20"
+                    v-text="'mdi-close-circle-outline'"
+                  ></v-icon>
+                </v-scale-transition>
+              </div>
+            </v-card>
+          </template>
+          <span>{{ n.message }}</span>
+        </v-tooltip>
+      </v-slide-item>
+    </v-slide-group>
+
+    <v-slide-group
+      v-else-if="show_commit_selector == 'B'"
+      :value="prevCommit"
+      @change="$emit('update:prevCommit', $event)"
+      center-active
+      show-arrows
+    >
+      <v-slide-item
+        v-for="n in commits"
+        :key="n.id"
+        v-slot="{ active, toggle }"
+        :value="n"
+        :disabled="currentCommit && n.id === currentCommit['id']"
+      >
+        <v-tooltip bottom>
+          <template v-slot:activator="{ on, attrs }">
+            <v-card
+              v-bind="attrs"
+              v-on="on"
+              :color="active ? 'success' : 'primary lighten-1'"
+              :disabled="currentCommit && n.id === currentCommit['id']"
+              class="ma-1"
+              height="100"
+              width="40"
+              @click="toggle"
+              v-on:click="show_commit_selector = null"
+            >
+              <div class="d-flex fill-height justify-center align-center">
+                <v-scale-transition mode="out-in">
+                  <span v-if="!active" style="writing-mode: vertical-rl;">
+                    {{ n.id }}
+                  </span>
+                  <v-icon
+                    v-else
+                    color="white"
+                    size="20"
+                    v-text="'mdi-close-circle-outline'"
+                  ></v-icon>
+                </v-scale-transition>
+              </div>
+            </v-card>
+          </template>
+          <span>{{ n.message }}</span>
+        </v-tooltip>
+      </v-slide-item>
+    </v-slide-group>
  </v-sheet>
 </template>

-<script>
+<script lang="js">
 import { TOKEN } from "@/speckleUtils"

 export default {
  name: "CommitPanel",
  components: {},
-  props: ["commits"],
+  props: ["commits", "diffCommit", "showDiff", "currentCommit", "prevCommit"],
  data() {
    return {
-      commitA: null,
-      commitB: null
+      show_commit_selector: null,
+      loading: false,
    }
  },
  methods: {
-    async requestDiff() {
-      console.log("diff requested for", this.commitA.id, this.commitB.id)
-      var diffUrl = `http://localhost:8000/diff/${this.$route.params.id}/${this.commitA.id}/${this.commitB.id}`
-      console.log(diffUrl)
-      fetch(diffUrl, {
+    toggleDiffView(){
+      this.$emit("update:showDiff", !this.showDiff)
+    },
+    async doesDiffExist(){
+      console.log("diff check requested for", this.currentCommit.id, this.prevCommit.id)
+      var diffUrl = `http://localhost:8000/diff_check/${this.$route.params.id}/${this.currentCommit.id}/${this.prevCommit.id}`
+      var res = await fetch(diffUrl, {
        headers: {
-          method: "POST",
-          cors: "no-cors",
+          method: "GET",
          Authorisation: `Bearer ${localStorage.getItem(TOKEN)}`,
          "Content-type": "application/json",
          "Access-Control-Allow-Origin": "*"
        }
      })
-        .then(async res => console.log("fetch success", await res.json(), res))
-        .catch(err => console.warn("fetch failed", err))
+      return await res.json()
+    },
+    async requestDiff() {
+      this.loading = true
+      console.log("diff requested for", this.currentCommit.id, this.prevCommit.id)
+      var diffUrl = `http://localhost:8000/diff/${this.$route.params.id}/${this.currentCommit.id}/${this.prevCommit.id}`
+      var res = await fetch(diffUrl, {
+        headers: {
+          method: "GET",
+          Authorisation: `Bearer ${localStorage.getItem(TOKEN)}`,
+          "Content-type": "application/json",
+          "Access-Control-Allow-Origin": "*"
+        }
+      })
+      if(res.status == 200){
+        var body = await res.json()
+        console.log("diff body", res, body)
+        this.$emit("update:diffCommit", body.commit)
+      }
+      this.loading = false
+    },
+  },
+  watch: {
+    currentCommit: {
+      handler: async function(newVal, oldVal) {
+        this.$emit("current-commit", newVal)
+        this.loading = true
+        if(newVal && this.prevCommit){
+          var diffRes = await this.doesDiffExist()
+          console.log(diffRes)
+          if(diffRes.exists)
+            this.$emit("update:diffCommit", diffRes.commit)
+        }
+        this.loading = false
+      }
+    },
+    prevCommit: {
+      handler: async function(newVal, oldVal){
+        this.$emit("prev-commit", newVal)
+        this.loading = true
+        if(newVal && this.currentCommit){
+          var diffRes = await this.doesDiffExist()
+          console.log(diffRes)
+          if(diffRes.exists)
+            this.$emit("update:diffCommit", diffRes.commit)
+        }
+        this.loading = false
+      }
    }
  }
 }
@@ -213,6 +213,7 @@ import throttle from "lodash.throttle"
 import { Viewer } from "@speckle/viewer"
 import { TOKEN } from "@/speckleUtils"
 import ObjectSimpleViewer from "@/components/viewer/ObjectSimpleViewer"
+import { debounce } from "debounce"

 export default {
  components: { ObjectSimpleViewer },
@@ -221,8 +222,8 @@ export default {
      type: Boolean,
      default: false
    },
-    objectUrls: {
-      type: Array,
+    objectUrl: {
+      type: String,
      default: null
    },
    unloadTrigger: {
@@ -236,6 +237,10 @@ export default {
    embeded: {
      type: Boolean,
      default: false
+    },
+    controls: {
+      type: Object,
+      default: null
    }
  },
  data() {
@@ -277,7 +282,9 @@ export default {
        this.namedViews.push(...views)
      }
    },
-    objectUrls() {
+    objectUrl(newVal, oldVal) {
+      console.log("obj urls changed", newVal, oldVal)
+      if (newVal == oldVal) return
      this.unloadData()
      this.load()
    }
@@ -289,8 +296,9 @@ export default {
    if (!this.viewer) {
      this.viewer = new Viewer({ container: this.$refs.renderer })
    }
-
+    this.$emit("update:controls", this.viewer.controls)
    this.viewer.onWindowResize()
+    console.log("viewer", this.viewer)
    this.setupEvents()
  },
  beforeDestroy() {
@@ -338,12 +346,10 @@ export default {
      })
    },
    load() {
-      if (!this.objectUrls || this.objectUrls.length === 0) return
-      this.viewer.onWindowResize()
-      this.objectUrls?.forEach(url => {
-        this.viewer.loadObject(url, localStorage.getItem(TOKEN))
-        this.viewerLastLoadedUrl = url
-      })
+      if (!this.objectUrl) return
+      this.viewer.loadObject(this.objectUrl, localStorage.getItem(TOKEN))
+      this.viewerLastLoadedUrl = this.objectUrl
+
      this.setupEvents()
      this.hasLoadedModel = true
    },
@@ -1,5 +1,3 @@
-
-
 export const userInfoQuery = `
  query {
    user {
@@ -20,17 +18,19 @@ export const streamCommitsQuery = `
      name
      updatedAt
      id
-      commits(limit: $limit, cursor: $cursor) {
-        totalCount
-        cursor
-        items{
-          id
-          message
-          branchName
-          sourceApplication
-          referencedObject
-          authorName
-          createdAt
+      branch(name: "main"){
+        commits(limit: $limit, cursor: $cursor) {
+          totalCount
+          cursor
+          items{
+            id
+            message
+            branchName
+            sourceApplication
+            referencedObject
+            authorName
+            createdAt
+          }
        }
      }
    }
@@ -72,4 +72,4 @@ export const latestStreamsQuery = `query {
            updatedAt
        }
    }
-}`
+}`
@@ -1,20 +1,36 @@
 <template lang="html">
  <v-container fill-height fluid class="pa-0">
    <div class="float-center-top">
-      <CommitPanel v-if="stream" :commits="stream.commits.items"></CommitPanel>
+      <CommitPanel
+        v-if="stream"
+        :showDiff.sync="showDiff"
+        :diffCommit.sync="diffCommit"
+        :currentCommit.sync="currentCommit"
+        :prevCommit.sync="prevCommit"
+        :commits="stream.branch.commits.items"
+      />
    </div>
-    <v-row class="fill-height" no-gutters>
-      <v-col fill-height cols="6">
+    <v-row class="fill-height" no-gutters v-show="!showDiff">
+      <v-col cols="6">
        <Renderer
-          v-if="stream"
-          :object-urls="[objectUrl(0)]"
+          :camera.sync="camera"
+          :object-url="objectUrl(currentCommit)"
          show-selection-helper
        ></Renderer>
      </v-col>
-      <v-col fill-height cols="6">
+      <v-col cols="6">
        <Renderer
-          v-if="stream"
-          :object-urls="[objectUrl(1)]"
+          :camera.sync="camera"
+          :object-url="objectUrl(prevCommit)"
+          show-selection-helper
+        ></Renderer>
+      </v-col>
+    </v-row>
+    <v-row class="fill-height" no-gutters>
+      <v-col fill-height :cols="12">
+        <Renderer
+          :camera.sync="camera"
+          :object-url="objectUrl(diffCommit)"
          show-selection-helper
        ></Renderer>
      </v-col>
@@ -33,11 +49,13 @@ export default {
  data() {
    return {
      stream: null,
-      selectedCommit: null,
-      refObj: null,
+      currentCommit: null,
+      prevCommit: null,
+      diffCommit: null,
      serverUrl: process.env.VUE_APP_SERVER_URL,
+      showDiff: false,
      loading: true,
-      progress: 0
+      camera: null
    }
  },
  async mounted() {
@@ -46,6 +64,7 @@ export default {
    }
  },
  computed: {
+    /** @return {string} */
    streamId() {
      return this.$route.params.id
    }
@@ -53,13 +72,11 @@ export default {
  methods: {
    async getStream() {
      var res = await getStreamCommits(this.streamId, 10, null)
-      this.selectedCommit = res.data.stream.commits.items[0]
      this.stream = res.data.stream
    },
-    objectUrl(i) {
-      return [
-        `${this.serverUrl}/streams/${this.stream.id}/objects/${this.stream.commits.items[i].referencedObject}`
-      ]
+    objectUrl(commit) {
+      if (!commit) return null
+      return `${this.serverUrl}/streams/${this.stream.id}/objects/${commit.referencedObject}`
    }
  },
  watch: {
@@ -67,14 +84,6 @@ export default {
      handler: async function(val, oldVal) {
        if (val) this.getStream()
      }
-    },
-    selectedCommit: {
-      handler: async function() {
-        this.refObj = await getStreamObject(
-          this.stream.id,
-          this.selectedCommit.referencedObject
-        )
-      }
    }
  }
 }