- npm updates - new SearchMap.vue component
This commit is contained in:
parent
7bc9f90cca
commit
a7142f694f
74 changed files with 3360 additions and 3577 deletions
|
|
@ -1,34 +1,30 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm, router } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline,
|
||||
mdiAccount, mdiNoteText, mdiFormTextarea
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import FormField from '@/Components/FormField.vue'
|
||||
import FormControl from '@/Components/FormControl.vue'
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
|
||||
import BaseDivider from '@/Components/BaseDivider.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
import BaseButtons from '@/Components/BaseButtons.vue'
|
||||
import { Head, Link, useForm, router } from '@inertiajs/vue3';
|
||||
import { mdiAccountKey, mdiArrowLeftBoldOutline, mdiAccount, mdiNoteText, mdiFormTextarea } from '@mdi/js';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import FormField from '@/Components/FormField.vue';
|
||||
import FormControl from '@/Components/FormControl.vue';
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
|
||||
import BaseDivider from '@/Components/BaseDivider.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import BaseButtons from '@/Components/BaseButtons.vue';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
const props = defineProps({
|
||||
permissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
permissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
name: '',
|
||||
display_name: '',
|
||||
description: '',
|
||||
permissions: []
|
||||
name: '',
|
||||
display_name: '',
|
||||
description: '',
|
||||
permissions: [],
|
||||
});
|
||||
|
||||
const submit = async () => {
|
||||
|
|
@ -37,58 +33,77 @@ const submit = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<LayoutAuthenticated>
|
||||
<Head title="Add role" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Add role" main>
|
||||
<BaseButton
|
||||
:route-name="stardust.route('role.index')"
|
||||
:icon="mdiArrowLeftBoldOutline"
|
||||
label="Back"
|
||||
color="white"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <CardBox form @submit.prevent="form.post(stardust.route('role.store'))"> -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
<FormField label="Name" help="Required. Role name" :class="{ 'text-red-400': form.errors.name }">
|
||||
<FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.name">
|
||||
{{ form.errors.name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<Head title="Add role" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Add role" main>
|
||||
<BaseButton :route-name="stardust.route('role.index')" :icon="mdiArrowLeftBoldOutline" label="Back" color="white"
|
||||
rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <CardBox form @submit.prevent="form.post(stardust.route('role.store'))"> -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
<FormField label="Display Name" help="Optional. Display name" :class="{ 'text-red-400': form.errors.display_name }">
|
||||
<FormControl v-model="form.display_name" name="display_name" :error="form.errors.display_name">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.display_name">
|
||||
{{ form.errors.display_name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Name" help="Required. Role name" :class="{ 'text-red-400': form.errors.name }">
|
||||
<FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.name">
|
||||
{{ form.errors.name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Description"
|
||||
help="Optional. Description of new role"
|
||||
:class="{ 'text-red-400': form.errors.description }"
|
||||
>
|
||||
<FormControl
|
||||
v-model="form.description"
|
||||
v-bind:icon="mdiFormTextarea"
|
||||
name="display_name"
|
||||
:type="'textarea'"
|
||||
:error="form.errors.description"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.description">
|
||||
{{ form.errors.description }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Display Name" help="Optional. Display name" :class="{ 'text-red-400': form.errors.display_name }">
|
||||
<FormControl v-model="form.display_name" name="display_name" :error="form.errors.display_name">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.display_name">
|
||||
{{ form.errors.display_name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="Description" help="Optional. Description of new role" :class="{ 'text-red-400': form.errors.description }">
|
||||
<FormControl v-model="form.description" v-bind:icon="mdiFormTextarea" name="display_name" :type="'textarea'" :error="form.errors.description">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.description">
|
||||
{{ form.errors.description }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField label="Permissions" wrap-body>
|
||||
<FormCheckRadioGroup v-model="form.permissions" name="permissions" is-column :options="props.permissions" />
|
||||
</FormField>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.permissions && Array.isArray(form.errors.permissions)">
|
||||
<!-- {{ errors.password_confirmation }} -->
|
||||
{{ form.errors.permissions.join(', ') }}
|
||||
</div>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="Permissions" wrap-body>
|
||||
<FormCheckRadioGroup v-model="form.permissions" name="permissions" is-column :options="props.permissions" />
|
||||
</FormField>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.permissions && Array.isArray(form.errors.permissions)">
|
||||
<!-- {{ errors.password_confirmation }} -->
|
||||
{{ form.errors.permissions.join(', ') }}
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Submit" :class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
color="info"
|
||||
label="Submit"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,39 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline,
|
||||
mdiFormTextarea
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import FormField from '@/Components/FormField.vue'
|
||||
import FormControl from '@/Components/FormControl.vue'
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
|
||||
import BaseDivider from '@/Components/BaseDivider.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
import BaseButtons from '@/Components/BaseButtons.vue'
|
||||
import { Head, Link, useForm } from '@inertiajs/vue3';
|
||||
import { mdiAccountKey, mdiArrowLeftBoldOutline, mdiFormTextarea } from '@mdi/js';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import FormField from '@/Components/FormField.vue';
|
||||
import FormControl from '@/Components/FormControl.vue';
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
|
||||
import BaseDivider from '@/Components/BaseDivider.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import BaseButtons from '@/Components/BaseButtons.vue';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
const props = defineProps({
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
permissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roleHasPermissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
}
|
||||
})
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
permissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roleHasPermissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
_method: 'put',
|
||||
name: props.role.name,
|
||||
description: props.role.description,
|
||||
permissions: props.roleHasPermissions
|
||||
})
|
||||
_method: 'put',
|
||||
name: props.role.name,
|
||||
description: props.role.description,
|
||||
permissions: props.roleHasPermissions,
|
||||
});
|
||||
|
||||
const submit = async () => {
|
||||
// await Inertia.post(stardust.route('user.store'), form);
|
||||
|
|
@ -46,46 +42,65 @@ const submit = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<LayoutAuthenticated>
|
||||
<Head title="Update role" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Update role" main>
|
||||
<BaseButton
|
||||
:route-name="stardust.route('role.index')"
|
||||
:icon="mdiArrowLeftBoldOutline"
|
||||
label="Back"
|
||||
color="white"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <CardBox form @submit.prevent="form.put(stardust.route('role.update', [props.role.id]))"> -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
<FormField label="Name" :class="{ 'text-red-400': form.errors.name }">
|
||||
<FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.name">
|
||||
{{ form.errors.name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<Head title="Update role" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Update role" main>
|
||||
<BaseButton :route-name="stardust.route('role.index')" :icon="mdiArrowLeftBoldOutline" label="Back" color="white"
|
||||
rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <CardBox form @submit.prevent="form.put(stardust.route('role.update', [props.role.id]))"> -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
|
||||
<FormField label="Name" :class="{ 'text-red-400': form.errors.name }">
|
||||
<FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.name">
|
||||
{{ form.errors.name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Description"
|
||||
help="Optional. Description of new role"
|
||||
:class="{ 'text-red-400': form.errors.description }"
|
||||
>
|
||||
<FormControl
|
||||
v-model="form.description"
|
||||
v-bind:icon="mdiFormTextarea"
|
||||
name="display_name"
|
||||
:type="'textarea'"
|
||||
:error="form.errors.description"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.description">
|
||||
{{ form.errors.description }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Description" help="Optional. Description of new role" :class="{ 'text-red-400': form.errors.description }">
|
||||
<FormControl v-model="form.description" v-bind:icon="mdiFormTextarea" name="display_name" :type="'textarea'" :error="form.errors.description">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.description">
|
||||
{{ form.errors.description }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<BaseDivider />
|
||||
|
||||
<BaseDivider />
|
||||
<FormField label="Permissions" wrap-body>
|
||||
<FormCheckRadioGroup v-model="form.permissions" name="permissions" is-column :options="props.permissions" />
|
||||
</FormField>
|
||||
|
||||
<FormField label="Permissions" wrap-body>
|
||||
<FormCheckRadioGroup v-model="form.permissions" name="permissions" is-column :options="props.permissions" />
|
||||
</FormField>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Submit" :class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
color="info"
|
||||
label="Submit"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,68 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline,
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import BaseButton from "@/Components/BaseButton.vue"
|
||||
import { Head, Link, useForm } from '@inertiajs/vue3';
|
||||
import { mdiAccountKey, mdiArrowLeftBoldOutline } from '@mdi/js';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
const props = defineProps({
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
permissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roleHasPermissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
}
|
||||
})
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
permissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roleHasPermissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="View role" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="View role" main>
|
||||
<BaseButton :route-name="stardust.route('role.index')" :icon="mdiArrowLeftBoldOutline" label="Back" color="white"
|
||||
rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<CardBox class="mb-6">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">
|
||||
Name
|
||||
</td>
|
||||
<td data-label="Name">
|
||||
{{ role.name }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">
|
||||
Name
|
||||
</td>
|
||||
<td data-label="Description">
|
||||
{{ role.description }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="
|
||||
p-4
|
||||
pl-8
|
||||
text-slate-500
|
||||
dark:text-slate-400
|
||||
hidden
|
||||
lg:block
|
||||
">
|
||||
Created
|
||||
</td>
|
||||
<td data-label="Created">
|
||||
<!-- {{ new Date(role.created_at).toLocaleString() }} -->
|
||||
{{ role.created_at }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
<LayoutAuthenticated>
|
||||
<Head title="View role" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="View role" main>
|
||||
<BaseButton
|
||||
:route-name="stardust.route('role.index')"
|
||||
:icon="mdiArrowLeftBoldOutline"
|
||||
label="Back"
|
||||
color="white"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
<CardBox class="mb-6">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">Name</td>
|
||||
<td data-label="Name">
|
||||
{{ role.name }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">Name</td>
|
||||
<td data-label="Description">
|
||||
{{ role.description }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">Created</td>
|
||||
<td data-label="Created">
|
||||
<!-- {{ new Date(role.created_at).toLocaleString() }} -->
|
||||
{{ role.created_at }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -40,12 +40,17 @@ const submit = async () => {
|
|||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="Add user" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Add user" main>
|
||||
<BaseButton :route-name="stardust.route('user.index')" :icon="mdiArrowLeftBoldOutline" label="Back"
|
||||
color="modern" rounded-full small />
|
||||
<BaseButton
|
||||
:route-name="stardust.route('user.index')"
|
||||
:icon="mdiArrowLeftBoldOutline"
|
||||
label="Back"
|
||||
color="modern"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- @submit.prevent="form.post(stardust.route('user.store'))" -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
|
|
@ -68,8 +73,7 @@ const submit = async () => {
|
|||
</FormField>
|
||||
|
||||
<FormField label="Password" :class="{ 'text-red-400': errors.password }">
|
||||
<FormControl v-model="form.password" type="password" placeholder="Enter Password"
|
||||
:errors="errors.password">
|
||||
<FormControl v-model="form.password" type="password" placeholder="Enter Password" :errors="errors.password">
|
||||
<div class="text-red-400 text-sm" v-if="errors.password && Array.isArray(errors.password)">
|
||||
<!-- {{ errors.password }} -->
|
||||
{{ errors.password.join(', ') }}
|
||||
|
|
@ -78,10 +82,16 @@ const submit = async () => {
|
|||
</FormField>
|
||||
|
||||
<FormField label="Password Confirmation" :class="{ 'text-red-400': errors.password_confirmation }">
|
||||
<FormControl v-model="form.password_confirmation" type="password"
|
||||
placeholder="Enter Password Confirmation" :errors="errors.password">
|
||||
<div class="text-red-400 text-sm"
|
||||
v-if="errors.password_confirmation && Array.isArray(errors.password_confirmation)">
|
||||
<FormControl
|
||||
v-model="form.password_confirmation"
|
||||
type="password"
|
||||
placeholder="Enter Password Confirmation"
|
||||
:errors="errors.password"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="errors.password_confirmation && Array.isArray(errors.password_confirmation)"
|
||||
>
|
||||
<!-- {{ errors.password_confirmation }} -->
|
||||
{{ errors.password_confirmation.join(', ') }}
|
||||
</div>
|
||||
|
|
@ -100,8 +110,13 @@ const submit = async () => {
|
|||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Submit" :class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing" />
|
||||
<BaseButton
|
||||
type="submit"
|
||||
color="info"
|
||||
label="Submit"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,46 @@
|
|||
<script setup lang="ts">
|
||||
import { Head, useForm, router } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import FormField from '@/Components/FormField.vue'
|
||||
import FormControl from '@/Components/FormControl.vue'
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
|
||||
import BaseDivider from '@/Components/BaseDivider.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
import BaseButtons from '@/Components/BaseButtons.vue'
|
||||
import { Head, useForm, router } from '@inertiajs/vue3';
|
||||
import { mdiAccountKey, mdiArrowLeftBoldOutline } from '@mdi/js';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import FormField from '@/Components/FormField.vue';
|
||||
import FormControl from '@/Components/FormControl.vue';
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
|
||||
import BaseDivider from '@/Components/BaseDivider.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import BaseButtons from '@/Components/BaseButtons.vue';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
|
||||
const props = defineProps({
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roles: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
userHasRoles: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roles: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
userHasRoles: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
_method: 'put',
|
||||
login: props.user.login,
|
||||
email: props.user.email,
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
roles: props.userHasRoles, // fill actual user roles from db
|
||||
})
|
||||
_method: 'put',
|
||||
login: props.user.login,
|
||||
email: props.user.email,
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
roles: props.userHasRoles, // fill actual user roles from db
|
||||
});
|
||||
|
||||
const submit = async () => {
|
||||
// await Inertia.post(stardust.route('user.store'), form);
|
||||
|
|
@ -52,67 +49,83 @@ const submit = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<LayoutAuthenticated>
|
||||
<Head title="Update user" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Update user" main>
|
||||
<BaseButton
|
||||
:route-name="stardust.route('user.index')"
|
||||
:icon="mdiArrowLeftBoldOutline"
|
||||
label="Back"
|
||||
color="white"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <CardBox form @submit.prevent="form.put(stardust.route('user.update', [props.user.id]))"> -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
<FormField label="Enter Login" :class="{ 'text-red-400': errors.name }">
|
||||
<FormControl v-model="form.login" type="text" placeholder="Name" :errors="errors.login">
|
||||
<div class="text-red-400 text-sm" v-if="errors.login">
|
||||
{{ errors.login }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<Head title="Update user" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Update user" main>
|
||||
<BaseButton :route-name="stardust.route('user.index')" :icon="mdiArrowLeftBoldOutline" label="Back"
|
||||
color="white" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <CardBox form @submit.prevent="form.put(stardust.route('user.update', [props.user.id]))"> -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
<FormField label="Enter Email" :class="{ 'text-red-400': errors.email }">
|
||||
<FormControl v-model="form.email" type="text" placeholder="Email" :errors="errors.email">
|
||||
<div class="text-red-400 text-sm" v-if="errors.email && Array.isArray(errors.email)">
|
||||
{{ errors.email.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Enter Login" :class="{ 'text-red-400': errors.name }">
|
||||
<FormControl v-model="form.login" type="text" placeholder="Name" :errors="errors.login">
|
||||
<div class="text-red-400 text-sm" v-if="errors.login">
|
||||
{{ errors.login }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField label="Password" :class="{ 'text-red-400': errors.password }">
|
||||
<FormControl v-model="form.password" type="password" placeholder="Enter Password" :errors="errors.password">
|
||||
<div class="text-red-400 text-sm" v-if="errors.password">
|
||||
{{ errors.password }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Enter Email" :class="{ 'text-red-400': errors.email }">
|
||||
<FormControl v-model="form.email" type="text" placeholder="Email" :errors="errors.email">
|
||||
<div class="text-red-400 text-sm" v-if="errors.email && Array.isArray(errors.email)">
|
||||
{{ errors.email.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField label="Password Confirmation" :class="{ 'text-red-400': errors.password_confirmation }">
|
||||
<FormControl
|
||||
v-model="form.password_confirmation"
|
||||
type="password"
|
||||
placeholder="Enter Password Confirmation"
|
||||
:errors="errors.password"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="errors.password_confirmation && Array.isArray(errors.password_confirmation)"
|
||||
>
|
||||
{{ errors.password_confirmation.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Password" :class="{ 'text-red-400': errors.password }">
|
||||
<FormControl v-model="form.password" type="password" placeholder="Enter Password" :errors="errors.password">
|
||||
<div class="text-red-400 text-sm" v-if="errors.password">
|
||||
{{ errors.password }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="Password Confirmation" :class="{ 'text-red-400': errors.password_confirmation }">
|
||||
<FormControl v-model="form.password_confirmation" type="password" placeholder="Enter Password Confirmation"
|
||||
:errors="errors.password">
|
||||
<div class="text-red-400 text-sm" v-if="errors.password_confirmation && Array.isArray(errors.password_confirmation)">
|
||||
{{ errors.password_confirmation.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField label="Roles" wrap-body :class="{ 'text-red-400': errors.roles }">
|
||||
<FormCheckRadioGroup v-model="form.roles" name="roles" is-column :options="props.roles" />
|
||||
</FormField>
|
||||
<div class="text-red-400 text-sm" v-if="errors.roles && Array.isArray(errors.roles)">
|
||||
<!-- {{ errors.password_confirmation }} -->
|
||||
{{ errors.roles.join(', ') }}
|
||||
</div>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="Roles" wrap-body :class="{ 'text-red-400': errors.roles }">
|
||||
<FormCheckRadioGroup v-model="form.roles" name="roles" is-column :options="props.roles" />
|
||||
</FormField>
|
||||
<div class="text-red-400 text-sm" v-if="errors.roles && Array.isArray(errors.roles)">
|
||||
<!-- {{ errors.password_confirmation }} -->
|
||||
{{ errors.roles.join(', ') }}
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Submit" :class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
color="info"
|
||||
label="Submit"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,13 +2,7 @@
|
|||
// import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
|
||||
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
|
||||
import { ComputedRef } from 'vue';
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiPlus,
|
||||
mdiSquareEditOutline,
|
||||
mdiTrashCan,
|
||||
mdiAlertBoxOutline,
|
||||
} from '@mdi/js';
|
||||
import { mdiAccountKey, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
|
||||
import { computed } from 'vue';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
|
|
@ -59,22 +53,26 @@ const formDelete = useForm({});
|
|||
|
||||
// async function destroy(id) {
|
||||
const destroy = async (id) => {
|
||||
if (confirm('Are you sure you want to delete?')) {
|
||||
if (confirm('Are you sure you want to delete?')) {
|
||||
await formDelete.delete(stardust.route('user.destroy', [id]));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="Users" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Tethys Users" main>
|
||||
<BaseButton v-if="can.create" :route-name="stardust.route('user.create')" :icon="mdiPlus" label="Add"
|
||||
color="modern" rounded-full small />
|
||||
<BaseButton
|
||||
v-if="can.create"
|
||||
:route-name="stardust.route('user.create')"
|
||||
:icon="mdiPlus"
|
||||
label="Add"
|
||||
color="modern"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <label>{{ form.search }}</label> -->
|
||||
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
|
||||
|
|
@ -85,11 +83,13 @@ const destroy = async (id) => {
|
|||
<form @submit.prevent="form.get(stardust.route('user.index'))">
|
||||
<div class="py-2 flex">
|
||||
<div class="flex pl-4">
|
||||
<input type="search" v-model="form.search"
|
||||
<input
|
||||
type="search"
|
||||
v-model="form.search"
|
||||
class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
|
||||
placeholder="Search" />
|
||||
<BaseButton label="Search" type="submit" color="modern"
|
||||
class="ml-4 inline-flex items-center px-4 py-2" />
|
||||
placeholder="Search"
|
||||
/>
|
||||
<BaseButton label="Search" type="submit" color="modern" class="ml-4 inline-flex items-center px-4 py-2" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -112,9 +112,11 @@ const destroy = async (id) => {
|
|||
<tbody>
|
||||
<tr v-for="user in users.data" :key="user.id">
|
||||
<td data-label="Login">
|
||||
<Link v-bind:href="stardust.route('user.show', [user.id])"
|
||||
class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
|
||||
{{ user.login }}
|
||||
<Link
|
||||
v-bind:href="stardust.route('user.show', [user.id])"
|
||||
class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
|
||||
>
|
||||
{{ user.login }}
|
||||
</Link>
|
||||
<!-- {{ user.id }} -->
|
||||
</td>
|
||||
|
|
@ -124,19 +126,13 @@ const destroy = async (id) => {
|
|||
<td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
|
||||
<BaseButtons type="justify-start lg:justify-end" no-wrap>
|
||||
<BaseButton
|
||||
v-if="can.edit"
|
||||
:route-name="stardust.route('user.edit', [user.id])"
|
||||
color="info"
|
||||
:icon="mdiSquareEditOutline"
|
||||
small
|
||||
/>
|
||||
<BaseButton
|
||||
v-if="can.delete"
|
||||
color="danger"
|
||||
:icon="mdiTrashCan"
|
||||
small
|
||||
@click="destroy(user.id)"
|
||||
/>
|
||||
v-if="can.edit"
|
||||
:route-name="stardust.route('user.edit', [user.id])"
|
||||
color="info"
|
||||
:icon="mdiSquareEditOutline"
|
||||
small
|
||||
/>
|
||||
<BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="destroy(user.id)" />
|
||||
</BaseButtons>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@ import { stardust } from '@eidellev/adonis-stardust/client';
|
|||
|
||||
defineProps({
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roles: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<template>
|
||||
<div>
|
||||
<Link href="/app/login">Login</Link>
|
||||
<h1 class="text-red-500">Welcome, {{ testing }}</h1>
|
||||
<!-- <n-button>Testing</n-button>
|
||||
<div>
|
||||
<Link href="/app/login">Login</Link>
|
||||
<h1 class="text-red-500">Welcome, {{ testing }}</h1>
|
||||
<!-- <n-button>Testing</n-button>
|
||||
<n-input v-bind:value="testing"></n-input> -->
|
||||
|
||||
<div class="features">
|
||||
<ul>
|
||||
<li v-for="user in users">
|
||||
<span>{{ user.login }}</span>
|
||||
<span>{{ user.email }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features">
|
||||
<ul>
|
||||
<li v-for="user in users">
|
||||
<span>{{ user.login }}</span>
|
||||
<span>{{ user.email }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <script>
|
||||
|
|
@ -52,36 +52,36 @@ export default {
|
|||
}
|
||||
</script> -->
|
||||
|
||||
<script lang ="ts">
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from 'vue-facing-decorator';
|
||||
import type User from "App/Models/User";
|
||||
import type User from 'App/Models/User';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import DefaultLayout from '@/Layouts/Default.vue';
|
||||
// import { NInput, NButton } from 'naive-ui';
|
||||
|
||||
@Component({
|
||||
options: {
|
||||
layout: DefaultLayout,
|
||||
},
|
||||
name: 'AppComponent',
|
||||
components: {
|
||||
Link,
|
||||
// NInput,
|
||||
// NButton,
|
||||
},
|
||||
options: {
|
||||
layout: DefaultLayout,
|
||||
},
|
||||
name: 'AppComponent',
|
||||
components: {
|
||||
Link,
|
||||
// NInput,
|
||||
// NButton,
|
||||
},
|
||||
})
|
||||
export default class AppComponent extends Vue {
|
||||
// Component Property
|
||||
@Prop({
|
||||
type: String,
|
||||
default: () => (""),
|
||||
})
|
||||
testing: string;
|
||||
// Component Property
|
||||
@Prop({
|
||||
type: String,
|
||||
default: () => '',
|
||||
})
|
||||
testing: string;
|
||||
|
||||
@Prop({
|
||||
type: Array,
|
||||
default: () => ([]),
|
||||
})
|
||||
users: Array<User>;
|
||||
@Prop({
|
||||
type: Array,
|
||||
default: () => [],
|
||||
})
|
||||
users: Array<User>;
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -32,12 +32,11 @@ import FormControl from '@/Components/FormControl.vue';
|
|||
|
||||
<template>
|
||||
<LayoutGuest>
|
||||
|
||||
<Head title="Login" />
|
||||
|
||||
<SectionFullScreen v-slot="{ cardClass }">
|
||||
<a class="text-2xl font-semibold flex justify-center items-center mb-8 lg:mb-10">
|
||||
<img src="/logo.svg" class="h-10 mr-4" alt="Windster Logo">
|
||||
<img src="/logo.svg" class="h-10 mr-4" alt="Windster Logo" />
|
||||
<!-- <span class="self-center text-2xl font-bold whitespace-nowrap">Tethys</span> -->
|
||||
</a>
|
||||
<!-- Card -->
|
||||
|
|
@ -49,13 +48,18 @@ import FormControl from '@/Components/FormControl.vue';
|
|||
</NotificationBarInCard>
|
||||
|
||||
<FormField label="Email" label-for="email" help="Please enter your email">
|
||||
<FormControl v-model="form.email" :icon="mdiAccount" id="email" autocomplete="email" type="email"
|
||||
required />
|
||||
<FormControl v-model="form.email" :icon="mdiAccount" id="email" autocomplete="email" type="email" required />
|
||||
</FormField>
|
||||
|
||||
<FormField label="Password" label-for="password" help="Please enter your password">
|
||||
<FormControl v-model="form.password" :icon="mdiAsterisk" type="password" id="password"
|
||||
autocomplete="current-password" required />
|
||||
<FormControl
|
||||
v-model="form.password"
|
||||
:icon="mdiAsterisk"
|
||||
type="password"
|
||||
id="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormCheckRadioGroup v-model="form.remember" name="remember" :options="{ remember: 'Remember' }" />
|
||||
|
|
@ -78,8 +82,12 @@ import FormControl from '@/Components/FormControl.vue';
|
|||
<BaseButtons>
|
||||
<!-- <BaseButton type="submit" color="info" label="Login" :class="{ 'opacity-25': form.processing }"
|
||||
v-bind:disabled="form.processing" /> -->
|
||||
<button type="submit" v-bind:disabled="form.processing" :class="{ 'opacity-25': form.processing }"
|
||||
class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-base px-5 py-3 w-full sm:w-auto text-center">
|
||||
<button
|
||||
type="submit"
|
||||
v-bind:disabled="form.processing"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-base px-5 py-3 w-full sm:w-auto text-center"
|
||||
>
|
||||
Login to your account
|
||||
</button>
|
||||
<!-- <BaseButton v-if="canResetPassword" :route-name="route('password.request')" color="info" outline
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <Link href="/app">Home</Link>
|
||||
<div>
|
||||
<!-- <Link href="/app">Home</Link>
|
||||
<br /> -->
|
||||
<h1>Register</h1>
|
||||
<form @submit.prevent="submit()" class="max-w-sm">
|
||||
<!-- <form @submit.prevent="form.post('/app/register')" class="max-w-sm"> -->
|
||||
<!-- <n-input type="email" v-model:value="form.email" placeholder="email" class="mb-3" />
|
||||
<h1>Register</h1>
|
||||
<form @submit.prevent="submit()" class="max-w-sm">
|
||||
<!-- <form @submit.prevent="form.post('/app/register')" class="max-w-sm"> -->
|
||||
<!-- <n-input type="email" v-model:value="form.email" placeholder="email" class="mb-3" />
|
||||
<n-input type="password" v-model:value="form.password" placeholder="Password" class="mb-3" /> -->
|
||||
<form-input v-bind:label="'Emai22l'" v-bind:type="'email'" v-model="form.email" />
|
||||
<form-input v-bind:label="'Password'" v-bind:type="'password'" v-model="form.password" />
|
||||
<form-input v-bind:label="'Emai22l'" v-bind:type="'email'" v-model="form.email" />
|
||||
<form-input v-bind:label="'Password'" v-bind:type="'password'" v-model="form.password" />
|
||||
|
||||
<!-- <n-button attr-type="submit"> Register </n-button> -->
|
||||
</form>
|
||||
</div>
|
||||
<!-- <n-button attr-type="submit"> Register </n-button> -->
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -23,33 +23,33 @@ import { useForm } from '@inertiajs/vue3';
|
|||
import { Inertia } from '@inertiajs/inertia';
|
||||
// import { NButton, NInput } from 'naive-ui';
|
||||
// import { useForm } from '@inertiajs/inertia-vue3'
|
||||
import FormInput from '@/Components/FormInput.vue'
|
||||
import FormInput from '@/Components/FormInput.vue';
|
||||
|
||||
export default {
|
||||
layout: AuthLayout,
|
||||
layout: AuthLayout,
|
||||
|
||||
components: {
|
||||
NButton,
|
||||
// NInput,
|
||||
FormInput
|
||||
},
|
||||
components: {
|
||||
NButton,
|
||||
// NInput,
|
||||
FormInput,
|
||||
},
|
||||
|
||||
setup() {
|
||||
// const form = useForm({
|
||||
// email: '',
|
||||
// password: ''
|
||||
// });
|
||||
const form = reactive({
|
||||
email: null,
|
||||
password: null,
|
||||
});
|
||||
setup() {
|
||||
// const form = useForm({
|
||||
// email: '',
|
||||
// password: ''
|
||||
// });
|
||||
const form = reactive({
|
||||
email: null,
|
||||
password: null,
|
||||
});
|
||||
|
||||
const submit = async () => {
|
||||
await Inertia.post('/app/register', form);
|
||||
};
|
||||
const submit = async () => {
|
||||
await Inertia.post('/app/register', form);
|
||||
};
|
||||
|
||||
return { form, submit };
|
||||
},
|
||||
return { form, submit };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@ import { computed, ref, onMounted } from 'vue';
|
|||
import { MainService } from '@/Stores/main';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
import {
|
||||
mdiAccountMultiple,
|
||||
mdiDatabaseOutline,
|
||||
mdiChartTimelineVariant,
|
||||
mdiFinance,
|
||||
mdiMonitorCellphone,
|
||||
mdiReload,
|
||||
mdiGithub,
|
||||
mdiChartPie,
|
||||
mdiAccountMultiple,
|
||||
mdiDatabaseOutline,
|
||||
mdiChartTimelineVariant,
|
||||
mdiFinance,
|
||||
mdiMonitorCellphone,
|
||||
mdiReload,
|
||||
mdiGithub,
|
||||
mdiChartPie,
|
||||
} from '@mdi/js';
|
||||
// import { containerMaxW } from '@/config.js'; // "xl:max-w-6xl xl:mx-auto"
|
||||
import * as chartConfig from '@/Components/Charts/chart.config.js';
|
||||
|
|
@ -29,10 +29,10 @@ import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.
|
|||
import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
|
||||
const chartData = ref();
|
||||
const fillChartData = () => {
|
||||
chartData.value = chartConfig.sampleChartData();
|
||||
chartData.value = chartConfig.sampleChartData();
|
||||
};
|
||||
onMounted(() => {
|
||||
fillChartData();
|
||||
fillChartData();
|
||||
});
|
||||
const mainService = MainService();
|
||||
/* Fetch sample data */
|
||||
|
|
@ -57,88 +57,114 @@ const datasets = computed(() => mainService.datasets);
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<LayoutAuthenticated>
|
||||
<Head title="Dashboard" />
|
||||
|
||||
<Head title="Dashboard" />
|
||||
<!-- <section class="p-6" v-bind:class="containerMaxW"> -->
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
|
||||
<BaseButton
|
||||
href="https://gitea.geologie.ac.at/geolba/tethys"
|
||||
target="_blank"
|
||||
:icon="mdiGithub"
|
||||
label="Star on Gitea"
|
||||
color="contrast"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<!-- <section class="p-6" v-bind:class="containerMaxW"> -->
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
|
||||
<BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
|
||||
label="Star on Gitea" color="contrast" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
|
||||
<CardBoxWidget trend="12%" trend-type="up" color="text-emerald-500" :icon="mdiAccountMultiple"
|
||||
:number="authors.length" label="Authors" />
|
||||
<CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiDatabaseOutline"
|
||||
:number="datasets.length" label="Publications" />
|
||||
<!-- <CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiCartOutline" :number="datasets.length"
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
|
||||
<CardBoxWidget
|
||||
trend="12%"
|
||||
trend-type="up"
|
||||
color="text-emerald-500"
|
||||
:icon="mdiAccountMultiple"
|
||||
:number="authors.length"
|
||||
label="Authors"
|
||||
/>
|
||||
<CardBoxWidget
|
||||
trend="193"
|
||||
trend-type="info"
|
||||
color="text-blue-500"
|
||||
:icon="mdiDatabaseOutline"
|
||||
:number="datasets.length"
|
||||
label="Publications"
|
||||
/>
|
||||
<!-- <CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiCartOutline" :number="datasets.length"
|
||||
prefix="$" label="Publications" /> -->
|
||||
<CardBoxWidget trend="Overflow" trend-type="alert" color="text-red-500" :icon="mdiChartTimelineVariant"
|
||||
:number="256" suffix="%" label="Performance" />
|
||||
</div>
|
||||
<CardBoxWidget
|
||||
trend="Overflow"
|
||||
trend-type="alert"
|
||||
color="text-red-500"
|
||||
:icon="mdiChartTimelineVariant"
|
||||
:number="256"
|
||||
suffix="%"
|
||||
label="Performance"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<div class="flex flex-col justify-between">
|
||||
<CardBoxClient v-for="client in authorBarItems" :key="client.id" :name="client.name"
|
||||
:email="client.email" :date="client.created_at" :text="client.datasetCount" />
|
||||
</div>
|
||||
<div class="flex flex-col justify-between">
|
||||
<CardBoxTransaction v-for="(transaction, index) in transactionBarItems" :key="index"
|
||||
:amount="transaction.amount" :date="transaction.date" :business="transaction.business"
|
||||
:type="transaction.type" :name="transaction.name" :account="transaction.account" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<div class="flex flex-col justify-between">
|
||||
<CardBoxClient
|
||||
v-for="client in authorBarItems"
|
||||
:key="client.id"
|
||||
:name="client.name"
|
||||
:email="client.email"
|
||||
:date="client.created_at"
|
||||
:text="client.datasetCount"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between">
|
||||
<CardBoxTransaction
|
||||
v-for="(transaction, index) in transactionBarItems"
|
||||
:key="index"
|
||||
:amount="transaction.amount"
|
||||
:date="transaction.date"
|
||||
:business="transaction.business"
|
||||
:type="transaction.type"
|
||||
:name="transaction.name"
|
||||
:account="transaction.account"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionBannerStarOnGitHub />
|
||||
<SectionBannerStarOnGitHub />
|
||||
|
||||
<SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview (to do publications per year)" />
|
||||
<CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6"
|
||||
@header-icon-click="fillChartData">
|
||||
<div v-if="chartData">
|
||||
<line-chart :data="chartData" class="h-96" />
|
||||
</div>
|
||||
</CardBox>
|
||||
<SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview (to do publications per year)" />
|
||||
<CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6" @header-icon-click="fillChartData">
|
||||
<div v-if="chartData">
|
||||
<line-chart :data="chartData" class="h-96" />
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters (to do)" />
|
||||
<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters (to do)" />
|
||||
|
||||
<NotificationBar color="info" :icon="mdiMonitorCellphone">
|
||||
<b>Responsive table.</b> Collapses on mobile
|
||||
</NotificationBar>
|
||||
<NotificationBar color="info" :icon="mdiMonitorCellphone"> <b>Responsive table.</b> Collapses on mobile </NotificationBar>
|
||||
|
||||
<CardBox :icon="mdiMonitorCellphone" title="Responsive table" has-table>
|
||||
<TableSampleClients />
|
||||
</CardBox>
|
||||
<CardBox :icon="mdiMonitorCellphone" title="Responsive table" has-table>
|
||||
<TableSampleClients />
|
||||
</CardBox>
|
||||
|
||||
<CardBox>
|
||||
<p class="mb-3 text-gray-500 dark:text-gray-400">
|
||||
Discover the power of Tethys, the cutting-edge web backend solution that revolutionizes the way you
|
||||
handle
|
||||
research data. At the heart of Tethys lies our meticulously developed research data repository, which
|
||||
leverages state-of-the-art CI/CD techniques to deliver a seamless and efficient experience.
|
||||
</p>
|
||||
<p class="mb-3 text-gray-500 dark:text-gray-400">
|
||||
CI/CD, or Continuous Integration and Continuous Deployment, is a modern software development approach
|
||||
that
|
||||
ensures your code undergoes automated testing, continuous integration, and frequent deployment. By
|
||||
embracing
|
||||
CI/CD techniques, we ensure that every code change in our research data repository is thoroughly
|
||||
validated,
|
||||
enhancing reliability and accelerating development cycles.
|
||||
</p>
|
||||
<p class="mb-3 text-gray-500 dark:text-gray-400">
|
||||
With Tethys, you can say goodbye to the complexities of manual deployments and embrace a streamlined
|
||||
process
|
||||
that eliminates errors and minimizes downtime. Our CI/CD pipeline automatically verifies each code
|
||||
commit,
|
||||
runs comprehensive tests, and deploys the repository seamlessly, ensuring that your research data is
|
||||
always
|
||||
up-to-date and accessible.
|
||||
</p>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
<!-- </section> -->
|
||||
|
||||
</LayoutAuthenticated>
|
||||
<CardBox>
|
||||
<p class="mb-3 text-gray-500 dark:text-gray-400">
|
||||
Discover the power of Tethys, the cutting-edge web backend solution that revolutionizes the way you handle research
|
||||
data. At the heart of Tethys lies our meticulously developed research data repository, which leverages state-of-the-art
|
||||
CI/CD techniques to deliver a seamless and efficient experience.
|
||||
</p>
|
||||
<p class="mb-3 text-gray-500 dark:text-gray-400">
|
||||
CI/CD, or Continuous Integration and Continuous Deployment, is a modern software development approach that ensures your
|
||||
code undergoes automated testing, continuous integration, and frequent deployment. By embracing CI/CD techniques, we
|
||||
ensure that every code change in our research data repository is thoroughly validated, enhancing reliability and
|
||||
accelerating development cycles.
|
||||
</p>
|
||||
<p class="mb-3 text-gray-500 dark:text-gray-400">
|
||||
With Tethys, you can say goodbye to the complexities of manual deployments and embrace a streamlined process that
|
||||
eliminates errors and minimizes downtime. Our CI/CD pipeline automatically verifies each code commit, runs comprehensive
|
||||
tests, and deploys the repository seamlessly, ensuring that your research data is always up-to-date and accessible.
|
||||
</p>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
<!-- </section> -->
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,312 +1,103 @@
|
|||
<script setup lang="ts">
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import { onMounted, onUnmounted, ref, Ref } from 'vue';
|
||||
// import { MainService } from '@/Stores/main';;
|
||||
import {
|
||||
mdiChartTimelineVariant
|
||||
} from '@mdi/js';
|
||||
import { ref, Ref } from 'vue';
|
||||
import { mdiChartTimelineVariant } from '@mdi/js';
|
||||
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
// import CardBox from '@/Components/CardBox.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
// import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
|
||||
import { Map } from 'leaflet/src/map/index';
|
||||
import { Rectangle } from 'leaflet';
|
||||
import { canvas } from 'leaflet/src/layer/vector/Canvas';
|
||||
import { svg } from 'leaflet/src/layer/vector/SVG';
|
||||
import { MapOptions } from '@/Components/Map/MapOptions';
|
||||
import axios from 'axios';
|
||||
import { LatLngBoundsExpression } from 'leaflet/src/geo/LatLngBounds';
|
||||
import { tileLayerWMS } from 'leaflet/src/layer/tile/TileLayer.WMS';
|
||||
import { Attribution } from 'leaflet/src/control/Control.Attribution';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
import DrawControlComponent from '@/Components/Map/draw.component.vue';
|
||||
import { MapService } from '@/Stores/map.service';
|
||||
import { LayerGroup } from 'leaflet/src/layer/LayerGroup'
|
||||
import SearchMap from '@/Components/Map/SearchMap.vue';
|
||||
import { OpensearchDocument } from '@/Dataset';
|
||||
|
||||
Map.include({
|
||||
// @namespace Map; @method getRenderer(layer: Path): Renderer
|
||||
// Returns the instance of `Renderer` that should be used to render the given
|
||||
// `Path`. It will ensure that the `renderer` options of the map and paths
|
||||
// are respected, and that the renderers do exist on the map.
|
||||
getRenderer: function (layer) {
|
||||
// @namespace Path; @option renderer: Renderer
|
||||
// Use this specific instance of `Renderer` for this path. Takes
|
||||
// precedence over the map's [default renderer](#map-renderer).
|
||||
var renderer = layer.options.renderer || this._getPaneRenderer(layer.options.pane) || this.options.renderer || this._renderer;
|
||||
// const fitBounds: LatLngBoundsExpression = [
|
||||
// [46.4318173285, 9.47996951665],
|
||||
// [49.0390742051, 16.9796667823],
|
||||
// ];
|
||||
|
||||
if (!renderer) {
|
||||
renderer = this._renderer = this._createRenderer();
|
||||
}
|
||||
// const mapId = 'map';
|
||||
|
||||
if (!this.hasLayer(renderer)) {
|
||||
this.addLayer(renderer);
|
||||
}
|
||||
return renderer;
|
||||
},
|
||||
// const coverage = {
|
||||
// x_min: undefined,
|
||||
// y_min: undefined,
|
||||
// x_max: undefined,
|
||||
// y_max: undefined,
|
||||
// elevation_min: undefined,
|
||||
// elevation_max: undefined,
|
||||
// elevation_absolut: undefined,
|
||||
// depth_min: undefined,
|
||||
// depth_max: undefined,
|
||||
// depth_absolut: undefined,
|
||||
// time_min: undefined,
|
||||
// time_max: undefined,
|
||||
// time_absolut: undefined,
|
||||
// };
|
||||
|
||||
_getPaneRenderer: function (name) {
|
||||
if (name === 'overlayPane' || name === undefined) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var renderer = this._paneRenderers[name];
|
||||
if (renderer === undefined) {
|
||||
renderer = this._createRenderer({ pane: name });
|
||||
this._paneRenderers[name] = renderer;
|
||||
}
|
||||
return renderer;
|
||||
},
|
||||
|
||||
_createRenderer: function (options) {
|
||||
// @namespace Map; @option preferCanvas: Boolean = false
|
||||
// Whether `Path`s should be rendered on a `Canvas` renderer.
|
||||
// By default, all `Path`s are rendered in a `SVG` renderer.
|
||||
return (this.options.preferCanvas && canvas(options)) || svg(options);
|
||||
},
|
||||
});
|
||||
const DEFAULT_BASE_LAYER_NAME = 'BaseLayer';
|
||||
const DEFAULT_BASE_LAYER_ATTRIBUTION = '© <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors';
|
||||
const OPEN_SEARCH_HOST = 'http://192.168.21.18';
|
||||
let map: Map;
|
||||
|
||||
|
||||
|
||||
const fitBounds: LatLngBoundsExpression = [
|
||||
[46.4318173285, 9.47996951665],
|
||||
[49.0390742051, 16.9796667823],
|
||||
];
|
||||
|
||||
const mapId = 'map';
|
||||
const draw: Ref<DrawControlComponent | null> = ref(null);
|
||||
const southWest = ref(null);
|
||||
const northEast = ref(null);
|
||||
const mapService = MapService();
|
||||
const coverage = {
|
||||
x_min: undefined,
|
||||
y_min: undefined,
|
||||
x_max: undefined,
|
||||
y_max: undefined,
|
||||
elevation_min: undefined,
|
||||
elevation_max: undefined,
|
||||
elevation_absolut: undefined,
|
||||
depth_min: undefined,
|
||||
depth_max: undefined,
|
||||
depth_absolut: undefined,
|
||||
time_min: undefined,
|
||||
time_max: undefined,
|
||||
time_absolut: undefined,
|
||||
};
|
||||
const filterLayerGroup = new LayerGroup();
|
||||
// Replace with your actual data
|
||||
const datasets: Ref<OpensearchDocument[]> = ref([]);
|
||||
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
map.off('zoomend zoomlevelschange');
|
||||
});
|
||||
const openAccessLicences: Array<string> = ['CC-BY-4.0', 'CC-BY-SA-4.0'];
|
||||
|
||||
const mapOptions: MapOptions = {
|
||||
center: [48.208174, 16.373819],
|
||||
zoom: 3,
|
||||
zoomControl: false,
|
||||
attributionControl: false,
|
||||
};
|
||||
|
||||
const initMap = async () => {
|
||||
// init leaflet map
|
||||
map = new Map('map', mapOptions);
|
||||
mapService.setMap(mapId, map);
|
||||
map.scrollWheelZoom.disable();
|
||||
map.fitBounds(fitBounds);
|
||||
draw.value?.toggleDraw();
|
||||
|
||||
|
||||
map.addLayer(filterLayerGroup);
|
||||
|
||||
const attributionControl = new Attribution().addTo(map);
|
||||
attributionControl.setPrefix(false);
|
||||
|
||||
let osmGgray = tileLayerWMS('https://ows.terrestris.de/osm-gray/service', {
|
||||
format: 'image/png',
|
||||
attribution: DEFAULT_BASE_LAYER_ATTRIBUTION,
|
||||
layers: 'OSM-WMS',
|
||||
});
|
||||
let layerOptions = {
|
||||
label: DEFAULT_BASE_LAYER_NAME,
|
||||
visible: true,
|
||||
layer: osmGgray,
|
||||
};
|
||||
layerOptions.layer.addTo(map);
|
||||
|
||||
map.on('Draw.Event.CREATED', handleDrawEventCreated);
|
||||
|
||||
|
||||
// // const query = {
|
||||
// // query: {
|
||||
// // term: {
|
||||
// // id: "103"
|
||||
// // }
|
||||
// // }
|
||||
// // };
|
||||
// // to do : call extra method:
|
||||
// const query = {
|
||||
// // q: 'id:103'
|
||||
// // q: 'author:"Iglseder, Christoph" OR title:"Datensatz"',
|
||||
// // q: 'author:"Iglseder"',
|
||||
// q: '*',
|
||||
// _source: 'author,bbox_xmin,bbox_xmax,bbox_ymin,bbox_ymax,abstract,title',
|
||||
// size: 1000
|
||||
// // qf:"title^3 author^2 subject^1",
|
||||
// }
|
||||
// try {
|
||||
// let response = await axios({
|
||||
// method: 'GET',
|
||||
// url: OPEN_SEARCH_HOST + '/tethys-records/_search',
|
||||
// headers: { 'Content-Type': 'application/json' },
|
||||
// params: query
|
||||
// });
|
||||
// // Loop through the hits in the response
|
||||
// response.data.hits.hits.forEach(hit => {
|
||||
// // Get the geo_location attribute
|
||||
// // var geo_location = hit._source.geo_location;
|
||||
// let xMin = hit._source.bbox_xmin;
|
||||
// let xMax = hit._source.bbox_xmax;
|
||||
// let yMin = hit._source.bbox_ymin;
|
||||
// let yMax = hit._source.bbox_ymax;
|
||||
// var bbox: LatLngBoundsExpression = [[yMin, xMin], [yMax, xMax]];
|
||||
// // Parse the WKT string to get the bounding box coordinates
|
||||
// // var bbox = wktToBbox(geo_location);
|
||||
|
||||
// // // Add the bounding box to the map as a rectangle
|
||||
// new Rectangle(bbox, { color: "#ff7800", weight: 1 }).addTo(map);
|
||||
// // console.log(hit._source);
|
||||
// });
|
||||
// } catch (error) {
|
||||
// console.error(error);
|
||||
// }
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleDrawEventCreated = async (event) => {
|
||||
filterLayerGroup.clearLayers();
|
||||
datasets.value = [];
|
||||
|
||||
let layer = event.layer;
|
||||
let bounds = layer.getBounds();
|
||||
// coverage.x_min = bounds.getSouthWest().lng;
|
||||
// coverage.y_min = bounds.getSouthWest().lat;
|
||||
// coverage.x_max = bounds.getNorthEast().lng;
|
||||
// coverage.y_max = bounds.getNorthEast().lat;
|
||||
|
||||
|
||||
try {
|
||||
let response = await axios({
|
||||
method: 'POST',
|
||||
url: OPEN_SEARCH_HOST + '/tethys-records/_search',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
data: {
|
||||
"size": 1000,
|
||||
"query": {
|
||||
"bool": {
|
||||
"must": {
|
||||
"match_all": {}
|
||||
},
|
||||
"filter": {
|
||||
"geo_bounding_box": {
|
||||
"geo_location": { // replace 'location' with your geo-point field name
|
||||
"top_left": {
|
||||
"lat": bounds.getNorthEast().lat,
|
||||
"lon": bounds.getSouthWest().lng
|
||||
},
|
||||
"bottom_right": {
|
||||
"lat": bounds.getSouthWest().lat,
|
||||
"lon": bounds.getNorthEast().lng
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// _source: 'author,bbox_xmin,bbox_xmax,bbox_ymin,bbox_ymax,abstract,title',
|
||||
// "size": 1000
|
||||
}
|
||||
}
|
||||
});
|
||||
// Loop through the hits in the response
|
||||
response.data.hits.hits.forEach(hit => {
|
||||
// Get the geo_location attribute
|
||||
// var geo_location = hit._source.geo_location;
|
||||
let xMin = hit._source.bbox_xmin;
|
||||
let xMax = hit._source.bbox_xmax;
|
||||
let yMin = hit._source.bbox_ymin;
|
||||
let yMax = hit._source.bbox_ymax;
|
||||
var bbox: LatLngBoundsExpression = [[yMin, xMin], [yMax, xMax]];
|
||||
// Parse the WKT string to get the bounding box coordinates
|
||||
// var bbox = wktToBbox(geo_location);
|
||||
|
||||
// // Add the bounding box to the map as a rectangle
|
||||
let rect = new Rectangle(bbox, { color: "#ff7800", weight: 1 });
|
||||
filterLayerGroup.addLayer(rect);
|
||||
|
||||
datasets.value.push(hit._source);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
center: [48.208174, 16.373819],
|
||||
zoom: 3,
|
||||
zoomControl: false,
|
||||
attributionControl: false,
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutGuest>
|
||||
<LayoutGuest>
|
||||
<Head title="Map" />
|
||||
|
||||
<Head title="Map" />
|
||||
|
||||
<!-- <section class="p-6" v-bind:class="containerMaxW"> -->
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Tethys Map" main>
|
||||
<!-- <BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
|
||||
<!-- <section class="p-6" v-bind:class="containerMaxW"> -->
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Tethys Map" main>
|
||||
<!-- <BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
|
||||
label="Star on Gitea" color="contrast" rounded-full small /> -->
|
||||
<BaseButton :route-name="stardust.route('app.login.show')" label="Login" color="white" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<BaseButton :route-name="stardust.route('app.login.show')" label="Login" color="white" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<!-- <SectionBannerStarOnGitea /> -->
|
||||
|
||||
<!-- <SectionBannerStarOnGitHub /> -->
|
||||
|
||||
<!-- <CardBox> -->
|
||||
<div id="map" class="map-container mapDesktop mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
|
||||
<!-- <CardBox> -->
|
||||
<!-- <div id="map" class="map-container mapDesktop mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
|
||||
<DrawControlComponent ref="draw" :preserve="false" :mapId="mapId" :southWest="southWest"
|
||||
:northEast="northEast">
|
||||
</DrawControlComponent>
|
||||
</div>
|
||||
</div> -->
|
||||
<SearchMap :datasets="datasets" :map-options="mapOptions"></SearchMap>
|
||||
|
||||
<div d="search-result-list-wrapper" class="flex flex-wrap col-span-24">
|
||||
<div v-for="dataset in datasets" :key="dataset.id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-4">
|
||||
<div class="bg-white rounded shadow p-6">
|
||||
<h2 class="text-xl font-bold mb-2">{{ dataset.title_output }}</h2>
|
||||
<p class="text-gray-700 mb-2">{{ dataset.abstract_output }}</p>
|
||||
<div class="text-sm text-gray-600">
|
||||
<div v-for="author in dataset.author" :key="author" class="mb-1">{{ author }}</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span
|
||||
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{{
|
||||
dataset.year }}</span>
|
||||
<span
|
||||
class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{{
|
||||
dataset.language }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</SectionMain>
|
||||
<!-- </section> -->
|
||||
</LayoutGuest></template>
|
||||
<div d="search-result-list-wrapper" class="flex flex-wrap col-span-24 h-full">
|
||||
<div v-for="dataset in datasets" :key="dataset.id" class="w-full sm:w-1/2 md:w-1/3 lg:w-1/4 p-4">
|
||||
<div class="bg-white rounded shadow p-6">
|
||||
<h3 class="text-lg leading-tight text-gray-500 dark:text-slate-400">
|
||||
{{ dataset.title_output }}
|
||||
</h3>
|
||||
<!-- <h2 class="text-xl font-bold mb-2">{{ dataset.title_output }}</h2> -->
|
||||
<p class="text-gray-700 mb-2">{{ dataset.abstract_output }}</p>
|
||||
<div class="text-sm text-gray-600">
|
||||
<div v-for="author in dataset.author" :key="author" class="mb-1">{{ author }}</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
|
||||
{{ dataset.year }}
|
||||
</span>
|
||||
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">
|
||||
{{ dataset.language }}
|
||||
</span>
|
||||
</div>
|
||||
<p>
|
||||
<span class="label"><i class="fas fa-file"></i> {{ dataset.doctype }}</span>
|
||||
<!-- <span>Licence: {{ document.licence }}</span> -->
|
||||
<span v-if="openAccessLicences.includes(dataset.licence)" class="label titlecase"
|
||||
><i class="fas fa-lock-open"></i> Open Access</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SectionMain>
|
||||
<!-- </section> -->
|
||||
</LayoutGuest>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,30 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <Link href="/app">Home</Link>
|
||||
<div>
|
||||
<!-- <Link href="/app">Home</Link>
|
||||
<br /> -->
|
||||
<h1>Register</h1>
|
||||
<form v-on:submit.prevent="submit()" class="max-w-sm">
|
||||
<!-- <form @submit.prevent="form.post('/app/register')" class="max-w-sm"> -->
|
||||
<!-- <n-input type="email" v-model:value="form.email" placeholder="email" class="mb-3" /> -->
|
||||
<!-- <n-input type="password" v-model:value="form.password" placeholder="Password" class="mb-3" /> -->
|
||||
<!-- <n-input v-bind:label="'Emai22l'" v-model:value="form.email" />
|
||||
<h1>Register</h1>
|
||||
<form v-on:submit.prevent="submit()" class="max-w-sm">
|
||||
<!-- <form @submit.prevent="form.post('/app/register')" class="max-w-sm"> -->
|
||||
<!-- <n-input type="email" v-model:value="form.email" placeholder="email" class="mb-3" /> -->
|
||||
<!-- <n-input type="password" v-model:value="form.password" placeholder="Password" class="mb-3" /> -->
|
||||
<!-- <n-input v-bind:label="'Emai22l'" v-model:value="form.email" />
|
||||
<n-input v-bind:label="'Password'" v-bind:type="'password'" v-model:value="form.password" /> -->
|
||||
<!-- <form-input v-bind:label="'Password'" v-bind:type="'password'" v-model="form.password" /> -->
|
||||
<!-- <form-input v-bind:label="'Password'" v-bind:type="'password'" v-model="form.password" /> -->
|
||||
|
||||
<form-input v-bind:label="'Emai22l'" v-bind:type="'email'" v-model="form.email" :errors="errors.email" />
|
||||
<form-input v-bind:label="'Password'" v-bind:type="'password'" v-model="form.password" :errors="errors.password"/>
|
||||
<form-input v-bind:label="'Emai22l'" v-bind:type="'email'" v-model="form.email" :errors="errors.email" />
|
||||
<form-input v-bind:label="'Password'" v-bind:type="'password'" v-model="form.password" :errors="errors.password" />
|
||||
|
||||
<n-button attr-type="submit"> Register </n-button>
|
||||
</form>
|
||||
</div>
|
||||
<n-button attr-type="submit"> Register </n-button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import RegisterViewComponent from "@/Pages/register-view/register-view-component";
|
||||
import RegisterViewComponent from '@/Pages/register-view/register-view-component';
|
||||
// import RegisterViewComponent from "./register-view-component";
|
||||
// const test = RegisterViewComponent;
|
||||
export default RegisterViewComponent;
|
||||
|
||||
|
||||
// import { Component, Vue, Prop } from "vue-facing-decorator";
|
||||
// import AuthLayout from '@/Layouts/Auth.vue';
|
||||
// // import { reactive } from 'vue';
|
||||
|
|
@ -34,8 +33,6 @@ export default RegisterViewComponent;
|
|||
// import FormInput from '@/Components/FormInput.vue';// @/Components/FormInput.vue'
|
||||
// // import { defineComponent } from 'vue';
|
||||
|
||||
|
||||
|
||||
// export default {
|
||||
// layout: AuthLayout,
|
||||
|
||||
|
|
@ -95,15 +92,15 @@ export default RegisterViewComponent;
|
|||
// },
|
||||
// name: "RegisterViewComponent",
|
||||
// components: {
|
||||
// NButton,
|
||||
// NButton,
|
||||
// FormInput
|
||||
// },
|
||||
// })
|
||||
// export default class RegisterViewComponent extends Vue {
|
||||
|
||||
|
||||
// @Prop()
|
||||
// type!: string;
|
||||
|
||||
// type!: string;
|
||||
|
||||
// public form = {
|
||||
// email: null,
|
||||
// password: null,
|
||||
|
|
@ -115,14 +112,14 @@ export default RegisterViewComponent;
|
|||
// await Inertia.post('/app/register', this.form);
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
|
||||
// </script>
|
||||
//
|
||||
</script>
|
||||
|
||||
<!-- <style scoped>
|
||||
.greeting {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style> -->
|
||||
</style> -->
|
||||
|
|
|
|||
Loading…
Add table
editor.link_modal.header
Reference in a new issue