From 14afe2bbed9ef6e391684aa06551265e92424764 Mon Sep 17 00:00:00 2001
From: MarkXiLee <57758193+MarkXiLee@users.noreply.github.com>
Date: Fri, 29 Apr 2022 10:51:12 +0800
Subject: [PATCH 1/7] Update index.html

---
 client/public/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/public/index.html b/client/public/index.html
index ad1635ad..73c2680c 100755
--- a/client/public/index.html
+++ b/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" />

From 59299abe8bfbe6b0bbee25e2038ca62e0d78d696 Mon Sep 17 00:00:00 2001
From: MarkXiLee <57758193+MarkXiLee@users.noreply.github.com>
Date: Mon, 2 May 2022 18:42:38 +0800
Subject: [PATCH 2/7] Update Dockerfile

---
 Dockerfile | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/Dockerfile b/Dockerfile
index 325ee79b..ce4728d9 100644
--- a/Dockerfile
+++ b/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
 

From 08c52c098941050747988d8f1c5bec71dae2f43d Mon Sep 17 00:00:00 2001
From: MarkXiLee <57758193+MarkXiLee@users.noreply.github.com>
Date: Fri, 6 May 2022 09:32:04 +0800
Subject: [PATCH 3/7] Delete Dataset.vue

---
 client/src/views/Dataset.vue | 905 -----------------------------------
 1 file changed, 905 deletions(-)
 delete mode 100755 client/src/views/Dataset.vue

