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