add import home page
This commit is contained in:
parent
69b13e4eb6
commit
45c86eb6d7
|
@ -82,8 +82,9 @@ def fetch_queued(request):
|
|||
data = json.loads(json.dumps(list(user_items), cls=DjangoJSONEncoder))
|
||||
for i, item in enumerate(data):
|
||||
count = len(item['geojson'].get('features', []))
|
||||
del item['geojson']
|
||||
item['processing'] = len(item['geojson']) == 0
|
||||
item['feature_count'] = count
|
||||
del item['geojson']
|
||||
return JsonResponse({'data': data})
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div class="mb-10">
|
||||
<div>
|
||||
<a href="/#/import/upload">Upload Files</a>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="fetchQueueList">Refresh</button>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>File Name</th>
|
||||
<th>Features</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in processQueue" :key="`item-${index}`">
|
||||
<td>
|
||||
<a :href="`/#/import/process/${item.id}`">{{ item.original_filename }}</a>
|
||||
</td>
|
||||
<td>
|
||||
{{ item.processing === true ? "processing" : item.feature_count }}
|
||||
</td>
|
||||
<td>
|
||||
<button @click="deleteItem(item.id)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex"
|
||||
import {authMixin} from "@/assets/js/authMixin.js";
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
components: {},
|
||||
mixins: [authMixin],
|
||||
data() {
|
||||
return {
|
||||
processQueue: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchQueueList() {
|
||||
const response = await axios.get('/api/data/item/import/get/mine')
|
||||
this.processQueue = response.data.data
|
||||
},
|
||||
async deleteItem(id) {
|
||||
try {
|
||||
const response = await axios.delete('/api/data/item/import/delete/' + id, {
|
||||
headers: {
|
||||
'X-CSRFToken': this.userInfo.csrftoken
|
||||
}
|
||||
})
|
||||
await this.fetchQueueList()
|
||||
} catch (error) {
|
||||
alert(`Failed to delete ${id}: ${error.message}`)
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.fetchQueueList()
|
||||
},
|
||||
// async mounted() {
|
||||
// },
|
||||
// beforeRouteEnter(to, from, next) {
|
||||
// next(async vm => {
|
||||
// })
|
||||
// },
|
||||
watch: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
|
@ -15,25 +15,6 @@
|
|||
</div>
|
||||
|
||||
<div v-if="uploadMsg !== ''" class="w-[90%] m-auto mt-10" v-html="uploadMsg"></div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>File Name</th>
|
||||
<th>Features</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in processQueue" :key="`item-${index}`">
|
||||
<td><a :href="`/#/import/process/${item.id}`">{{ item.original_filename }}</a></td>
|
||||
<td>{{ item.feature_count }}</td>
|
||||
<td>
|
||||
<button @click="deleteItem(item.id)">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
@ -10,6 +10,11 @@ const routes = [
|
|||
path: '/dashboard',
|
||||
name: 'Dashboard',
|
||||
component: () => import('./components/dashboard/Dashboard.vue'),
|
||||
},
|
||||
{
|
||||
path: '/import',
|
||||
name: 'Import',
|
||||
component: () => import('./components/import/ImportHome.vue'),
|
||||
},
|
||||
{
|
||||
path: '/import/upload',
|
||||
|
|
Loading…
Reference in New Issue