SW/geovisio-website
2
0
Fork 0
forked from Ivasoft/geovisio-website
Code Pull Requests Packages Releases Activity

Merge branch 'fix/auth-sequence-list' into 'develop'

Browse Source 
Fix/auth sequence list

See merge request geovisio/website!121
This commit is contained in:
Jean Andreani
2024-01-31 09:00:25 +00:00
parent c37f814dc3 6322a75f42
commit c4066930ba
18 changed files with 12043 additions and 8630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.yarn/install-state.gz Normal file
View File

Binary file not shown.

1
.yarnrc.yml Normal file
View File

@@ -0,0 +1 @@
nodeLinker: node-modules

5
package.json
View File

@@ -25,7 +25,7 @@
"axios": "^1.2.3",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.3",
"geovisio": "2.3.1",
"geovisio": "2.3.1-develop-2ae6f6df",
"moment": "^2.29.4",
"pako": "^2.1.0",
"pinia": "^2.1.4",
@@ -81,5 +81,6 @@
},
"jest": {
"preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel"
}
},
"packageManager": "yarn@4.0.2"
}

41
src/components-viewer/reportLink.ts
View File

@@ -1,8 +1,45 @@
export function createLink(href: string, text: string): string {
return `<a href='mailto:signalement.ign@panoramax.fr${href}' target='_blank' title='${text}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block'><i class="bi bi-exclamation-triangle"></i></a>`
return `<a href='mailto:signalement.ign@panoramax.fr${href}' target='_blank' title='${text}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block; margin-top: 0.5em;'><i class="bi bi-exclamation-triangle"></i></a>`
}
export function createSequenceLink(href: string, title: string): string {
return `<a href='${href}' title='${title}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block; position: relative'>
return `<a href='${href}' title='${title}' class='gvs-btn gvs-widget-bg gvs-btn-large' style='font-size: 1.6em;display: block; position: relative; margin-top: 0.5em;'>
<i class="bi bi-images"></i>
</a>`
}
export function createFullScreenButton(): string {
return `<button type='button' onClick="
const header = document.getElementById('navHeader')
const footer = document.getElementById('navFooter')
const icon = document.getElementById('iconScreen')
const home = document.getElementById('homePage')
if (header) {
const isHiddenHeader = header.classList.contains('hidden')
if (isHiddenHeader) header.classList.remove('hidden')
else header.classList.add('hidden')
}
if (footer) {
const isHiddenHeader = footer.classList.contains('hidden')
if (isHiddenHeader) footer.classList.remove('hidden')
else footer.classList.add('hidden')
}
if (icon) {
const isIconNotFull = icon.classList.contains('bi-fullscreen')
if(isIconNotFull) {
icon.classList.remove('bi-fullscreen')
icon.classList.add('bi-fullscreen-exit')
} else {
icon.classList.remove('bi-fullscreen-exit')
icon.classList.add('bi-fullscreen')
}
}
if (home) {
const isHomeFull = home.classList.contains('full-viewer')
if(isHomeFull) home.classList.remove('full-viewer')
else home.classList.add('full-viewer')
}
"
class='gvs-btn gvs-widget-bg gvs-btn-large'
>
<i id='iconScreen' class="bi bi-fullscreen"></i>
</button>`
}

4
src/components/Button.vue
View File

@@ -120,6 +120,7 @@ defineProps({
}
.button--white {
color: var(--blue);
background-color: var(--white);
border: toRem(0.1) solid var(--blue);
.icon {
font-size: toRem(1.4);
@@ -143,7 +144,7 @@ defineProps({
.no-text-blue-dark .icon {
color: var(--blue-dark);
margin-right: 0;
font-size: toRem(1.6);
font-size: toRem(1.4);
}
.no-text-green .icon {
color: var(--blue);
@@ -216,6 +217,7 @@ defineProps({
visibility: hidden;
width: toRem(20);
right: 0;
z-index: 9;
@include text(xss-regular);
}

91
src/components/EditText.vue
View File

@@ -1,16 +1,28 @@
<template>
<div class="entry-edit">
<form
v-if="isEditTitle && !isDisabled"
@submit.prevent="isEditTitle = false"
class="edit-form"
>
<div class="wrapper-input">
<Input
id="upload-title"
:text="text || ''"
:placeholder="$t('pages.upload.edit_placeholder_input')"
@input="changeTextValue"
<div :class="['entry-edit', { 'edit-mode': isEditTitle }]">
<span v-if="isEditTitle && formTitle" class="form-title">{{
formTitle
}}</span>
<div class="entry-form">
<form
v-if="isEditTitle && !isDisabled"
@submit.prevent="isEditTitle = false"
class="edit-form"
>
<div class="wrapper-input">
<Input
id="upload-title"
:text="text || ''"
:placeholder="$t('pages.upload.edit_placeholder_input')"
@input="changeTextValue"
/>
</div>
<Button
id="valid-button"
:text="$t('pages.upload.ok_button')"
type="submit"
look="button--white"
@trigger="validNewName"
/>
<div class="close-button">
<Button
@@ -20,24 +32,17 @@
@trigger="closeEdition"
/>
</div>
</form>
<span v-else class="title">{{ text }}</span>
<div v-if="!isEditTitle" class="edit-button">
<Button
look="no-text-blue-dark"
icon="bi bi-pen"
:tooltip="$t('pages.upload.edit_title_tooltip')"
:disabled="isDisabled"
@trigger="goToEditMode"
/>
</div>
<Button
id="valid-button"
:text="$t('pages.upload.ok_button')"
type="submit"
look="button button--blue"
@trigger="validNewName"
/>
</form>
<span v-else class="title">{{ text }}</span>
<div v-if="!isEditTitle" class="edit-button">
<Button
look="no-text-blue-dark"
icon="bi bi-pen"
:tooltip="$t('pages.upload.edit_title_tooltip')"
:disabled="isDisabled"
@trigger="goToEditMode"
/>
</div>
</div>
</template>
@@ -53,7 +58,8 @@ const emit = defineEmits<{
const props = defineProps({
defaultText: { type: String, default: null },
isLoading: { type: Boolean, default: false },
isLoaded: { type: Boolean, default: false }
isLoaded: { type: Boolean, default: false },
formTitle: { type: String, default: null }
})
let titleToEdit = ref<string | null>(null)
let isEditTitle = ref<boolean>(false)
@@ -86,13 +92,27 @@ const isDisabled = computed<boolean>(() => props.isLoading && !props.isLoaded)
<style scoped lang="scss">
.title {
color: var(--blue-dark);
text-align: left;
}
.form-title {
text-align: left;
width: 100%;
@include text(xs-r-regular);
margin-bottom: toRem(0.3);
}
.entry-edit {
display: flex;
flex-direction: column;
position: relative;
}
.entry-form {
display: flex;
align-items: center;
margin-bottom: toRem(2);
width: 100%;
height: toRem(4.7);
}
.edit-mode {
background-color: var(--blue-pale);
padding: toRem(1);
border-radius: toRem(0.4);
}
.wrapper-edit {
display: flex;
@@ -103,13 +123,14 @@ const isDisabled = computed<boolean>(() => props.isLoading && !props.isLoaded)
.edit-button {
background-color: var(--grey);
border-radius: 50%;
height: toRem(3.5);
width: toRem(3.5);
height: toRem(2.5);
width: toRem(2.5);
padding: toRem(1);
display: flex;
justify-content: center;
align-items: center;
margin-left: toRem(1.5);
z-index: 2;
}
.wrapper-input {
position: relative;

3
src/components/Input.vue
View File

@@ -24,10 +24,11 @@ function emitValue(event: Event): void {
<style scoped lang="scss">
.input {
padding: toRem(1);
padding: toRem(0.5) toRem(1);
border-radius: toRem(0.5);
border: toRem(0.1) solid var(--blue-dark);
color: var(--blue-dark);
width: 100%;
@include text(s-r-regular);
}
</style>

34
src/components/Viewer.vue
View File

@@ -1,7 +1,5 @@
<template>
<div id="viewer" class="entry-viewer">
<slot name="fullscreen"></slot>
</div>
<div id="viewer" class="entry-viewer"></div>
</template>
<script setup lang="ts">
@@ -11,7 +9,11 @@ import { useSequenceStore } from '@/store/sequence'
import { Viewer, StandaloneMap } from 'geovisio'
import { getIgnTiles } from '@/utils/mapAndViewer'
import { createUrlLink } from '@/utils'
import { createLink, createSequenceLink } from '@/components-viewer/reportLink'
import {
createLink,
createSequenceLink,
createFullScreenButton
} from '@/components-viewer/reportLink'
import { useI18n } from 'vue-i18n'
import { hasASessionCookieDecoded } from '@/utils/auth'
import type { ViewerInterface, MapInterface } from '@/views/interfaces/common'
@@ -49,6 +51,7 @@ async function getSequenceId(imgId: string): Promise<{
}
}
function createViewerButton(link: HTMLDivElement): void {
link.innerHTML = `<div>${createFullScreenButton()}</div>`
viewer.value.addEventListener(
'picture-loaded',
async (e: { detail: { picId: string } }): Promise<void> => {
@@ -56,17 +59,26 @@ function createViewerButton(link: HTMLDivElement): void {
let href: string
if (isLogged.value && sequenceInformation.username === userName.value) {
href = `${window.location.origin}/sequence/${sequenceInformation.sequenceId}?currentPic=${e.detail.picId}`
link.innerHTML = createSequenceLink(
href,
t('pages.home.sequence_title')
)
link.innerHTML = `<div>
${createFullScreenButton()}
${createSequenceLink(
href,
t('pages.home.sequence_title')
)}
</div>`
sequenceStore.addSequence(e.detail.picId)
} else {
href = t('pages.home.report_mail', {
picId: e.detail.picId,
link: createUrlLink(e.detail.picId)
})
link.innerHTML = createLink(href, t('pages.home.report_button_text'))
link.innerHTML = `<div>
${createFullScreenButton()}
${createLink(
href,
t('pages.home.report_button_text')
)}
</div>`
}
}
)
@@ -142,8 +154,7 @@ async function setupViewerMap(tiles: string): Promise<void> {
}
async function setupMap(tiles: string): Promise<void> {
let paramsMap: MapInterface
paramsMap = { minZoom: 7 }
//virer
paramsMap = { users: [props.userId] }
if (tiles && tiles.length) {
const style = tiles.includes('wxs.ign.fr') ? await getIgnTiles() : tiles
paramsMap = {
@@ -162,7 +173,6 @@ async function setupMap(tiles: string): Promise<void> {
}
)
viewer.value.addEventListener('ready', () => {
viewer.value.setFilters({ user: props.userId }, true)
viewer.value.fitBounds(bbox, {
padding: { top: 70, bottom: 70, left: 70, right: 70 },
maxZoom: 14,

1
src/locales/en.json
View File

@@ -50,6 +50,7 @@
"sequence_published": "Published",
"sequence_waiting": "Still processing",
"sequence_hidden": "Hidden",
"sequence_form_title": "Edit the title",
"hide_sequence_tooltip": "Hide this sequences",
"back_button": "Back to my sequence list",
"delete_sequence_tooltip": "Permanently delete this sequence",

1
src/locales/fr.json
View File

@@ -50,6 +50,7 @@
"sequence_published": "Publiée",
"sequence_waiting": "En cours de publication",
"sequence_hidden": "Masquée",
"sequence_form_title": "Modifier le titre",
"hide_sequence_tooltip": "Masque la séquence sur la carte",
"back_button": "Retourner à la liste de mes séquences",
"delete_sequence_tooltip": "Supprime définitivement la séquence",

1
src/locales/hu.json
View File

@@ -50,6 +50,7 @@
"sequence_published": "Közzétéve",
"sequence_waiting": "Feldolgozás alatt",
"sequence_hidden": "Rejtett",
"sequence_form_title": "Szerkessze a címet",
"hide_sequence_tooltip": "A sorozat elrejtése",
"back_button": "Vissza a sorozatlistámhoz",
"delete_sequence_tooltip": "A sorozat végleges törlése",

71
src/views/HomeView.vue
View File

@@ -1,68 +1,18 @@
<template>
<main :class="['entry-page', { 'full-viewer': isFull }]">
<section ref="sectionRef" class="entry-section">
<Viewer ref="viewerRef">
<template v-slot:fullscreen>
<div class="fullscreen-button">
<Button
class="desktop"
:text="buttonText"
look="button-border--black"
:icon="isFull ? 'bi bi-fullscreen-exit' : 'bi bi-fullscreen'"
@trigger="fullBrowser"
/>
<Button
class="mobile"
look="button--rounded no-text"
:icon="isFull ? 'bi bi-fullscreen-exit' : 'bi bi-fullscreen'"
@trigger="fullscreen"
/>
</div>
</template>
</Viewer>
<main id="homePage" class="entry-page">
<section class="entry-section">
<Viewer ref="viewerRef"> </Viewer>
</section>
</main>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import Viewer from '@/components/Viewer.vue'
import Button from '@/components/Button.vue'
import type ViewerType from '@/components/Viewer.vue'
import type { ExtendedHtmlEl } from '@/views/interfaces/HomeView'
import { toggleFullscreen } from '@/views/utils/home'
const { t } = useI18n()
const viewerRef = ref<InstanceType<typeof ViewerType>>()
const sectionRef = ref<HTMLDivElement>()
const isFull = ref<boolean>(false)
const buttonText = computed<string>(() => {
if (isFull.value) return t('pages.home.close_fullscreen')
return t('pages.home.open_fullscreen')
})
function fullscreen() {
if (sectionRef.value) {
const elem = sectionRef.value as ExtendedHtmlEl
toggleFullscreen(elem)
isFull.value = !isFull.value
}
}
function fullBrowser() {
const header = document.getElementById('navHeader')
const footer = document.getElementById('navFooter')
if (header) {
const isHiddenHeader = header.classList.contains('hidden')
if (isHiddenHeader) header.classList.remove('hidden')
else header.classList.add('hidden')
}
if (footer) {
const isHiddenHeader = footer.classList.contains('hidden')
if (isHiddenHeader) footer.classList.remove('hidden')
else footer.classList.add('hidden')
}
isFull.value = !isFull.value
}
</script>
<style scoped lang="scss">
.entry-page {
@@ -75,13 +25,6 @@ function fullBrowser() {
.mobile {
display: none;
}
.fullscreen-button {
position: absolute;
bottom: toRem(1);
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.focus-pic,
.logged .entry-section {
height: calc(100vh - #{toRem(8)});
@@ -108,12 +51,6 @@ function fullBrowser() {
}
}
@media (max-width: toRem(50)) {
.fullscreen-button {
left: initial;
transform: initial;
right: toRem(1.3);
top: toRem(16);
}
.mobile {
display: block;
}

77
src/views/MySequenceView.vue
View File

@@ -25,25 +25,27 @@
</div>
<div class="menu-top">
<div class="header-menu">
<div class="wrapper-title">
<span :class="[sequence.status, 'sequence-status']">{{
sequenceStatus
}}</span>
<div @click.stop class="entry-edit-text">
<EditText
:default-text="sequence.title"
:is-loading="isLoadingTitle"
:form-title="$t('pages.sequence.sequence_form_title')"
@triggerNewText="setNewSequenceTitle"
/>
</div>
</div>
<button
data-bs-target="#collapseTarget"
data-bs-toggle="collapse"
class="button-collapse"
@click="toggleMenu"
>
<div class="wrapper-title">
<span :class="[sequence.status, 'sequence-status']">{{
sequenceStatus
}}</span>
<h1 class="title desktop">
{{ sequence.title }}
</h1>
</div>
<i :class="headerPanelIsOpen ? 'bi bi-dash' : 'bi bi-plus'"></i>
</button>
<h1 class="title responsive">
{{ sequence.title }}
</h1>
</div>
<div v-if="isSequenceOwner" class="wrapper-button">
<Button
@@ -211,6 +213,7 @@ import Pagination from '@/components/Pagination.vue'
import InputCheckbox from '@/components/InputCheckbox.vue'
import Loader from '@/components/Loader.vue'
import ImageItem from '@/components/ImageItem.vue'
import EditText from '@/components/EditText.vue'
import Viewer from '@/components/Viewer.vue'
import type ViewerType from '@/components/Viewer.vue'
import { durationCalc, formatDate } from '@/utils/dates'
@@ -254,6 +257,7 @@ let headerPanelIsOpen = ref<boolean>(true)
let isShiftPressed = ref<boolean>(false)
let itemSelected = ref<string>('')
let isLoading = ref<boolean>(false)
let isLoadingTitle = ref<boolean>(false)
const collapseMenu = ref<HTMLDivElement>()
const deleteAll = ref<HTMLDivElement>()
const menuHeight = ref<string>()
@@ -321,7 +325,15 @@ watchEffect(async () => {
}
)
})
async function setNewSequenceTitle(value: string | null): Promise<void> {
isLoadingTitle.value = true
if (value && value.length > 0) {
await patchACollection(route.params.id, { title: value })
const fetchCollectionInfo = await fetchCollection(route.params.id)
formatSequenceFetched(fetchCollectionInfo.data)
isLoadingTitle.value = false
}
}
function getCurrentPicId(id: string): string {
const parseParams = new URLSearchParams(window.location.search)
const pict = parseParams.get('currentPic')
@@ -442,7 +454,7 @@ async function patchCollection(): Promise<void> {
let visible
if (sequence.value?.status === 'ready') visible = 'false'
else visible = 'true'
await patchACollection(route.params.id, visible)
await patchACollection(route.params.id, { visible: visible })
const fetchCollectionInfo = await fetchCollection(route.params.id)
formatSequenceFetched(fetchCollectionInfo.data)
if (visible === 'false') hiddeAllPictures()
@@ -641,8 +653,7 @@ async function patchOrDeleteCollectionItems(
align-items: center;
}
.wrapper-title {
display: flex;
align-items: center;
min-width: 60%;
}
.wrapper-button {
display: flex;
@@ -682,6 +693,7 @@ async function patchOrDeleteCollectionItems(
}
.title {
@include text(h4);
text-align: left;
color: var(--grey-dark);
margin-right: toRem(1);
margin-bottom: 0;
@@ -690,8 +702,9 @@ async function patchOrDeleteCollectionItems(
display: none;
}
.menu-top {
position: relative;
margin: toRem(2) toRem(2) 0;
padding: toRem(1) toRem(2);
padding: toRem(2.5) toRem(2) toRem(1);
border: toRem(0.1) solid var(--grey);
border-radius: toRem(0.5);
background-color: var(--blue-semi);
@@ -699,12 +712,16 @@ async function patchOrDeleteCollectionItems(
.header-menu {
display: flex;
justify-content: space-between;
margin-bottom: toRem(1);
}
.sequence-status {
@include text(xs-r-regular);
border-radius: toRem(1);
padding: toRem(0.5) toRem(1);
margin-right: toRem(1);
position: absolute;
top: 0;
left: 0;
z-index: 1;
@include text(xss-regular);
border-radius: toRem(0.4);
padding: toRem(0.3) toRem(0.8);
color: var(--white);
&.ready {
background-color: var(--green);
@@ -723,11 +740,9 @@ async function patchOrDeleteCollectionItems(
border: none;
background-color: transparent;
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: toRem(1);
position: absolute;
top: 0;
right: toRem(2);
}
.bi-plus,
.bi-dash {
@@ -795,9 +810,8 @@ async function patchOrDeleteCollectionItems(
justify-content: center;
}
@media (max-width: toRem(102.4)) {
.header-menu {
flex-direction: column;
align-items: flex-start;
.wrapper-title {
width: 90%;
}
.block-collapse {
flex-direction: column;
@@ -846,9 +860,10 @@ async function patchOrDeleteCollectionItems(
margin-bottom: toRem(1);
}
.button-collapse {
width: 100%;
justify-content: space-between;
margin-bottom: 0;
top: toRem(-1);
right: 0;
}
.photo-item {
width: 100%;
@@ -905,6 +920,7 @@ async function patchOrDeleteCollectionItems(
}
.menu-top {
width: 0vw;
padding: toRem(2.5) toRem(1);
}
.button-close {
position: absolute;
@@ -920,9 +936,6 @@ async function patchOrDeleteCollectionItems(
background-color: var(--white);
border: toRem(0.1) solid var(--black);
}
.menu-top {
padding: toRem(1);
}
.menu-is-open {
.menu-right {
z-index: 3;

4
src/views/MySequencesView.vue
View File

@@ -388,7 +388,7 @@ async function patchCollection(sequence: SequenceLinkInterface): Promise<void> {
let visible
if (sequence['geovisio:status'] === 'ready') visible = 'false'
else visible = 'true'
await patchACollection(sequence.id, visible)
await patchACollection(sequence.id, { visible: visible })
await fetchAndFormatSequence()
if (viewerRef.value) viewerRef.value.viewer.reloadVectorTiles()
isLoading.value = false
@@ -484,8 +484,6 @@ function goToSequence(sequence: SequenceLinkInterface): void {
sequence.extent.spatial.bbox[0][0],
sequence.extent.spatial.bbox[0][1]
],
zoom: 10,
//peut être à virer
duration: 0
})
}

17
src/views/UploadPicturesView.vue
View File

@@ -39,12 +39,14 @@
<p class="import-text">
{{ $t('pages.upload.description_title_sequence') }}
</p>
<EditText
:default-text="newSequenceTitle || sequenceTitle"
:is-loading="isLoading"
:is-loaded="isLoaded"
@triggerNewText="setNewSequenceTitle"
/>
<div class="wrapper-edit-text">
<EditText
:default-text="newSequenceTitle || sequenceTitle"
:is-loading="isLoading"
:is-loaded="isLoaded"
@triggerNewText="setNewSequenceTitle"
/>
</div>
<form>
<div class="wrapper-form">
<InputUpload
@@ -346,6 +348,9 @@ h3 {
.import-text {
@include text(m-r-regular);
}
.wrapper-edit-text {
margin-bottom: toRem(2);
}
.entry-license {
margin-bottom: toRem(1);
}

1
src/views/interfaces/common/index.ts
View File

@@ -1,5 +1,6 @@
export interface MapInterface {
startWide?: boolean
users?: string[]
maxZoom?: number
minZoom?: number
style?: object | string

4
src/views/utils/sequence/request.ts
View File

@@ -11,9 +11,9 @@ function deleteACollection(collectionId: string | string[]): Promise<unknown> {
function patchACollection(
collectionId: string | string[],
visible: string
fieldObject: object
): Promise<unknown> {
return axios.patch(`api/collections/${collectionId}`, { visible: visible })
return axios.patch(`api/collections/${collectionId}`, fieldObject)
}
function deleteACollectionItem(

20317
yarn.lock
View File

File diff suppressed because it is too large Load Diff