rrr-marble
4 years ago
parent
dc8070b021
commit
de517c5bff
@ -0,0 +1,4 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
not ie 11
|
||||
@ -0,0 +1,19 @@
|
||||
# geoshop-frontend
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "geoshop-frontend",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.2.13",
|
||||
"vuestic-ui": "^1.4.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"vue-cli-plugin-vuestic-ui": "~1.0.8"
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Source+Sans+Pro:wght@400;700&display=swap"
|
||||
rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Vue 3 course</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div class="app">
|
||||
<va-navbar shape>
|
||||
<template #left>
|
||||
<va-navbar-item class="top-icon">
|
||||
<va-icon size="3rem">🌍</va-icon>
|
||||
</va-navbar-item>
|
||||
</template>
|
||||
<template #right>
|
||||
<va-navbar-item class="top-icon">
|
||||
<va-icon size="3rem">👤</va-icon>
|
||||
</va-navbar-item>
|
||||
</template>
|
||||
</va-navbar>
|
||||
<div class="central-view">
|
||||
<va-sidebar color="primary" text-color="white" gradient class="sidebar-proper">
|
||||
<va-sidebar-item active>
|
||||
<va-sidebar-item-content class="sidebar-item">
|
||||
<va-icon class="sidebar-icon" size="2rem" name="fact_check" />
|
||||
<va-sidebar-item-title class="sidebar-title">Active Schema</va-sidebar-item-title>
|
||||
</va-sidebar-item-content>
|
||||
</va-sidebar-item>
|
||||
<va-sidebar-item>
|
||||
<va-sidebar-item-content class="sidebar-item">
|
||||
<va-icon class="sidebar-icon" size="2rem" name="dashboard" />
|
||||
<va-sidebar-item-title class="sidebar-title">Review Data</va-sidebar-item-title>
|
||||
</va-sidebar-item-content>
|
||||
</va-sidebar-item>
|
||||
<va-sidebar-item>
|
||||
<va-sidebar-item-content class="sidebar-item">
|
||||
<va-icon class="sidebar-icon" size="2rem" name="file_upload" />
|
||||
<va-sidebar-item-title class="sidebar-title">Upload</va-sidebar-item-title>
|
||||
</va-sidebar-item-content>
|
||||
</va-sidebar-item>
|
||||
</va-sidebar>
|
||||
<div class="main-view">
|
||||
<!-- <upload-screen /> -->
|
||||
<active-schema-screen />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import UploadScreen from '@/components/UploadScreen.vue'
|
||||
import ActiveSchemaScreen from './components/ActiveSchemaScreen.vue'
|
||||
export default {
|
||||
components: { UploadScreen, ActiveSchemaScreen }
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="css">
|
||||
.app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.central-view {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar-proper {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
height: 4rem;
|
||||
display: flex;
|
||||
padding: 1rem 0.5rem;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.main-view {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 style="font-size: 3rem; margin: 1rem;">Active Schema</h1>
|
||||
<h2 style="margin-left: 1rem;">(coordinated format)</h2>
|
||||
<va-radio
|
||||
class="radio-switcher"
|
||||
v-for="(option, index) in viewOptions"
|
||||
:key="index"
|
||||
v-model="selectedOption"
|
||||
:option="option"
|
||||
></va-radio>
|
||||
<va-data-table :items="items" v-if="selectedOption === 'table-view'" />
|
||||
<va-list v-else-if="selectedOption === 'list-view'">
|
||||
<va-list-item v-for="(_, header, index) in items[0]" :key="index" class="header-list">
|
||||
<va-list-item-section icon>
|
||||
<va-icon name="circle" color="gray" size="small"></va-icon>
|
||||
</va-list-item-section>
|
||||
<va-list-item-section>
|
||||
<va-list-item-label class="header-item" caption:lines="index+1">{{ header }}</va-list-item-label>
|
||||
</va-list-item-section>
|
||||
</va-list-item>
|
||||
</va-list>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { defineComponent } from "vue";
|
||||
export default defineComponent({
|
||||
data() {
|
||||
const dummytable = [
|
||||
{
|
||||
"fadr": "",
|
||||
"Уникальный номер образца": "",
|
||||
"кордината X": "",
|
||||
"координата Y": "",
|
||||
"Категория в ГИС\nGeology - керн, каменный материал\nSoil - почва, грунты, морские осадки\n Material - искуственные материалы, минералы": "",
|
||||
"Категория (Археология, Биология, Минералы)": "",
|
||||
"Бассейн": "",
|
||||
"Месторождение": "",
|
||||
"№ скважины": "",
|
||||
"Глубина, интервал, привязка": "",
|
||||
"Свита\\пласт": "",
|
||||
"Хозяин (ФИО)": "",
|
||||
"Организация": "",
|
||||
"Контакты хозяина": "",
|
||||
"перечень объектов/образцов": "",
|
||||
"Описание объекта": "",
|
||||
"Форма, размер": "",
|
||||
"Перечень данных": "",
|
||||
"Разрешение, µm": "",
|
||||
"Дата съёмки": "",
|
||||
"Дополнительная информация": "",
|
||||
"Томограф": "",
|
||||
"комментарий": "",
|
||||
|
||||
}
|
||||
]
|
||||
return {
|
||||
items: dummytable,
|
||||
viewOptions: [
|
||||
"table-view",
|
||||
"list-view",
|
||||
"mosaic-view",
|
||||
],
|
||||
selectedOption: "list-view"
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="css" scoped>
|
||||
.radio-switcher {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
/* .header-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
} */
|
||||
|
||||
.header-item {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1 style="font-size: 3rem; margin: 1rem;">Upload</h1>
|
||||
<div class="upload-dashboard">
|
||||
<va-file-upload dropzone></va-file-upload>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "upload-screen"
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="css" scoped>
|
||||
.upload-dashboard {
|
||||
margin: 2rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,54 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import {
|
||||
createVuesticEssential,
|
||||
VaButton,
|
||||
VaInput,
|
||||
VaForm,
|
||||
VaNavbar,
|
||||
VaNavbarItem,
|
||||
VaSidebar,
|
||||
VaSidebarItem,
|
||||
VaSidebarItemContent,
|
||||
VaSidebarItemTitle,
|
||||
VaIcon,
|
||||
VaFileUpload,
|
||||
VaRadio,
|
||||
VaDataTable,
|
||||
VaList,
|
||||
VaListItem,
|
||||
VaListItemSection,
|
||||
VaListItemLabel,
|
||||
} from 'vuestic-ui'
|
||||
import 'vuestic-ui/styles/essential.css'
|
||||
import 'vuestic-ui/styles/grid.css'
|
||||
import 'vuestic-ui/styles/reset.css'
|
||||
import 'vuestic-ui/styles/typography.css'
|
||||
import 'vuestic-ui/dist/vuestic-ui.css'
|
||||
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(createVuesticEssential({
|
||||
components:
|
||||
{
|
||||
VaButton,
|
||||
VaInput,
|
||||
VaForm,
|
||||
VaNavbar,
|
||||
VaNavbarItem,
|
||||
VaSidebar,
|
||||
VaSidebarItem,
|
||||
VaSidebarItemContent,
|
||||
VaSidebarItemTitle,
|
||||
VaIcon,
|
||||
VaFileUpload,
|
||||
VaRadio,
|
||||
VaDataTable,
|
||||
VaList,
|
||||
VaListItem,
|
||||
VaListItemSection,
|
||||
VaListItemLabel,
|
||||
}
|
||||
}));
|
||||
|
||||
app.mount('#app');
|
||||
Reference in new issue