web: updated structure
Co-authored-by: wollenberg.niklas@gmail.com <wollenberg.niklas@gmail.com>
This commit is contained in:
parent
ab22d6d830
commit
89c9a9a345
9 changed files with 165 additions and 13 deletions
6
web/components.d.ts
vendored
6
web/components.d.ts
vendored
|
|
@ -7,7 +7,11 @@ export {}
|
|||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
|
||||
CategoryContainer: typeof import('./src/components/CategoryContainer.vue')['default']
|
||||
HeaderBar: typeof import('./src/components/HeaderBar.vue')['default']
|
||||
ListViewElement: typeof import('./src/components/ListViewElement.vue')['default']
|
||||
ListViewTemplate: typeof import('./src/components/ListViewTemplate.vue')['default']
|
||||
SearchElement: typeof import('./src/components/SearchElement.vue')['default']
|
||||
StartPage: typeof import('./src/components/StartPage.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,12 +2,13 @@
|
|||
"name": "web",
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "vite --host",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "6.2.95",
|
||||
"lucide-vue-next": "^0.402.0",
|
||||
"roboto-fontface": "*",
|
||||
"vue": "^3.4.21",
|
||||
"vuetify": "^3.5.8"
|
||||
|
|
@ -16,7 +17,6 @@
|
|||
"@babel/types": "^7.24.0",
|
||||
"@types/node": "^20.11.25",
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"sass": "^1.71.1",
|
||||
"typescript": "^5.4.2",
|
||||
"unplugin-fonts": "^1.1.1",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,9 @@ importers:
|
|||
'@mdi/font':
|
||||
specifier: 6.2.95
|
||||
version: 6.2.95
|
||||
lucide-vue-next:
|
||||
specifier: ^0.402.0
|
||||
version: 0.402.0(vue@3.4.31(typescript@5.5.3))
|
||||
roboto-fontface:
|
||||
specifier: '*'
|
||||
version: 0.10.0
|
||||
|
|
@ -30,9 +33,6 @@ importers:
|
|||
'@vitejs/plugin-vue':
|
||||
specifier: ^5.0.4
|
||||
version: 5.0.5(vite@5.3.3(@types/node@20.14.9)(sass@1.77.6))(vue@3.4.31(typescript@5.5.3))
|
||||
sass:
|
||||
specifier: ^1.71.1
|
||||
version: 1.77.6
|
||||
typescript:
|
||||
specifier: ^5.4.2
|
||||
version: 5.5.3
|
||||
|
|
@ -499,6 +499,11 @@ packages:
|
|||
resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==}
|
||||
engines: {node: '>=14'}
|
||||
|
||||
lucide-vue-next@0.402.0:
|
||||
resolution: {integrity: sha512-oxFgGTh/6aFDORHDCUlG8kvueJjEuR0dkX7HoSfNyCBDas8Dg8QQyZQFHo5D5aoThik+JAg80ByefkcJw85w9Q==}
|
||||
peerDependencies:
|
||||
vue: '>=3.0.1'
|
||||
|
||||
magic-string@0.30.10:
|
||||
resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
|
||||
|
||||
|
|
@ -1075,7 +1080,8 @@ snapshots:
|
|||
|
||||
he@1.2.0: {}
|
||||
|
||||
immutable@4.3.6: {}
|
||||
immutable@4.3.6:
|
||||
optional: true
|
||||
|
||||
is-binary-path@2.1.0:
|
||||
dependencies:
|
||||
|
|
@ -1095,6 +1101,10 @@ snapshots:
|
|||
|
||||
local-pkg@0.4.3: {}
|
||||
|
||||
lucide-vue-next@0.402.0(vue@3.4.31(typescript@5.5.3)):
|
||||
dependencies:
|
||||
vue: 3.4.31(typescript@5.5.3)
|
||||
|
||||
magic-string@0.30.10:
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.4.15
|
||||
|
|
@ -1179,6 +1189,7 @@ snapshots:
|
|||
chokidar: 3.6.0
|
||||
immutable: 4.3.6
|
||||
source-map-js: 1.2.0
|
||||
optional: true
|
||||
|
||||
semver@7.6.2: {}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,25 @@
|
|||
<template>
|
||||
<v-app>
|
||||
<v-main>
|
||||
<StartPage />
|
||||
<HeaderBar />
|
||||
<div class="categoryContainer">
|
||||
<CategoryContainer licenseGroupName="Jetbrains Ultimate"/>
|
||||
<CategoryContainer licenseGroupName="Microsoft"/>
|
||||
</div>
|
||||
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import StartPage from './components/StartPage.vue';
|
||||
import HeaderBar from './components/HeaderBar.vue';
|
||||
import CategoryContainer from './components/CategoryContainer.vue';
|
||||
|
||||
//
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
.categoryContainer {
|
||||
margin-left: 5%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
43
web/src/components/CategoryContainer.vue
Normal file
43
web/src/components/CategoryContainer.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<div class="root">
|
||||
<h2>{{ props.licenseGroupName }}:</h2>
|
||||
<ListViewElement
|
||||
licenseName="Jetbrains Ultimate 2024.2.1"
|
||||
licenseKey="321z8321789"
|
||||
startDate="12.12.2020"
|
||||
endDate="13.12.2021"
|
||||
amount="1"
|
||||
tags=""
|
||||
notes="No notes"
|
||||
/>
|
||||
<!-- <ListViewElement
|
||||
licenseName="Jetbrains Ultimate 2024.2.1"
|
||||
key=""
|
||||
startDate=""
|
||||
endDate=""
|
||||
amount=""
|
||||
tags=""
|
||||
notes=""
|
||||
/> -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
import ListViewElement from './ListViewElement.vue'
|
||||
|
||||
const props = defineProps({
|
||||
licenseGroupName: String
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.root {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
50
web/src/components/HeaderBar.vue
Normal file
50
web/src/components/HeaderBar.vue
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<template >
|
||||
<v-row justify="end" class="header-component">
|
||||
<v-col cols="auto">
|
||||
<v-app-bar :elevation="0" color="cyan-darken-3">
|
||||
<Building2 id="placeholderIcon"/>
|
||||
<v-text-field
|
||||
class="compact-form"
|
||||
label="Search"
|
||||
variant="solo"
|
||||
prepend-icon="mdi-magnify"
|
||||
hide-details
|
||||
single-line
|
||||
clearable
|
||||
rounded="pill"
|
||||
></v-text-field>
|
||||
<!-- <v-btn icon>
|
||||
<v-icon>mdi-dots-vertical</v-icon>
|
||||
</v-btn> -->
|
||||
<CircleUser id="userIcon"/>
|
||||
</v-app-bar>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Building2 } from 'lucide-vue-next';
|
||||
import { CircleUser } from 'lucide-vue-next';
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.bg-main-color {
|
||||
|
||||
}
|
||||
|
||||
.compact-form {
|
||||
transform: scale(0.7);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
#placeholderIcon {
|
||||
margin-right: 20%;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#userIcon {
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
33
web/src/components/ListViewElement.vue
Normal file
33
web/src/components/ListViewElement.vue
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<v-sheet
|
||||
elevation="4"
|
||||
width="60vw"
|
||||
>
|
||||
<div>
|
||||
licenseName: {{ props.licenseName }}
|
||||
licenseKey: {{ props.licenseKey }}
|
||||
</div>
|
||||
</v-sheet>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
licenseName: String,
|
||||
licenseKey: String,
|
||||
startDate: String,
|
||||
endDate: String,
|
||||
amount: Number,
|
||||
tags: Array,
|
||||
notes: String,
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -9,6 +9,7 @@ import { registerPlugins } from '@/plugins'
|
|||
|
||||
// Components
|
||||
import App from './App.vue'
|
||||
import './assets/styles/variables.scss'
|
||||
|
||||
// Composables
|
||||
import { createApp } from 'vue'
|
||||
|
|
@ -18,3 +19,5 @@ const app = createApp(App)
|
|||
registerPlugins(app)
|
||||
|
||||
app.mount('#app')
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,6 @@ import { createVuetify } from 'vuetify'
|
|||
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||
export default createVuetify({
|
||||
theme: {
|
||||
defaultTheme: 'dark',
|
||||
defaultTheme: 'light',
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue