labswp_2019_sose_geocaching/frontend/src/pages/Cache.vue

79 lines
2.1 KiB
Vue

<template>
<div>
<form>
<div class="q-pa-md q-gutter-y-md">
<p class="text-h5">Cache erstellen/bearbeiten</p>
<q-input class="col" dense stack-label filled v-model="text" label="Name"/>
<q-input
v-model="description"
dense
stack-label
filled
autogrow
type="textarea"
label="Beschreibung"
/>
<q-input class="col" dense stack-label filled v-model="text" label="Punktewert"/>
<p class="text-h6">Stationen</p>
<q-list bordered separator class="rounded-borders" >
<q-item>
<q-item-section avatar>
<q-avatar color="primary" text-color="white">
1
</q-avatar>
</q-item-section>
<q-item-section top>
<q-item-label lines="1">
<!--<span class="text-weight-medium">[quasarframework/quasar]</span>-->
<span class="text-grey-8">Beschreibung:</span>
</q-item-label>
<q-item-label lines="1" class="q-mt-xs text-body2">
<span class="cursor-pointer">Dies ist der Anfang der Beschreibung...</span>
</q-item-label>
</q-item-section>
<q-item-section side>
<div class="text-grey-8 q-gutter-xs">
<q-btn class="" color="" flat dense round icon="delete" />
<q-btn class="" color="" flat dense round icon="edit" />
</div>
</q-item-section>
</q-item>
</q-list>
<div class="row reverse">
<q-btn @click="addStation" unelevated color="primary" label="Station hinzufügen" icon-right="add"/>
</div>
<div class="row q-mt-xl">
<q-btn @click="saveCache" class="full-width" unelevated stack color="positive" label="Cache speichern" icon="save_alt"/>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
name: "Cache",
data() {
return {
text: ""
}
},
methods: {
addStation() {
},
saveCache() {
}
}
}
</script>
<style scoped>
</style>