mamweb/vue_frontend/src/components/UlohaZadaniNode.vue

<template>
	<div class="ulohazadaninode">
		<template v-if="editorShow">
			Název: <input tpye="text" v-model="nazev"><br>
			Počet bodů: <input type="number" min="0" max="20" v-model="max_body"><br>
			Kód: <input type="text" v-model="kod"><br>
			<!--Autor: FIXME!<br-->
			<button v-if="create" v-on:click="createNode">Vytvořit úlohu</button>
			<button v-if="!create" v-on:click="saveNode">Uložit</button>
		</template>
		<template v-else>
			<h5>Zadání {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }} ({{item.node.uloha.max_body}} b)</h5>
			<button v-if="editorMode" v-on:click="editorShow = !editorShow">Upravit</button>
			<!--button v-if="editorMode" v-on:click="deleteText" class="delete">Smazat</button-->
		</template>
	</div>
</template>

<script>
import axios from 'axios'

export default {
	name: 'UlohaZadaniNode',
	data: () => ({
		max_body: 0,
		kod: "",
		editorShow: false,
		editorMode: false,
	}),
	props: {
		item: Object,
		editorShow: Boolean,
		editorMode: Boolean,
		create: Boolean,
		where: String,
		refnode: Object
	},
	methods: {
		getCookie: function (name){
			var cookieValue = null;
			if (document.cookie && document.cookie != '') {
				var cookies = document.cookie.split(';');
				for (var i = 0; i < cookies.length; i++) {
					var cookie = cookies[i].trim();
					// Does this cookie string begin with the name we want?

					if (cookie.substring(0, name.length + 1) == (name + '=')) {
						cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
						break;
					}
				}
			}
			return cookieValue;
		},
		createNode: function(){
			console.log('Creating UlohaZadaniNode');
			this.loading = true
			axios.post('/api/ulohazadaninode/',{
				refnode: this.refnode.id,
				where: this.where,
				uloha: {
					max_body: this.max_body,
					kod: this.kod,
					nazev: this.nazev,
				},
			}).then(response => {
				console.log(response.data);
				this.loading=false;
				this.$root.$emit('updateData',"ulohaZadaniNode create update");
			}).catch( e => {
				console.log(e);
			});},
		saveNode: function(){
			console.log('Saving UlohaZadaniNode');
			this.loading = true
			axios.put('/api/ulohazadaninode/'+this.item.node.id+'/',{
				uloha: {
					max_body: this.max_body,
					kod: this.kod,
					nazev: this.nazev,
				}
			}).then(response => {
				console.log(response.data);
				this.loading=false;
				this.item.node = response.data;
				this.$root.$emit('updateData',"ulohaZadaniNode save update");
			}).catch( e => {
				console.log(e);
			});
			this.editorShow = false;

		},
			
	},
	mounted: function(){
		axios.defaults.headers.common['X-CSRFToken'] = this.getCookie('csrftoken');
		if (this.create){
			this.editorShow = true;
			this.max_body = 0;
			this.nazev = "";
			this.kod = "";
		} else {
			this.max_body = this.item.node.uloha.max_body;
			this.nazev = this.item.node.uloha.nazev;
			this.kod = this.item.node.uloha.kod;
		}
		if (this.item.node.uloha === null){
			console.log("Uloha je null!");
			console.log(this.item);
		}
	}
}
</script>