Update index.html

Dockerfile

@@ -3,6 +3,8 @@ FROM node:10 as build-stage
 WORKDIR /workspace/
 COPY ./client /workspace/client
 
+RUN npm config set registry https://registry.npm.taobao.org
+#RUN npm config get registry
 RUN npm install -g @vue/cli@3.3.0
 RUN npm install -g @vue/cli-service@3.3.0
 

README.md

@@ -1,3 +1,11 @@
+# Introduce
+
+This patch is specially provided by coco-annotator in Chinese Mainland
+
+- Both CSS and NPM addresses are domestic servers in China
+- Fixed the front-end malignant bug
+- Containing the core values of socialism with Chinese characteristics
+
 <p align="center"><img src="https://i.imgur.com/AA7IdbQ.png"></p>
 
 <p align="center">

client/public/index.html

@@ -6,7 +6,9 @@
 
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      <!-- href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" -->
+          <!--Not accessible in Chinese Mainland-->
+    <link rel=stylesheet href=https://cdnjs.loli.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
     />
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />

client/src/components/Pagination.vue

@@ -51,18 +51,27 @@ export default {
       if (this.page < 1) {
         this.page = 1;
       }
+      //this.$emit('fun','previous');
     },
     nextPage() {
       this.page += 1;
       if (this.page > this.pages) {
         this.page = this.pages;
       }
+      //this.$emit('fun','next');
     }
   },
   watch: {
     page(newPage, oldPage) {
       if (newPage === oldPage) return;
-
+       if(oldPage>newPage)
+       {
+             this.$emit('fun','previous','down',oldPage-newPage);
+       }
+       if(oldPage<newPage)
+       {
+             this.$emit('fun','next','down',newPage-oldPage);
+       }
       clearTimeout(this.timer);
       this.timer = setTimeout(() => this.$emit("pagechange", this.page), 0);
     }

client/src/components/PaginationCopy.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="row align-items-center justify-content-center bg-light">
+    <ul class="pagination text-center">
+      <li class="page-item" @click="previousPage">
+        <a class="page-link" aria-label="Previous">
+          <span aria-hidden="true">&laquo;</span>
+          <span class="sr-only">Previous</span>
+        </a>
+      </li>
+      <li
+        v-for="pageIndex in range"
+        :key="pageIndex"
+        :class="{ 'page-item': true, active: pageIndex + startPage == page }"
+      >
+        <a class="page-link" @click="page = pageIndex + startPage">{{
+          pageIndex + startPage
+        }}</a>
+      </li>
+      <li
+        :class="{ 'page-item': true, disabled: page == pages }"
+        @click="nextPage" ref="upload"
+      >
+        <a class="page-link" aria-label="Next">
+          <span aria-hidden="true">&raquo;</span>
+          <span class="sr-only">Next</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PaginationCopy",
+  props: {
+    pages: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      range: 11,
+      page: 1,
+      timer: null
+    };
+  },
+  methods: {
+    previousPage() {
+      this.page -= 1;
+      if (this.page < 1) {
+        this.page = 1;
+      }
+    },
+    nextPage() {
+      this.page += 1;
+      if (this.page > this.pages) {
+        this.page = this.pages;
+      }
+    }
+  },
+  watch: {
+    page(newPage, oldPage) {
+      if (newPage === oldPage) return;
+      if(this.$parent.pageSynchronous===1){
+       if(oldPage>newPage)
+       {
+             this.$emit('fun','previous','up',oldPage-newPage);
+       }
+       if(oldPage<newPage)
+       {
+             this.$emit('fun','next','up',newPage-oldPage);
+       }
+      }
+       else  this.$emit('changePage');
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => this.$emit("pagechange", this.page), 0);
+    }
+  },
+  computed: {
+    startPage() {
+      if (this.range > this.pages) {
+        return 0;
+      }
+
+      let range = Math.round(this.range / 2);
+      let start = this.page - range;
+
+      if (start < 0) return 0;
+
+      if (start > this.pages || start + this.range > this.pages) {
+        return this.pages - this.range;
+      }
+
+      return start;
+    }
+  },
+  created() {
+    if (this.range > this.pages) {
+      this.range = this.pages;
+    }
+  }
+};
+</script>
+
+<style>
+.page {
+  display: block;
+  margin: 0 auto;
+}
+</style>

client/src/views/Dataset.vue

@@ -53,11 +53,11 @@
             No images found in directory.
           </p>
           <div v-else>
-            <Pagination :pages="pages" @pagechange="updatePage" />
+            <Pagination :pages="pages" @pagechange="updatePage" ref= "bortherUp" @fun="fun" />
             <div class="row">
               <ImageCard v-for="image in images" :key="image.id" :image="image" />
             </div>
-            <Pagination :pages="pages" @pagechange="updatePage" />
+            <PaginationCopy :pages="pages" @pagechange="updatePage" ref= "bortherDown" @fun="fun" @changePage="changePage"/>
           </div>
 
         </div>
@@ -467,6 +467,7 @@ import Dataset from "@/models/datasets";
 import Export from "@/models/exports";
 import ImageCard from "@/components/cards/ImageCard";
 import Pagination from "@/components/Pagination";
+import PaginationCopy from "@/components/PaginationCopy";
 import PanelString from "@/components/PanelInputString";
 import PanelToggle from "@/components/PanelToggle";
 import PanelDropdown from "@/components/PanelInputDropdown"
@@ -482,6 +483,7 @@ export default {
   components: {
     ImageCard,
     Pagination,
+    PaginationCopy,
     PanelString,
     PanelToggle,
     PanelDropdown,
@@ -496,6 +498,7 @@ export default {
   },
   data() {
     return {
+      pageSynchronous: 1 ,
       pages: 1,
       generateLimit: 100,
       limit: 52,
@@ -601,6 +604,32 @@ export default {
           this.axiosReqestError("Loading Dataset", error.response.data.message);
         })
         .finally(() => this.removeProcess(process));
+    },
+     fun(data,name,pagenum){
+     if(this.pageSynchronous===1){
+     this.pageSynchronous=0;
+     if(name=='down'){
+      for(var i=0;i<pagenum;i++){
+        if(data=='next')
+        this.$refs.bortherDown.nextPage();
+        if(data=='previous')
+        this.$refs.bortherDown.previousPage()  ;
+        }
+      }
+     if(name=='up'){
+      for(var i=0;i<pagenum;i++){
+        if(data=='next')
+        this.$refs.bortherUp.nextPage();
+        if(data=='previous')
+        this.$refs.bortherUp.previousPage();
+        }
+       }
+       }
+       else this.pageSynchronous=1;
+
+      },
+      changePage() {
+     this.pageSynchronous=1;
     },
     getUsers() {
       Dataset.getUsers(this.dataset.id).then(response => {
@@ -838,6 +867,7 @@ export default {
     this.updatePage();
   },
   mounted() {
+    this.updatePage();
     window.addEventListener("mouseup", this.stopDrag);
     window.addEventListener("mousedown", this.startDrag);
   },