diff --git a/client/src/views/Dataset.vue b/client/src/views/Dataset.vue
deleted file mode 100755
index b9b8d887..00000000
--- a/client/src/views/Dataset.vue
+++ /dev/null
@@ -1,905 +0,0 @@
-<template>
-  <div @mousemove="mouseMove">
-    <div style="padding-top: 55px" />
-    
-    <div
-      class="bg-light"
-      :style="{ 'margin-left': sidebar.width + 'px' }"
-    >
-      <nav class="nav border-bottom shadow-sm" style="background-color: #4b5162">
-        <a class="btn tab" @click="tab = 'images'" :style="{'color': tab == 'images' ? 'white' : 'darkgray'}">
-          <i class="fa fa-picture-o" aria-hidden="true"></i> Images
-        </a>
-        <a class="btn tab" @click="tab = 'exports'" :style="{'color': tab == 'exports' ? 'white' : 'darkgray'}">
-          <i class="fa fa-share" aria-hidden="true"></i> Exports
-        </a>
-        <a class="btn tab" @click="tab = 'members'" :style="{'color': tab == 'members' ? 'white' : 'darkgray'}">
-          <i class="fa fa-users" aria-hidden="true"></i> Members
-        </a>
-        <a class="btn tab" @click="tab = 'statistics'" :style="{'color': tab == 'statistics' ? 'white' : 'darkgray'}">
-          <i class="fa fa-bar-chart" aria-hidden="true"></i> Statistics
-        </a>
-        <a class="btn tab" @click="tab = 'settings'" :style="{'color': tab == 'settings' ? 'white' : 'darkgray'}">
-          <i class="fa fa-cog" aria-hidden="true"></i> Settings
-        </a>
-      </nav>
-    
-      <div class="bg-light text-left" style="overflow: auto; height: calc(100vh - 100px); margin: 10px">
-        <div class="container" v-show="tab == 'images'">
-          
-          <ol class="breadcrumb">
-            <li class="breadcrumb-item"></li>
-            <li class="breadcrumb-item active">
-              <button class="btn btn-sm btn-link" @click="folders = []">
-                {{ dataset.name }}
-              </button>
-            </li>
-            <li
-              v-for="(folder, folderId) in folders"
-              :key="folderId"
-              class="breadcrumb-item"
-            >
-              <button
-                class="btn btn-sm btn-link"
-                :disabled="folders[folders.length - 1] === folder"
-                @click="removeFolder(folder)"
-              >
-                {{ folder }}
-              </button>
-            </li>
-          </ol>
-
-          <p class="text-center" v-if="images.length < 1">
-            No images found in directory.
-          </p>
-          <div v-else>
-            <Pagination :pages="pages" @pagechange="updatePage" />
-            <div class="row">
-              <ImageCard v-for="image in images" :key="image.id" :image="image" />
-            </div>
-            <Pagination :pages="pages" @pagechange="updatePage" />
-          </div>
-
-        </div>
-        <div class="container" v-show="tab == 'exports'">
-          <div class="card my-3 p-3 shadow-sm mr-2">
-            <h6 class="border-bottom border-gray pb-2"><b>Exports</b></h6>
-            
-            <div class="media text-muted pt-3" v-for="exp in datasetExports">
-              <div class="media-body lh-125 border-bottom border-gray">
-                  {{exp.id}}. Exported {{ exp.ago.length > 0 ? exp.ago : 0 + " seconds" }} ago
-                  <div style="display: inline">
-                    <span
-                      v-for="tag in exp.tags"
-                      class="badge badge-secondary"
-                      style="margin: 1px"
-                    >
-                      {{tag}}
-                    </span>
-                  </div>
-                  <button 
-                    class="btn btn-sm btn-success"
-                    style="float: right; margin: 2px; padding: 2px"
-                    @click="downloadExport(exp.id)"
-                  >
-                    Download
-                  </button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="container" v-show="tab == 'members'">
-
-          <div class="card my-3 p-3 shadow-sm mr-2">
-            <h6 class="border-bottom border-gray pb-2"><b>Invite Members</b></h6>
-            
-          </div>
-          
-          <div class="card my-3 p-3 shadow-sm mr-2">
-            <h6 class="border-bottom border-gray pb-2"><b>Existing Members</b></h6>
-            
-            <div class="media text-muted pt-3" v-for="user in users">
-              <img src="https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/256x256/plain/user.png" class="mr-2 rounded" style="width: 32px; height: 32px;">
-              <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
-                <div class="d-flex justify-content-between align-items-center w-100">
-                  <div class="text-gray-dark">
-                    <strong>{{ user.name }}</strong> @{{user.username}}
-                  </div>
-                  <a href="#">{{ user.group }}</a>
-                </div>
-                <span class="d-block">Last seen: {{ new Date(user.last_seen['$date']).toISOString().slice(0, 19).replace('T', ' ') }} UTC</span>
-              </div>
-            </div>
-          </div>
-
-        </div>
-        <div class="container" v-show="tab == 'statistics'">
-          <div v-if="stats == null">
-            Crunching numbers...
-          </div>
-
-          <div v-else>
-            <div class="row">
-              
-              <div v-if="stats.total" class="card my-3 p-3 shadow-sm col-3 mr-2">
-                <h6 class="border-bottom border-gray pb-2"><b>Total</b></h6>
-                <div class="row" v-for="stat in Object.keys(stats.total)">
-                  <strong class="col-8">{{stat}}:</strong>
-                  <span class="col-4">{{stats.total[stat].toFixed(0)}}</span>
-                </div>
-              </div>
-
-              <div v-if="stats.average" class="card my-3 p-3 shadow-sm col-4 mr-2">
-                <h6 class="border-bottom border-gray pb-2"><b>Average</b></h6>
-                <div class="row" v-for="stat in Object.keys(stats.average)">
-                  <strong class="col-8">{{stat}}:</strong>
-                  <span class="col-4">{{stats.average[stat].toFixed(0)}}</span>
-                </div>
-              </div>
-
-              <div v-if="stats.categories" class="card my-3 p-3 shadow-sm col-4 mr-2">
-                <h6 class="border-bottom border-gray pb-2"><b>Annotations Per Category</b></h6>
-                <div class="row" v-for="stat in Object.keys(stats.categories)">
-                  <strong class="col-8">{{stat}}:</strong>
-                  <span class="col-4">{{stats.categories[stat].toFixed(0)}}</span>
-                </div>
-              </div>
-
-              <div v-if="stats.images_per_category" class="card my-3 p-3 shadow-sm col-4 mr-2">
-                <h6 class="border-bottom border-gray pb-2"><b>Annotated Images Per Category</b></h6>
-                <div class="row" v-for="stat in Object.keys(stats.images_per_category)">
-                  <strong class="col-8">{{stat}}:</strong>
-                  <span class="col-4">{{stats.images_per_category[stat].toFixed(0)}}</span>
-                </div>
-              </div>
-
-              <div v-if="stats.users" class="card my-3 p-3 shadow-sm col-6 mr-2">
-                <h6 class="border-bottom border-gray pb-2"><b>Annotations per User</b></h6>
-                <h6 class="row border-bottom border-gray pb-2">
-                    <span class="col-4">Username</span>
-                    <span class="col-4">Annotations</span>
-                    <span class="col-4">Images</span>
-                </h6>
-                <div class="row" v-for="stat in Object.keys(stats.users)">
-                  <strong class="col-4">{{stat}}:</strong>
-                  <span class="col-4">{{stats.users[stat]["annotations"].toFixed(0)}}</span>
-                  <span class="col-4">{{stats.users[stat]["images"].toFixed(0)}}</span>
-                </div>
-              </div>
-
-            </div>
-            
-          </div>
-        </div>
-        <div class="container" v-show="tab == 'settings'">
-          <div class="card my-3 p-3 shadow-sm mr-2">
-            <h6 class="border-bottom border-gray pb-2"><b>Metadata</b></h6>
-            
-            <button 
-              class="btn btn-sm btn-block btn-danger"
-              @click="resetMetadata"
-            >
-              Rest All Metadata
-            </button>
-          </div>
-        </div>
-
-      </div>
-    </div>
-
-    <div
-      id="filter"
-      ref="sidebar"
-      class="sidebar"
-      :style="{ width: sidebar.width + 'px' }"
-    >
-      <div style="padding-top: 10px" />
-      <h3>{{ dataset.name }}</h3>
-      <p class="text-center" style="color: lightgray">
-        Total of <strong style="color: white">{{ imageCount }}</strong> images
-        displayed on <strong style="color: white">{{ pages }}</strong> pages.
-      </p>
-      <div class="row justify-content-md-center sidebar-section-buttons">
-        <button
-          type="button"
-          class="btn btn-success btn-block"
-          data-toggle="modal"
-          data-target="#generateDataset"
-        >
-          <div v-if="generate.id != null" class="progress">
-            <div
-              class="progress-bar bg-success"
-              :style="{ 'width': `${generate.progress}%` }"
-            >
-              Generating
-            </div>
-          </div>
-          <div v-else>Generate</div>
-        </button>
-
-        <button
-          type="button"
-          class="btn btn-secondary btn-block"
-          @click="createScanTask"
-        >
-          <div v-if="scan.id != null" class="progress">
-            <div
-              class="progress-bar bg-secondary"
-              :style="{ 'width': `${scan.progress}%` }"
-            >
-              Scanning
-            </div>
-          </div>
-          <div v-else>Scan</div>
-        </button>
-
-        <button
-          type="button"
-          class="btn btn-primary btn-block"
-          @click="importModal"
-        >
-          <div v-if="importing.id != null" class="progress">
-            <div
-              class="progress-bar bg-primary"
-              :style="{ 'width': `${importing.progress}%` }"
-            >
-              Importing
-            </div>
-          </div>
-          <div v-else>Import COCO</div>
-        </button>
-
-        <button
-          type="button"
-          class="btn btn-dark btn-block"
-          @click="exportModal"
-        >
-          <div v-if="exporting.id != null" class="progress">
-            <div
-              class="progress-bar bg-dark"
-              :style="{ 'width': `${exporting.progress}%` }"
-            >
-              Exporting
-            </div>
-          </div>
-          <div v-else>Export COCO</div>
-        </button>
-      </div>
-      <hr>
-      <h6 class="sidebar-title text-center">Subdirectories</h6>
-      <div class="sidebar-section" style="max-height: 30%; color: lightgray">
-        <div v-if="subdirectories.length > 0">
-          <button
-            v-for="(subdirectory, subId) in subdirectories"
-            :key="subId"
-            class="btn badge badge-pill badge-primary category-badge"
-            style="margin: 2px"
-            @click="folders.push(subdirectory)"
-          >
-            {{ subdirectory }}
-          </button>
-        </div>
-        <p v-else style="margin: 0; font-size: 13px; color: gray">
-          No subdirectory found.
-        </p>
-      </div>
-      <hr>
-      <h6 class="sidebar-title text-center">Filtering Options</h6>
-      <div
-        class="sidebar-section"
-        style="max-height: 30%; color: lightgray"
-      >
-        <PanelString name="Contains" v-model="query.file_name__icontains" @submit="updatePage" />
-        <PanelToggle name="Show Annotated" v-model="panel.showAnnotated" />
-        <PanelToggle name="Show Not Annotated" v-model="panel.showNotAnnotated" />
-        <PanelDropdown name="Order" v-model="order" :values="orderTypes" />
-      </div>
-        <div
-          class="sidebar-section"
-          style="max-height: 30%; color: lightgray"
-        >
-          <div class="form-group">
-            <label>Show Annotated Categories </label>
-            <TagsInput
-              v-model="selected.categories"
-              element-id="selectedCategories"
-              title="Only shows images annotated with the selected categories for 'Show Annotated' button. Leave empty to show all annotated images."
-              :existing-tags="categoryTags"
-              :typeahead="true"
-              :typeahead-activation-threshold="0"
-            ></TagsInput>
-          </div>
-      </div>
-    </div>
-
-    <div class="modal fade" tabindex="-1" role="dialog" id="generateDataset">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Generate a Dataset</h5>
-            <button
-              type="button"
-              class="close"
-              data-dismiss="modal"
-              aria-label="Close"
-            >
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-          <div class="modal-body">
-            <form>
-              <div class="form-group">
-                <label>Keyword</label>
-                <input class="form-control" v-model="keyword" />
-              </div>
-              <div class="form-group">
-                <label>Limit</label>
-                <input
-                  class="form-control"
-                  type="number"
-                  v-model="generateLimit"
-                />
-              </div>
-            </form>
-          </div>
-          <div class="modal-footer">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="generateDataset"
-            >
-              Generate
-            </button>
-            <button
-              type="button"
-              class="btn btn-secondary"
-              data-dismiss="modal"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="modal fade" tabindex="-1" role="dialog" id="cocoUpload">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Upload COCO Annotaitons</h5>
-            <button
-              type="button"
-              class="close"
-              data-dismiss="modal"
-              aria-label="Close"
-            >
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-          <div class="modal-body">
-            <form>
-              <div class="form-group">
-                <label for="coco">COCO Annotation file (.json)</label>
-                <input type="file" class="form-control-file" id="coco" />
-              </div>
-            </form>
-          </div>
-          <div class="modal-footer">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="importCOCO"
-              data-dismiss="modal"
-            >
-              Upload
-            </button>
-            <button
-              type="button"
-              class="btn btn-secondary"
-              data-dismiss="modal"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="modal fade" tabindex="-1" role="dialog" id="exportDataset">
-      <div class="modal-dialog" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">Export {{dataset.name}}</h5>
-            <button
-              type="button"
-              class="close"
-              data-dismiss="modal"
-              aria-label="Close"
-            >
-              <span aria-hidden="true">&times;</span>
-            </button>
-          </div>
-          <div class="modal-body">
-            <form>
-              <div class="form-group">
-                <label>Categories (Empty export all)</label>
-                <TagsInput
-                  v-model="exporting.categories"
-                  element-id="exportCategories"
-                  :existing-tags="categoryTags"
-                  :typeahead="true"
-                  :typeahead-activation-threshold="0"
-                ></TagsInput>
-              </div>
-              <div>
-                <input type="checkbox" class="form-check-input"
-                  v-model="exporting.with_empty_images">
-                <label class="form-check-label">export with not annotated images</label>
-              </div>
-            </form>
-          </div>
-          <div class="modal-footer">
-            <button
-              type="button"
-              class="btn btn-primary"
-              @click="exportCOCO"
-            >
-              Export
-            </button>
-            <button
-              type="button"
-              class="btn btn-secondary"
-              data-dismiss="modal"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import toastrs from "@/mixins/toastrs";
-import Dataset from "@/models/datasets";
-import Export from "@/models/exports";
-import ImageCard from "@/components/cards/ImageCard";
-import Pagination from "@/components/Pagination";
-import PanelString from "@/components/PanelInputString";
-import PanelToggle from "@/components/PanelToggle";
-import PanelDropdown from "@/components/PanelInputDropdown"
-import JQuery from "jquery";
-import TagsInput from "@/components/TagsInput";
-
-import { mapMutations } from "vuex";
-
-let $ = JQuery;
-
-export default {
-  name: "Dataset",
-  components: {
-    ImageCard,
-    Pagination,
-    PanelString,
-    PanelToggle,
-    PanelDropdown,
-    TagsInput
-  },
-  mixins: [toastrs],
-  props: {
-    identifier: {
-      type: [Number, String],
-      required: true
-    }
-  },
-  data() {
-    return {
-      pages: 1,
-      generateLimit: 100,
-      limit: 52,
-      imageCount: 0,
-      categories: [],
-      images: [],
-      folders: [],
-      dataset: {
-        id: 0
-      },
-      users: [],
-      subdirectories: [],
-      status: {
-        data: { state: true, message: "Loading data" }
-      },
-      keyword: "",
-      mouseDown: false,
-      sidebar: {
-        drag: false,
-        width: window.innerWidth * 0.2,
-        canResize: false
-      },
-      scan: {
-        progress: 0,
-        id: null
-      },
-      generate: {
-        progress: 0,
-        id: null
-      },
-      importing: {
-        progress: 0,
-        id: null
-      },
-      exporting: {
-        categories: [],
-        progress: 0,
-        with_empty_images: false,
-        id: null
-      },
-      selected: {
-        categories: []
-      },
-      datasetExports: [],
-      tab: "images",
-      order: "file_name",
-      orderTypes: {
-        file_name: "File Name",
-        id: "Id",
-        path: "File Path"
-      },
-      query: {
-        file_name__icontains: "",
-        ...this.$route.query
-      },
-      panel: {
-        showAnnotated: true,
-        showNotAnnotated: true
-      },
-      stats: null
-    };
-  },
-  methods: {
-    ...mapMutations(["addProcess", "removeProcess"]),
-    generateDataset() {
-      if (this.keyword.length === 0) return;
-
-      Dataset.generate(this.dataset.id, {
-        keywords: [this.keyword],
-        limit: this.generateLimit
-      });
-    },
-    updatePage(page) {
-      let process = "Loading images from dataset";
-      this.addProcess(process);
-
-      Dataset.getData(this.dataset.id, {
-        page: page,
-        limit: this.limit,
-        folder: this.folders.join("/"),
-        ...this.query,
-        annotated: this.queryAnnotated,
-        category_ids__in: encodeURI(this.selected.categories),
-        order: this.order
-      })
-        .then(response => {
-          let data = response.data;
-
-          this.images = data.images;
-          this.dataset = data.dataset;
-          this.categories = data.categories;
-
-          this.imageCount = data.total;
-          this.pages = data.pages;
-
-          this.subdirectories = data.subdirectories;
-          // this.scan.id = data.scanId;
-          // this.generate.id = data.generateId;
-          // this.importing.id = data.importId;
-          // this.exporting.id = data.exportId;
-        })
-        .catch(error => {
-          this.axiosReqestError("Loading Dataset", error.response.data.message);
-        })
-        .finally(() => this.removeProcess(process));
-    },
-    getUsers() {
-      Dataset.getUsers(this.dataset.id).then(response => {
-        this.users = response.data;
-      });
-    },
-    downloadExport(id) {
-      Export.download(id, this.dataset.name);
-    },
-    getExports() {
-      Dataset.getExports(this.dataset.id).then(response => {
-        this.datasetExports = response.data;
-      });
-    },
-    resetMetadata() {
-      let r = confirm("You can not undo reseting of all metadata in"
-        + "this dataset. This includes metadata of images"
-        + "and annotations.");
-      
-      if (r) {
-        Dataset.resetMetadata(this.dataset.id);
-      }
-    },
-    getStats() {
-      Dataset.getStats(this.dataset.id).then(response => {
-        this.stats = response.data;
-      });
-    },
-    createScanTask() {
-      if (this.scan.id != null) {
-        this.$router.push({ path: "/tasks", query: { id: this.scan.id } });
-        return;
-      }
-
-      Dataset.scan(this.dataset.id)
-        .then(response => {
-          let id = response.data.id;
-          this.scan.id = id;
-        })
-        .catch(error => {
-          this.axiosReqestError(
-            "Scanning Dataset",
-            error.response.data.message
-          );
-        })
-        .finally(() => this.removeProcess(process));
-    },
-    exportModal() {
-      if (this.exporting.id != null) {
-        this.$router.push({ path: "/tasks", query: { id: this.exporting.id } });
-        return;
-      }
-      $("#exportDataset").modal("show");
-    },
-    exportCOCO() {
-      $("#exportDataset").modal("hide");
-      Dataset.exportingCOCO(this.dataset.id, this.exporting.categories, this.exporting.with_empty_images)
-        .then(response => {
-          let id = response.data.id;
-          this.exporting.id = id;
-        })
-        .catch(error => {
-          this.axiosReqestError("Exporting COCO", error.response.data.message);
-        })
-        .finally(() => this.removeProcess(process));
-    },
-    removeFolder(folder) {
-      let index = this.folders.indexOf(folder);
-      this.folders.splice(index + 1, this.folders.length);
-    },
-    importModal() {
-      if (this.importing.id != null) {
-        this.$router.push({ path: "/tasks", query: { id: this.importing.id } });
-        return;
-      }
-
-      $("#cocoUpload").modal("show");
-    },
-    importCOCO() {
-      let uploaded = document.getElementById("coco");
-      Dataset.uploadCoco(this.dataset.id, uploaded.files[0])
-        .then(response => {
-          let id = response.data.id;
-          this.importing.id = id;
-        })
-        .catch(error => {
-          this.axiosReqestError("Importing COCO", error.response.data.message);
-        })
-        .finally(() => this.removeProcess(process));
-    },
-    mouseMove(event) {
-      let element = this.$refs.sidebar;
-
-      let sidebarWidth = element.offsetWidth;
-      let clickWidth = event.x;
-      let pixelsFromSide = Math.abs(sidebarWidth - clickWidth);
-
-      this.sidebar.drag = pixelsFromSide < 4;
-
-      if (this.sidebar.canResize) {
-        event.preventDefault();
-        let max = window.innerWidth * 0.5;
-        this.sidebar.width = Math.min(Math.max(event.x, 150), max);
-        localStorage.setItem("dataset/sideWidth", this.sidebar.width)
-      }
-    },
-    startDrag() {
-      this.mouseDown = true;
-      this.sidebar.canResize = this.sidebar.drag;
-    },
-    stopDrag() {
-      this.mouseDown = false;
-      this.sidebar.canResize = false;
-    }
-  },
-  computed: {
-    queryAnnotated() {
-      let showAnnotated = this.panel.showAnnotated;
-      let showNotAnnotated = this.panel.showNotAnnotated;
-
-      if (showAnnotated && showNotAnnotated) return null;
-      if (!showAnnotated && !showNotAnnotated) return " ";
-
-      return showAnnotated;
-    },
-    categoryTags() {
-      let tags = {};
-      this.categories.forEach(c => tags[c.id] = c.name);
-      return tags;
-    }
-  },
-  sockets: {
-    taskProgress(data) {
-      if (data.id === this.scan.id) {
-        this.scan.progress = data.progress;
-      }
-
-      if (data.id === this.generate.id) {
-        this.generate.progress = data.progress;
-      }
-
-      if (data.id === this.importing.id) {
-        this.importing.progress = data.progress;
-      }
-
-      if (data.id === this.exporting.id) {
-        this.exporting.progress = data.progress;
-      }
-    },
-    annotating(data) {
-      let image = this.images.find(i => i.id == data.image_id);
-      if (image == null) return;
-
-      if (data.active) {
-        let found = image.annotating.indexOf(data.username);
-        if (found < 0) {
-          image.annotating.push(data.username);
-        }
-      } else {
-        image.annotating.splice(image.annotating.indexOf(data.username), 1);
-      }
-    }
-  },
-  watch: {
-    tab(tab) {
-      localStorage.setItem("dataset/tab", tab);
-      if (tab == "members") this.getUsers();
-      if (tab == "statistics") this.getStats();
-      if (tab == "exports") this.getExports();
-    },
-    order(order) {
-      localStorage.setItem("dataset/order", order);
-      this.updatePage();
-    },
-    queryAnnotated() {
-      this.updatePage();
-    },
-    "selected.categories"(val) {
-      this.updatePage();
-    },
-    folders() {
-      this.updatePage();
-    },
-    "sidebar.drag"(canDrag) {
-      let el = this.$refs.sidebar;
-      if (canDrag) {
-        this.$el.style.cursor = "ew-resize";
-        el.style.borderRight = "4px solid #383c4a";
-      } else {
-        this.$el.style.cursor = "default";
-        el.style.borderRight = "";
-      }
-    },
-    "scan.progress"(progress) {
-      if (progress >= 100) {
-        setTimeout(() => {
-          this.scan.progress = 0;
-          this.scan.id = null;
-        }, 1000);
-      }
-    },
-    "importing.progress"(progress) {
-      if (progress >= 100) {
-        setTimeout(() => {
-          this.importing.progress = 0;
-          this.importing.id = null;
-        }, 1000);
-      }
-    },
-    "exporting.progress"(progress) {
-      if (progress >= 100) {
-        setTimeout(() => {
-          this.exporting.progress = 0;
-          this.exporting.id = null;
-
-          this.getExports();
-        }, 1000);
-      }
-    }
-  },
-  beforeRouteUpdate() {
-    this.dataset.id = parseInt(this.identifier);
-    this.updatePage();
-  },
-  created() {
-    let tab = localStorage.getItem("dataset/tab");
-    let order = localStorage.getItem("dataset/order");
-    let sideWidth = localStorage.getItem("dataset/sideWidth");
-    
-    if (sideWidth !== null) this.sidebar.width = parseInt(sideWidth);
-    if (tab !== null) this.tab = tab;
-    if (order !== null) this.order = order;
-
-    this.dataset.id = parseInt(this.identifier);
-    this.updatePage();
-  },
-  mounted() {
-    window.addEventListener("mouseup", this.stopDrag);
-    window.addEventListener("mousedown", this.startDrag);
-  },
-  destroyed() {
-    window.removeEventListener("mouseup", this.stopDrag);
-    window.removeEventListener("mousedown", this.startDrag);
-  }
-};
-</script>
-
-<style scoped>
-.breadcrumb {
-  padding: 0px;
-  margin: 5px 0;
-}
-
-.btn-link {
-  padding: 0px;
-}
-
-.sidebar .title {
-  color: white;
-}
-
-.progress {
-  padding: 2px;
-  height: 24px;
-}
-
-.sidebar {
-  height: 100%;
-  position: fixed;
-  color: white;
-  z-index: 1;
-  top: 0;
-  left: 0;
-  background-color: #4b5162;
-  overflow-x: hidden;
-  padding-top: 60px;
-}
-
-.sidebar .closebtn {
-  position: absolute;
-  top: 0;
-  right: 25px;
-  font-size: 36px;
-  margin-left: 50px;
-}
-
-.sidebar-title {
-  color: white;
-}
-
-.sidebar-section-buttons {
-  margin: 5px;
-}
-
-.sidebar-section {
-  margin: 5px;
-  border-radius: 5px;
-  background-color: #383c4a;
-  padding: 0 5px 2px 5px;
-  overflow: auto;
-}
-</style>

