osm_my_commerce/components/TagTable.vue

114 lines
3.5 KiB
Vue

<template>
<div>
<h2 class="title is-2">Tags de data.elements[0]</h2>
<section v-if="data && data.elements" class="edit">
elements: {{ data.elements.length }}
<b-field label="Nom">
<b-input
v-model="data.elements[0].tags.name"
icon="pencil"
placeholder="le nom de votre commerce"
></b-input>
</b-field>
<b-field label="Site web">
<b-input
v-model="data.elements[0].tags.website"
icon="planet"
placeholder="www.monsite.com"
></b-input>
</b-field>
<b-field label="email officiel">
<b-input
v-model="data.elements[0].tags.mail"
icon="enveloppe"
placeholder="contact@monsite.com"
></b-input>
</b-field>
<b-field label="Tel">
<b-input
v-model="data.elements[0].tags.phone"
icon="planet"
placeholder="012345"
type="tel"
></b-input>
</b-field>
<b-field label="Description de votre activité">
<b-input
v-model="data.elements[0].tags.description"
icon="planet"
placeholder="description de votre activité"
type="tel"
></b-input>
</b-field>
<b-field>
<b-switch v-model="data.elements[0].tags.takeaway">
Vente à emporter
</b-switch>
<b-switch v-model="data.elements[0].tags['parking:velo']">
Parking vélo
</b-switch>
<b-switch v-model="data.elements[0].tags['webaccess']">
Accès Internet
</b-switch>
<b-switch v-model="data.elements[0].tags['elecborne']">
borne de recharge électrique sur parking
</b-switch>
<b-switch v-model="data.elements[0].tags['access:public']">
Accès autorisé au public
</b-switch>
</b-field>
<h2 class="title is-2">Horaires d'ouverture</h2>
<div class="padded">
{{ data.elements[0].tags.opening_hours }}
</div>
<button class="btn button has-background-success">Enregistrer</button>
</section>
<section class="comparaison">
<h2>Comparaison des tags</h2>
<table>
<thead>
<tr>
<td>API OSM</td>
<td>API addok</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!-- <div v-for="(value, name) in data[0].properties.tags" :key="name">-->
<!-- <div class="columns">-->
<!-- <div class="column">-->
<!-- <strong> {{ name }} </strong>-->
<!-- </div>-->
<!-- <div class="column">-->
<!-- {{ value }}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</td>
<td v-if="fetchedData.osm_data && fetchedData.osm_data.elements">
<div
v-for="(value, name) in fetchedData.osm_data.elements[0].tags"
:key="name"
>
<div class="columns">
<div class="column">
<strong> {{ name }}</strong>
</div>
<div class="column">{{ value }}</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<pre v-if="data">
data:
{{ data }}
</pre>
</div>
</template>