You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
cjvt-valency/src/frontend_vue/src/components/Nav.vue

127 lines
3.4 KiB

<template>
<nav>
<b-navbar id="nav-red-bg" toggleable="md" type="light" variant="light">
<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
<!--b-navbar-brand>Vezljivostni vzorci slovenskih glagolov</b-navbar-brand-->
<b-navbar-brand class=cursorpointer v-on:click="goHome">
VEZLJIVOSTNI VZORCI SLOVENSKIH GLAGOLOV
</b-navbar-brand>
<b-collapse is-nav id="nav_collapse">
<b-navbar-nav>
<b-nav-item-dropdown :text=corpText right>
<b-dropdown-item v-for="option in optCorpora"
:value="option"
:key="option"
v-on:click="updateCorpus(option)"
>
{{ option }}
</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
<b-navbar-nav>
<b-nav-item-dropdown :text=indexText right>
<b-dropdown-item v-for="option in optIndexes"
:value="option.val"
:key="option.val"
v-on:click="updateIndex(option)"
>
{{ option.key }}
</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto" right v-if="this.loggedIn()">
<b-nav-item>
Uporabnik: {{ this.$root.store.username }}
<a href="#" v-on:click="logOut()">(odjava)</a>
</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto" right v-else>
<b-nav-item>
<router-link to="/register">
Registracija
</router-link>
</b-nav-item>
<b-nav-item>
<router-link to="/login">
Prijava
</router-link>
</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</nav>
</template>
<script>
export default {
name: "Nav",
props: ["appState"],
data() {return {
optCorpora: ["kres", "ssj"],
optIndexes: [
{key: "besede", val: "words"},
{key: "udeleženske vloge", val: "functors"},
],
indexText: "pregled: " + this.$root.store.selIndex.key,
corpText: "korpus: " + this.$root.store.selCorpus,
}},
methods: {
updateAll() {
this.$root.store.indexReloader += 1
this.$root.store.radio = "one"
this.$router.push({
name: "Home"
})
},
setCorpText(val) {
this.corpText = "kropus: " + val
},
updateCorpus(val) {
this.setCorpText(val)
this.$root.store.selCorpus = val
this.updateAll()
},
setIndexText(val) {
this.indexText = "index: " + val
},
updateIndex(val) {
this.setIndexText(val.key)
this.$root.store.selIndex = val
this.updateAll()
},
loggedIn() {
return (this.$root.store.token !== null)
},
logOut() {
this.$root.store.token = null
this.$root.store.username = null
this.$router.push({
name: "Home"
})
},
goHome() {
this.$router.replace({path: "/home"})
}
}
}
</script>
<style>
#nav-red-bg {
background-color: rgb(183,21,17,0.9) !important;
}
nav a {
color: white;
}
nav a:hover {
color: white;
}
.cursorpointer {
cursor: pointer;
}
</style>