From ef212f13ef606f101fa7556fcff461909255cbdf Mon Sep 17 00:00:00 2001
From: MarkXiLee <57758193+MarkXiLee@users.noreply.github.com>
Date: Fri, 6 May 2022 09:32:31 +0800
Subject: [PATCH 4/7] Add files via upload

---
 client/src/views/Dataset.vue | 935 +++++++++++++++++++++++++++++++++++
 1 file changed, 935 insertions(+)
 create mode 100644 client/src/views/Dataset.vue

diff --git a/client/src/views/Dataset.vue b/client/src/views/Dataset.vue
new file mode 100644
index 00000000..73013026
--- /dev/null
+++ b/client/src/views/Dataset.vue
@@ -0,0 +1,935 @@
+<template>
+  <div @mousemove="mouseMove">
+    <div style="padding-top: 55px" />
+    
+    <div
+      class="bg-light"
+      :style="{ 'margin-left': sidebar.width + 'px' }"
+    >
+      <nav class="nav border-bottom shadow-sm" style="background-color: #4b5162">
+        <a class="btn tab" @click="tab = 'images'" :style="{'color': tab == 'images' ? 'white' : 'darkgray'}">
+          <i class="fa fa-picture-o" aria-hidden="true"></i> Images
+        </a>
+        <a class="btn tab" @click="tab = 'exports'" :style="{'color': tab == 'exports' ? 'white' : 'darkgray'}">
+          <i class="fa fa-share" aria-hidden="true"></i> Exports
+        </a>
+        <a class="btn tab" @click="tab = 'members'" :style="{'color': tab == 'members' ? 'white' : 'darkgray'}">
+          <i class="fa fa-users" aria-hidden="true"></i> Members
+        </a>
+        <a class="btn tab" @click="tab = 'statistics'" :style="{'color': tab == 'statistics' ? 'white' : 'darkgray'}">
+          <i class="fa fa-bar-chart" aria-hidden="true"></i> Statistics
+        </a>
+        <a class="btn tab" @click="tab = 'settings'" :style="{'color': tab == 'settings' ? 'white' : 'darkgray'}">
+          <i class="fa fa-cog" aria-hidden="true"></i> Settings
+        </a>
+      </nav>
+    
+      <div class="bg-light text-left" style="overflow: auto; height: calc(100vh - 100px); margin: 10px">
+        <div class="container" v-show="tab == 'images'">
+          
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item"></li>
+            <li class="breadcrumb-item active">
+              <button class="btn btn-sm btn-link" @click="folders = []">
+                {{ dataset.name }}
+              </button>
+            </li>
+            <li
+              v-for="(folder, folderId) in folders"
+              :key="folderId"
+              class="breadcrumb-item"
+            >
+              <button
+                class="btn btn-sm btn-link"
+                :disabled="folders[folders.length - 1] === folder"
+                @click="removeFolder(folder)"
+              >
+                {{ folder }}
+              </button>
+            </li>
+          </ol>
+
+          <p class="text-center" v-if="images.length < 1">
+            No images found in directory.
+          </p>
+          <div v-else>
+            <Pagination :pages="pages" @pagechange="updatePage" ref= "bortherUp" @fun="fun" />
+            <div class="row">
+              <ImageCard v-for="image in images" :key="image.id" :image="image" />
+            </div>
+            <PaginationCopy :pages="pages" @pagechange="updatePage" ref= "bortherDown" @fun="fun" @changePage="changePage"/>
+          </div>
+
+        </div>
+        <div class="container" v-show="tab == 'exports'">
+          <div class="card my-3 p-3 shadow-sm mr-2">
+            <h6 class="border-bottom border-gray pb-2"><b>Exports</b></h6>
+            
+            <div class="media text-muted pt-3" v-for="exp in datasetExports">
+              <div class="media-body lh-125 border-bottom border-gray">
+                  {{exp.id}}. Exported {{ exp.ago.length > 0 ? exp.ago : 0 + " seconds" }} ago
+                  <div style="display: inline">
+                    <span
+                      v-for="tag in exp.tags"
+                      class="badge badge-secondary"
+                      style="margin: 1px"
+                    >
+                      {{tag}}
+                    </span>
+                  </div>
+                  <button 
+                    class="btn btn-sm btn-success"
+                    style="float: right; margin: 2px; padding: 2px"
+                    @click="downloadExport(exp.id)"
+                  >
+                    Download
+                  </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="container" v-show="tab == 'members'">
+
+          <div class="card my-3 p-3 shadow-sm mr-2">
+            <h6 class="border-bottom border-gray pb-2"><b>Invite Members</b></h6>
+            
+          </div>
+          
+          <div class="card my-3 p-3 shadow-sm mr-2">
+            <h6 class="border-bottom border-gray pb-2"><b>Existing Members</b></h6>
+            
+            <div class="media text-muted pt-3" v-for="user in users">
+              <img src="https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/256x256/plain/user.png" class="mr-2 rounded" style="width: 32px; height: 32px;">
+              <div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+                <div class="d-flex justify-content-between align-items-center w-100">
+                  <div class="text-gray-dark">
+                    <strong>{{ user.name }}</strong> @{{user.username}}
+                  </div>
+                  <a href="#">{{ user.group }}</a>
+                </div>
+                <span class="d-block">Last seen: {{ new Date(user.last_seen['$date']).toISOString().slice(0, 19).replace('T', ' ') }} UTC</span>
+              </div>
+            </div>
+          </div>
+
+        </div>
+        <div class="container" v-show="tab == 'statistics'">
+          <div v-if="stats == null">
+            Crunching numbers...
+          </div>
+
+          <div v-else>
+            <div class="row">
+              
+              <div v-if="stats.total" class="card my-3 p-3 shadow-sm col-3 mr-2">
+                <h6 class="border-bottom border-gray pb-2"><b>Total</b></h6>
+                <div class="row" v-for="stat in Object.keys(stats.total)">
+                  <strong class="col-8">{{stat}}:</strong>
+                  <span class="col-4">{{stats.total[stat].toFixed(0)}}</span>
+                </div>
+              </div>
+
+              <div v-if="stats.average" class="card my-3 p-3 shadow-sm col-4 mr-2">
+                <h6 class="border-bottom border-gray pb-2"><b>Average</b></h6>
+                <div class="row" v-for="stat in Object.keys(stats.average)">
+                  <strong class="col-8">{{stat}}:</strong>
+                  <span class="col-4">{{stats.average[stat].toFixed(0)}}</span>
+                </div>
+              </div>
+
+              <div v-if="stats.categories" class="card my-3 p-3 shadow-sm col-4 mr-2">
+                <h6 class="border-bottom border-gray pb-2"><b>Annotations Per Category</b></h6>
+                <div class="row" v-for="stat in Object.keys(stats.categories)">
+                  <strong class="col-8">{{stat}}:</strong>
+                  <span class="col-4">{{stats.categories[stat].toFixed(0)}}</span>
+                </div>
+              </div>
+
+              <div v-if="stats.images_per_category" class="card my-3 p-3 shadow-sm col-4 mr-2">
+                <h6 class="border-bottom border-gray pb-2"><b>Annotated Images Per Category</b></h6>
+                <div class="row" v-for="stat in Object.keys(stats.images_per_category)">
+                  <strong class="col-8">{{stat}}:</strong>
+                  <span class="col-4">{{stats.images_per_category[stat].toFixed(0)}}</span>
+                </div>
+              </div>
+
+              <div v-if="stats.users" class="card my-3 p-3 shadow-sm col-6 mr-2">
+                <h6 class="border-bottom border-gray pb-2"><b>Annotations per User</b></h6>
+                <h6 class="row border-bottom border-gray pb-2">
+                    <span class="col-4">Username</span>
+                    <span class="col-4">Annotations</span>
+                    <span class="col-4">Images</span>
+                </h6>
+                <div class="row" v-for="stat in Object.keys(stats.users)">
+                  <strong class="col-4">{{stat}}:</strong>
+                  <span class="col-4">{{stats.users[stat]["annotations"].toFixed(0)}}</span>
+                  <span class="col-4">{{stats.users[stat]["images"].toFixed(0)}}</span>
+                </div>
+              </div>
+
+            </div>
+            
+          </div>
+        </div>
+        <div class="container" v-show="tab == 'settings'">
+          <div class="card my-3 p-3 shadow-sm mr-2">
+            <h6 class="border-bottom border-gray pb-2"><b>Metadata</b></h6>
+            
+            <button 
+              class="btn btn-sm btn-block btn-danger"
+              @click="resetMetadata"
+            >
+              Rest All Metadata
+            </button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <div
+      id="filter"
+      ref="sidebar"
+      class="sidebar"
+      :style="{ width: sidebar.width + 'px' }"
+    >
+      <div style="padding-top: 10px" />
+      <h3>{{ dataset.name }}</h3>
+      <p class="text-center" style="color: lightgray">
+        Total of <strong style="color: white">{{ imageCount }}</strong> images
+        displayed on <strong style="color: white">{{ pages }}</strong> pages.
+      </p>
+      <div class="row justify-content-md-center sidebar-section-buttons">
+        <button
+          type="button"
+          class="btn btn-success btn-block"
+          data-toggle="modal"
+          data-target="#generateDataset"
+        >
+          <div v-if="generate.id != null" class="progress">
+            <div
+              class="progress-bar bg-success"
+              :style="{ 'width': `${generate.progress}%` }"
+            >
+              Generating
+            </div>
+          </div>
+          <div v-else>Generate</div>
+        </button>
+
+        <button
+          type="button"
+          class="btn btn-secondary btn-block"
+          @click="createScanTask"
+        >
+          <div v-if="scan.id != null" class="progress">
+            <div
+              class="progress-bar bg-secondary"
+              :style="{ 'width': `${scan.progress}%` }"
+            >
+              Scanning
+            </div>
+          </div>
+          <div v-else>Scan</div>
+        </button>
+
+        <button
+          type="button"
+          class="btn btn-primary btn-block"
+          @click="importModal"
+        >
+          <div v-if="importing.id != null" class="progress">
+            <div
+              class="progress-bar bg-primary"
+              :style="{ 'width': `${importing.progress}%` }"
+            >
+              Importing
+            </div>
+          </div>
+          <div v-else>Import COCO</div>
+        </button>
+
+        <button
+          type="button"
+          class="btn btn-dark btn-block"
+          @click="exportModal"
+        >
+          <div v-if="exporting.id != null" class="progress">
+            <div
+              class="progress-bar bg-dark"
+              :style="{ 'width': `${exporting.progress}%` }"
+            >
+              Exporting
+            </div>
+          </div>
+          <div v-else>Export COCO</div>
+        </button>
+      </div>
+      <hr>
+      <h6 class="sidebar-title text-center">Subdirectories</h6>
+      <div class="sidebar-section" style="max-height: 30%; color: lightgray">
+        <div v-if="subdirectories.length > 0">
+          <button
+            v-for="(subdirectory, subId) in subdirectories"
+            :key="subId"
+            class="btn badge badge-pill badge-primary category-badge"
+            style="margin: 2px"
+            @click="folders.push(subdirectory)"
+          >
+            {{ subdirectory }}
+          </button>
+        </div>
+        <p v-else style="margin: 0; font-size: 13px; color: gray">
+          No subdirectory found.
+        </p>
+      </div>
+      <hr>
+      <h6 class="sidebar-title text-center">Filtering Options</h6>
+      <div
+        class="sidebar-section"
+        style="max-height: 30%; color: lightgray"
+      >
+        <PanelString name="Contains" v-model="query.file_name__icontains" @submit="updatePage" />
+        <PanelToggle name="Show Annotated" v-model="panel.showAnnotated" />
+        <PanelToggle name="Show Not Annotated" v-model="panel.showNotAnnotated" />
+        <PanelDropdown name="Order" v-model="order" :values="orderTypes" />
+      </div>
+        <div
+          class="sidebar-section"
+          style="max-height: 30%; color: lightgray"
+        >
+          <div class="form-group">
+            <label>Show Annotated Categories </label>
+            <TagsInput
+              v-model="selected.categories"
+              element-id="selectedCategories"
+              title="Only shows images annotated with the selected categories for 'Show Annotated' button. Leave empty to show all annotated images."
+              :existing-tags="categoryTags"
+              :typeahead="true"
+              :typeahead-activation-threshold="0"
+            ></TagsInput>
+          </div>
+      </div>
+    </div>
+
+    <div class="modal fade" tabindex="-1" role="dialog" id="generateDataset">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Generate a Dataset</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <form>
+              <div class="form-group">
+                <label>Keyword</label>
+                <input class="form-control" v-model="keyword" />
+              </div>
+              <div class="form-group">
+                <label>Limit</label>
+                <input
+                  class="form-control"
+                  type="number"
+                  v-model="generateLimit"
+                />
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-primary"
+              @click="generateDataset"
+            >
+              Generate
+            </button>
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="modal fade" tabindex="-1" role="dialog" id="cocoUpload">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Upload COCO Annotaitons</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <form>
+              <div class="form-group">
+                <label for="coco">COCO Annotation file (.json)</label>
+                <input type="file" class="form-control-file" id="coco" />
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-primary"
+              @click="importCOCO"
+              data-dismiss="modal"
+            >
+              Upload
+            </button>
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="modal fade" tabindex="-1" role="dialog" id="exportDataset">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Export {{dataset.name}}</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <form>
+              <div class="form-group">
+                <label>Categories (Empty export all)</label>
+                <TagsInput
+                  v-model="exporting.categories"
+                  element-id="exportCategories"
+                  :existing-tags="categoryTags"
+                  :typeahead="true"
+                  :typeahead-activation-threshold="0"
+                ></TagsInput>
+              </div>
+              <div>
+                <input type="checkbox" class="form-check-input"
+                  v-model="exporting.with_empty_images">
+                <label class="form-check-label">export with not annotated images</label>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-primary"
+              @click="exportCOCO"
+            >
+              Export
+            </button>
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import toastrs from "@/mixins/toastrs";
+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"
+import JQuery from "jquery";
+import TagsInput from "@/components/TagsInput";
+
+import { mapMutations } from "vuex";
+
+let $ = JQuery;
+
+export default {
+  name: "Dataset",
+  components: {
+    ImageCard,
+    Pagination,
+    PaginationCopy,
+    PanelString,
+    PanelToggle,
+    PanelDropdown,
+    TagsInput
+  },
+  mixins: [toastrs],
+  props: {
+    identifier: {
+      type: [Number, String],
+      required: true
+    }
+  },
+  data() {
+    return {
+      pageSynchronous: 1 ,
+      pages: 1,
+      generateLimit: 100,
+      limit: 52,
+      imageCount: 0,
+      categories: [],
+      images: [],
+      folders: [],
+      dataset: {
+        id: 0
+      },
+      users: [],
+      subdirectories: [],
+      status: {
+        data: { state: true, message: "Loading data" }
+      },
+      keyword: "",
+      mouseDown: false,
+      sidebar: {
+        drag: false,
+        width: window.innerWidth * 0.2,
+        canResize: false
+      },
+      scan: {
+        progress: 0,
+        id: null
+      },
+      generate: {
+        progress: 0,
+        id: null
+      },
+      importing: {
+        progress: 0,
+        id: null
+      },
+      exporting: {
+        categories: [],
+        progress: 0,
+        with_empty_images: false,
+        id: null
+      },
+      selected: {
+        categories: []
+      },
+      datasetExports: [],
+      tab: "images",
+      order: "file_name",
+      orderTypes: {
+        file_name: "File Name",
+        id: "Id",
+        path: "File Path"
+      },
+      query: {
+        file_name__icontains: "",
+        ...this.$route.query
+      },
+      panel: {
+        showAnnotated: true,
+        showNotAnnotated: true
+      },
+      stats: null
+    };
+  },
+  methods: {
+    ...mapMutations(["addProcess", "removeProcess"]),
+    generateDataset() {
+      if (this.keyword.length === 0) return;
+
+      Dataset.generate(this.dataset.id, {
+        keywords: [this.keyword],
+        limit: this.generateLimit
+      });
+    },
+    updatePage(page) {
+      let process = "Loading images from dataset";
+      this.addProcess(process);
+
+      Dataset.getData(this.dataset.id, {
+        page: page,
+        limit: this.limit,
+        folder: this.folders.join("/"),
+        ...this.query,
+        annotated: this.queryAnnotated,
+        category_ids__in: encodeURI(this.selected.categories),
+        order: this.order
+      })
+        .then(response => {
+          let data = response.data;
+
+          this.images = data.images;
+          this.dataset = data.dataset;
+          this.categories = data.categories;
+
+          this.imageCount = data.total;
+          this.pages = data.pages;
+
+          this.subdirectories = data.subdirectories;
+          // this.scan.id = data.scanId;
+          // this.generate.id = data.generateId;
+          // this.importing.id = data.importId;
+          // this.exporting.id = data.exportId;
+        })
+        .catch(error => {
+          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 => {
+        this.users = response.data;
+      });
+    },
+    downloadExport(id) {
+      Export.download(id, this.dataset.name);
+    },
+    getExports() {
+      Dataset.getExports(this.dataset.id).then(response => {
+        this.datasetExports = response.data;
+      });
+    },
+    resetMetadata() {
+      let r = confirm("You can not undo reseting of all metadata in"
+        + "this dataset. This includes metadata of images"
+        + "and annotations.");
+      
+      if (r) {
+        Dataset.resetMetadata(this.dataset.id);
+      }
+    },
+    getStats() {
+      Dataset.getStats(this.dataset.id).then(response => {
+        this.stats = response.data;
+      });
+    },
+    createScanTask() {
+      if (this.scan.id != null) {
+        this.$router.push({ path: "/tasks", query: { id: this.scan.id } });
+        return;
+      }
+
+      Dataset.scan(this.dataset.id)
+        .then(response => {
+          let id = response.data.id;
+          this.scan.id = id;
+        })
+        .catch(error => {
+          this.axiosReqestError(
+            "Scanning Dataset",
+            error.response.data.message
+          );
+        })
+        .finally(() => this.removeProcess(process));
+    },
+    exportModal() {
+      if (this.exporting.id != null) {
+        this.$router.push({ path: "/tasks", query: { id: this.exporting.id } });
+        return;
+      }
+      $("#exportDataset").modal("show");
+    },
+    exportCOCO() {
+      $("#exportDataset").modal("hide");
+      Dataset.exportingCOCO(this.dataset.id, this.exporting.categories, this.exporting.with_empty_images)
+        .then(response => {
+          let id = response.data.id;
+          this.exporting.id = id;
+        })
+        .catch(error => {
+          this.axiosReqestError("Exporting COCO", error.response.data.message);
+        })
+        .finally(() => this.removeProcess(process));
+    },
+    removeFolder(folder) {
+      let index = this.folders.indexOf(folder);
+      this.folders.splice(index + 1, this.folders.length);
+    },
+    importModal() {
+      if (this.importing.id != null) {
+        this.$router.push({ path: "/tasks", query: { id: this.importing.id } });
+        return;
+      }
+
+      $("#cocoUpload").modal("show");
+    },
+    importCOCO() {
+      let uploaded = document.getElementById("coco");
+      Dataset.uploadCoco(this.dataset.id, uploaded.files[0])
+        .then(response => {
+          let id = response.data.id;
+          this.importing.id = id;
+        })
+        .catch(error => {
+          this.axiosReqestError("Importing COCO", error.response.data.message);
+        })
+        .finally(() => this.removeProcess(process));
+    },
+    mouseMove(event) {
+      let element = this.$refs.sidebar;
+
+      let sidebarWidth = element.offsetWidth;
+      let clickWidth = event.x;
+      let pixelsFromSide = Math.abs(sidebarWidth - clickWidth);
+
+      this.sidebar.drag = pixelsFromSide < 4;
+
+      if (this.sidebar.canResize) {
+        event.preventDefault();
+        let max = window.innerWidth * 0.5;
+        this.sidebar.width = Math.min(Math.max(event.x, 150), max);
+        localStorage.setItem("dataset/sideWidth", this.sidebar.width)
+      }
+    },
+    startDrag() {
+      this.mouseDown = true;
+      this.sidebar.canResize = this.sidebar.drag;
+    },
+    stopDrag() {
+      this.mouseDown = false;
+      this.sidebar.canResize = false;
+    }
+  },
+  computed: {
+    queryAnnotated() {
+      let showAnnotated = this.panel.showAnnotated;
+      let showNotAnnotated = this.panel.showNotAnnotated;
+
+      if (showAnnotated && showNotAnnotated) return null;
+      if (!showAnnotated && !showNotAnnotated) return " ";
+
+      return showAnnotated;
+    },
+    categoryTags() {
+      let tags = {};
+      this.categories.forEach(c => tags[c.id] = c.name);
+      return tags;
+    }
+  },
+  sockets: {
+    taskProgress(data) {
+      if (data.id === this.scan.id) {
+        this.scan.progress = data.progress;
+      }
+
+      if (data.id === this.generate.id) {
+        this.generate.progress = data.progress;
+      }
+
+      if (data.id === this.importing.id) {
+        this.importing.progress = data.progress;
+      }
+
+      if (data.id === this.exporting.id) {
+        this.exporting.progress = data.progress;
+      }
+    },
+    annotating(data) {
+      let image = this.images.find(i => i.id == data.image_id);
+      if (image == null) return;
+
+      if (data.active) {
+        let found = image.annotating.indexOf(data.username);
+        if (found < 0) {
+          image.annotating.push(data.username);
+        }
+      } else {
+        image.annotating.splice(image.annotating.indexOf(data.username), 1);
+      }
+    }
+  },
+  watch: {
+    tab(tab) {
+      localStorage.setItem("dataset/tab", tab);
+      if (tab == "members") this.getUsers();
+      if (tab == "statistics") this.getStats();
+      if (tab == "exports") this.getExports();
+    },
+    order(order) {
+      localStorage.setItem("dataset/order", order);
+      this.updatePage();
+    },
+    queryAnnotated() {
+      this.updatePage();
+    },
+    "selected.categories"(val) {
+      this.updatePage();
+    },
+    folders() {
+      this.updatePage();
+    },
+    "sidebar.drag"(canDrag) {
+      let el = this.$refs.sidebar;
+      if (canDrag) {
+        this.$el.style.cursor = "ew-resize";
+        el.style.borderRight = "4px solid #383c4a";
+      } else {
+        this.$el.style.cursor = "default";
+        el.style.borderRight = "";
+      }
+    },
+    "scan.progress"(progress) {
+      if (progress >= 100) {
+        setTimeout(() => {
+          this.scan.progress = 0;
+          this.scan.id = null;
+        }, 1000);
+      }
+    },
+    "importing.progress"(progress) {
+      if (progress >= 100) {
+        setTimeout(() => {
+          this.importing.progress = 0;
+          this.importing.id = null;
+        }, 1000);
+      }
+    },
+    "exporting.progress"(progress) {
+      if (progress >= 100) {
+        setTimeout(() => {
+          this.exporting.progress = 0;
+          this.exporting.id = null;
+
+          this.getExports();
+        }, 1000);
+      }
+    }
+  },
+  beforeRouteUpdate() {
+    this.dataset.id = parseInt(this.identifier);
+    this.updatePage();
+  },
+  created() {
+    let tab = localStorage.getItem("dataset/tab");
+    let order = localStorage.getItem("dataset/order");
+    let sideWidth = localStorage.getItem("dataset/sideWidth");
+    
+    if (sideWidth !== null) this.sidebar.width = parseInt(sideWidth);
+    if (tab !== null) this.tab = tab;
+    if (order !== null) this.order = order;
+
+    this.dataset.id = parseInt(this.identifier);
+    this.updatePage();
+  },
+  mounted() {
+    this.updatePage();
+    window.addEventListener("mouseup", this.stopDrag);
+    window.addEventListener("mousedown", this.startDrag);
+  },
+  destroyed() {
+    window.removeEventListener("mouseup", this.stopDrag);
+    window.removeEventListener("mousedown", this.startDrag);
+  }
+};
+</script>
+
+<style scoped>
+.breadcrumb {
+  padding: 0px;
+  margin: 5px 0;
+}
+
+.btn-link {
+  padding: 0px;
+}
+
+.sidebar .title {
+  color: white;
+}
+
+.progress {
+  padding: 2px;
+  height: 24px;
+}
+
+.sidebar {
+  height: 100%;
+  position: fixed;
+  color: white;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #4b5162;
+  overflow-x: hidden;
+  padding-top: 60px;
+}
+
+.sidebar .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+
+.sidebar-title {
+  color: white;
+}
+
+.sidebar-section-buttons {
+  margin: 5px;
+}
+
+.sidebar-section {
+  margin: 5px;
+  border-radius: 5px;
+  background-color: #383c4a;
+  padding: 0 5px 2px 5px;
+  overflow: auto;
+}
+</style>

From 81dc33d7e711a2aa8d424d4ef3b058fbfb35fbc3 Mon Sep 17 00:00:00 2001
From: MarkXiLee <57758193+MarkXiLee@users.noreply.github.com>
Date: Fri, 6 May 2022 09:33:14 +0800
Subject: [PATCH 5/7] Delete Pagination.vue

---
 client/src/components/Pagination.vue | 101 ---------------------------
 1 file changed, 101 deletions(-)
 delete mode 100755 client/src/components/Pagination.vue

diff --git a/client/src/components/Pagination.vue b/client/src/components/Pagination.vue
deleted file mode 100755
index c3f2f1e6..00000000
--- a/client/src/components/Pagination.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<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"
-      >
-        <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: "Pagination",
-  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;
-
-      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>

From 732ae1b96cda5a43d2d8dd105396092c8de68d94 Mon Sep 17 00:00:00 2001
From: MarkXiLee <57758193+MarkXiLee@users.noreply.github.com>
Date: Fri, 6 May 2022 09:34:32 +0800
Subject: [PATCH 6/7] Component separation

---
 client/src/components/Pagination.vue     | 110 ++++++++++++++++++++++
 client/src/components/PaginationCopy.vue | 111 +++++++++++++++++++++++
 2 files changed, 221 insertions(+)
 create mode 100644 client/src/components/Pagination.vue
 create mode 100644 client/src/components/PaginationCopy.vue

diff --git a/client/src/components/Pagination.vue b/client/src/components/Pagination.vue
new file mode 100644
index 00000000..93ba7dc2
--- /dev/null
+++ b/client/src/components/Pagination.vue
@@ -0,0 +1,110 @@
+<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"
+      >
+        <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: "Pagination",
+  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;
+      }
+      //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);
+    }
+  },
+  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>
diff --git a/client/src/components/PaginationCopy.vue b/client/src/components/PaginationCopy.vue
new file mode 100644
index 00000000..d15ce3e5
--- /dev/null
+++ b/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>

From 7b1ab731c840471864a50e5e96e3e962ac2d6ca2 Mon Sep 17 00:00:00 2001
From: MarkXiLee <57758193+MarkXiLee@users.noreply.github.com>
Date: Fri, 6 May 2022 09:42:28 +0800
Subject: [PATCH 7/7] Update README.md

---
 README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/README.md b/README.md
index 4c43c887..6662350a 100644
--- a/README.md
+++ b/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">