Browse Source

TreeNodeEditor | funguje pridavani a editace vzoraku.

export_seznamu_prednasek
parent
commit
f6ce35beb4
  1. 51
      seminar/views/views_rest.py
  2. 6
      seminar/viewsets.py
  3. 3
      vue_frontend/src/components/AddNewNode.vue
  4. 40
      vue_frontend/src/components/TreeNode.vue
  5. 83
      vue_frontend/src/components/UlohaVzorakNode.vue

51
seminar/views/views_rest.py

@ -22,11 +22,6 @@ class UlohaSerializer(serializers.ModelSerializer):
model = m.Uloha model = m.Uloha
fields = '__all__' fields = '__all__'
class UlohaVzorakNodeSerializer(serializers.ModelSerializer):
class Meta:
model = m.UlohaVzorakNode
fields = '__all__'
depth = DEFAULT_NODE_DEPTH
class RocnikNodeSerializer(serializers.ModelSerializer): class RocnikNodeSerializer(serializers.ModelSerializer):
class Meta: class Meta:
@ -205,6 +200,52 @@ class UlohaZadaniNodeCreateSerializer(serializers.ModelSerializer):
fields = ('uloha','where','refnode') fields = ('uloha','where','refnode')
depth = DEFAULT_NODE_DEPTH depth = DEFAULT_NODE_DEPTH
class UlohaVzorakNodeSerializer(serializers.ModelSerializer):
class Meta:
model = m.UlohaVzorakNode
fields = '__all__'
depth = DEFAULT_NODE_DEPTH
class UlohaVzorakNodeWriteSerializer(serializers.ModelSerializer):
uloha = serializers.PrimaryKeyRelatedField(queryset=m.Uloha.objects.all(), many=False, read_only=False)
class Meta:
model = m.UlohaVzorakNode
fields = ('id','uloha')
depth = DEFAULT_NODE_DEPTH
class UlohaVzorakNodeCreateSerializer(serializers.ModelSerializer):
uloha_id = serializers.IntegerField()
refnode = serializers.IntegerField()
where = serializers.CharField()
def create(self, validated_data):
uloha_id = validated_data.pop('uloha_id')
uloha = m.Uloha.objects.get(pk=uloha_id)
where = validated_data.pop('where')
refnode_id = validated_data.pop('refnode')
refnode = m.TreeNode.objects.get(pk=refnode_id)
if where == 'syn':
node = treelib.create_child(refnode,m.UlohaVzorakNode,uloha = uloha)
elif where == 'za':
node = treelib.create_node_after(refnode,m.UlohaVzorakNode,uloha = uloha)
elif where == 'pred':
node = treelib.create_node_before(refnode,m.UlohaVzorakNode,uloha = uloha)
node.refnode = None
node.where = None
node.uloha_id = None
return node
class Meta:
model = m.UlohaVzorakNode
fields = ('refnode', 'uloha_id', 'where')
depth = DEFAULT_NODE_DEPTH
class ReseniNodeSerializer(serializers.ModelSerializer): class ReseniNodeSerializer(serializers.ModelSerializer):
class Meta: class Meta:

6
seminar/viewsets.py

@ -114,8 +114,10 @@ class CastNodeViewSet(PermissionMixin, ReadWriteSerializerMixin,viewsets.ModelVi
raise PermissionDenied('Nelze smazat CastNode, který má děti!') raise PermissionDenied('Nelze smazat CastNode, který má děti!')
class UlohaVzorakNodeViewSet(PermissionMixin, viewsets.ModelViewSet): class UlohaVzorakNodeViewSet(PermissionMixin, ReadWriteSerializerMixin, viewsets.ModelViewSet):
serializer_class = views.UlohaVzorakNodeSerializer read_serializer_class = views.UlohaVzorakNodeSerializer
write_serializer_class = views.UlohaVzorakNodeWriteSerializer
create_serializer_class = views.UlohaVzorakNodeCreateSerializer
def get_queryset(self): def get_queryset(self):
queryset = m.UlohaVzorakNode.objects.all() queryset = m.UlohaVzorakNode.objects.all()

3
vue_frontend/src/components/AddNewNode.vue

@ -6,7 +6,7 @@
<button v-if="types.includes('ulohaZadaniNode')" v-on:click="selected='ulohaZadaniNode'" :disabled="selected && selected !== 'ulohaZadaniNode'">Zadání úlohy</button> <button v-if="types.includes('ulohaZadaniNode')" v-on:click="selected='ulohaZadaniNode'" :disabled="selected && selected !== 'ulohaZadaniNode'">Zadání úlohy</button>
<button v-if="types.includes('ulohaVzorakNode')" v-on:click="selected='ulohaVzorakNode'" :disabled="selected && selected !== 'ulohaVzorakNode'">Vzorák</button> <button v-if="types.includes('ulohaVzorakNode')" v-on:click="selected='ulohaVzorakNode'" :disabled="selected && selected !== 'ulohaVzorakNode'">Vzorák</button>
<div v-if="selected"> <div v-if="selected">
<component :is='selected' :item='null' :where="where" :refnode="refnode" create></component> <component :is='selected' :item='null' :where="where" :refnode="refnode" :tema="tema" create></component>
</div> </div>
</div> </div>
</template> </template>
@ -24,6 +24,7 @@ export default {
types: Array, types: Array,
where: String, where: String,
refnode: Object, refnode: Object,
tema: Object,
}, },
data: () => ({ data: () => ({
selected: null, selected: null,

40
vue_frontend/src/components/TreeNode.vue

@ -1,16 +1,19 @@
<template> <template>
<div :class="editorMode ? 'treenode-org' : 'treenode'"> <div :class="editorMode ? 'treenode-org' : 'treenode'">
<!--b v-if="v_tematu">v tematu</b> <!--b v-if="tema">v tematu</b>
<b v-if="visible">visible</b> <b v-if="visible">visible</b>
Force visible: {{String(force_visible)}}--> Force visible: {{String(force_visible)}}-->
<component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id' <component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id'
:tema="temaOut"
:editorMode="editorMode" :editorMode="editorMode"
:debugMode="debugMode"></component> :debugMode="debugMode"></component>
<button v-if="debugMode" v-on:click="debugShow = !debugShow" class="nodebug">Ladící data</button> <!-- bude tu nějaký if na class="nodebug", v debug módu bude tlačítko vidět, jinak ne --> <button v-if="debugMode" v-on:click="debugShow = !debugShow" class="nodebug">Ladící data</button> <!-- bude tu nějaký if na class="nodebug", v debug módu bude tlačítko vidět, jinak ne -->
<div v-if="debugShow"> <div v-if="debugShow">
<pre>Tema: {{ tema }}</pre>
<pre>TemaOut: {{ temaOut }}</pre>
<pre>{{ item.node.polymorphic_ctype.model }}</pre> <pre>{{ item.node.polymorphic_ctype.model }}</pre>
<pre>{{ item }}</pre> <pre>{{ item }}</pre>
</div> </div>
@ -18,31 +21,31 @@
<div v-if="item.children.length === 0"> <div v-if="item.children.length === 0">
<div v-if="item.appendable_children.length > 0 && editorMode"> <div v-if="item.appendable_children.length > 0 && editorMode">
<b>Vložit jako syna: </b> <b>Vložit jako syna: </b>
<addnewnode :types="item.appendable_children" :refnode="item.node" where="syn" /> <addnewnode :types="item.appendable_children" :refnode="item.node" :tema="temaOut" where="syn" />
</div> </div>
</div> </div>
<div v-else :class="editorMode ? 'children-org' : 'children'"> <!-- bude tu nějaký if na class="children" --> <div v-else :class="editorMode ? 'children-org' : 'children'"> <!-- bude tu nějaký if na class="children" -->
<div v-if="item.children.length > 0 && item.children[0].appendable_siblings.length > 0 && editorMode"> <div v-if="item.children.length > 0 && item.children[0].appendable_siblings.length > 0 && editorMode">
<b>Vložit před: </b> <b>Vložit před: </b>
<addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" where="pred" /> <addnewnode :types="item.children[0].appendable_siblings" :refnode="item.children[0].node" :tema="temaOut" where="pred" />
</div> </div>
<div v-if="item.node.polymorphic_ctype.model==='temavcislenode'"> <div v-if="item.node.polymorphic_ctype.model==='temavcislenode'">
<!--Children: {{String(showChildren)}}--> <!--Children: {{String(showChildren)}}-->
<div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" > <div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
<!--Hide: {{hideNode(chld)}}, v tematu: {{v_tematu}}, force_visible: {{force_visible}}--> <!--Hide: {{hideNode(chld)}}, v tematu: {{tema}}, force_visible: {{force_visible}}-->
<div v-if="!hideNode(chld)"> <div v-if="!hideNode(chld)">
<div v-if="chld.node.polymorphic_ctype.model==='ulohazadaninode'"> <div v-if="chld.node.polymorphic_ctype.model==='ulohazadaninode'">
<button v-if="showChildren" v-on:click="showChildren=!showChildren"> Schovat </button> <button v-if="showChildren" v-on:click="showChildren=!showChildren"> Schovat </button>
<button v-else v-on:click="showChildren=!showChildren"> Rozbalit </button> <button v-else v-on:click="showChildren=!showChildren"> Rozbalit </button>
<TreeNode :item="chld" :v_tematu="true" <TreeNode :item="chld" :tema="temaOut"
:force_visible="showChildren" :force_visible="showChildren"
:editorMode="editorMode" :editorMode="editorMode"
:debugMode="debugMode"> :debugMode="debugMode">
</TreeNode> </TreeNode>
</div> </div>
<div v-else> <div v-else>
<TreeNode :item="chld" :v_tematu="true" <TreeNode :item="chld" :tema="temaOut"
:force_visible="showChildren" :force_visible="showChildren"
:editorMode="editorMode" :editorMode="editorMode"
:debugMode="debugMode"> :debugMode="debugMode">
@ -51,7 +54,7 @@
<div v-if="chld.appendable_siblings.length > 0 && editorMode" > <div v-if="chld.appendable_siblings.length > 0 && editorMode" >
<b v-if="index < (item.children.length - 1)">Vložit mezi: </b> <b v-if="index < (item.children.length - 1)">Vložit mezi: </b>
<b v-else>Vložit za: </b> <b v-else>Vložit za: </b>
<addnewnode :types="chld.appendable_siblings" :refnode="chld.node" where="za" /> <addnewnode :types="chld.appendable_siblings" :refnode="chld.node" :tema="temaOut" where="za" />
</div> </div>
</div> </div>
</div> </div>
@ -60,16 +63,16 @@
</div> </div>
<div v-else> <div v-else>
<div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" > <div v-for="(chld, index) in item.children" v-bind:key="chld.nazev" >
<div v-if="v_tematu && chld.node.polymorphic_ctype.model==='ulohazadaninode'"> <div v-if="tema !== null && chld.node.polymorphic_ctype.model==='ulohazadaninode'">
<div> Tady možná něco je </div> <div> Tady možná něco je </div>
<TreeNode :item="chld" :v_tematu="v_tematu" <TreeNode :item="chld" :tema="temaOut"
:force_visible="force_visible" :force_visible="force_visible"
:editorMode="editorMode" :editorMode="editorMode"
:debugMode="debugMode"> :debugMode="debugMode">
</TreeNode> </TreeNode>
</div> </div>
<div v-else> <div v-else>
<TreeNode :item="chld" :v_tematu="v_tematu" <TreeNode :item="chld" :tema="temaOut"
:force_visible="force_visible" :force_visible="force_visible"
:editorMode="editorMode" :editorMode="editorMode"
:debugMode="debugMode"> :debugMode="debugMode">
@ -78,7 +81,7 @@
<div v-if="chld.appendable_siblings.length > 0 && editorMode" > <div v-if="chld.appendable_siblings.length > 0 && editorMode" >
<b v-if="index < (item.children.length - 1)">Vložit mezi: </b> <b v-if="index < (item.children.length - 1)">Vložit mezi: </b>
<b v-else>Vložit za: </b> <b v-else>Vložit za: </b>
<addnewnode :types="chld.appendable_siblings" :refnode="chld.node" where="za" /> <addnewnode :types="chld.appendable_siblings" :refnode="chld.node" :tema="temaOut" where="za" />
</div> </div>
</div> </div>
</div> </div>
@ -112,14 +115,15 @@ export default {
}, },
data: () => ({ data: () => ({
debugShow: false, debugShow: false,
showChildren: false showChildren: false,
temaOut: null,
}), }),
computed: { computed: {
}, },
props: { props: {
item: Object, item: Object,
force_visible: Boolean, force_visible: Boolean,
v_tematu: Boolean, tema: Object,
editorMode: Boolean, editorMode: Boolean,
debugMode: Boolean, debugMode: Boolean,
}, },
@ -132,7 +136,17 @@ export default {
return false; return false;
} }
return true; return true;
},
},
mounted: function(){
if (this.item.node.polymorphic_ctype.model === 'temavcislenode'){
this.temaOut = this.item.node.tema;
console.log(this.temaOut);
} else {
this.temaOut = this.tema;
} }
} }
} }
</script> </script>

83
vue_frontend/src/components/UlohaVzorakNode.vue

@ -1,10 +1,8 @@
<template> <template>
<div class="ulohavzoraknode"> <div class="ulohavzoraknode">
<template v-if="editorShow">
<!--pre>UlohaVzorakNode {{item}} {{typeof(item)}}</pre--> <!--pre>UlohaVzorakNode {{item}} {{typeof(item)}}</pre-->
<!--h5 v-if="!editorMode">Řešení {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5--> <!--h5 v-if="!editorMode">Řešení {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5-->
<h5>Řešení!</h5>
<button v-if="editorMode" v-on:click="showSelect=!showSelect" class="upravit">Upravit</button>
<div v-if="showSelect">
<form class="searchForm" v-on:submit.prevent="submitSearch"> <form class="searchForm" v-on:submit.prevent="submitSearch">
<input type="text" v-model="searchQuery" placeholder="Napište název" @keyup="submitSearch"> <input type="text" v-model="searchQuery" placeholder="Napište název" @keyup="submitSearch">
</form> </form>
@ -13,7 +11,13 @@
<li v-for="res in searchResults" :key="res.id" v-on:click="setSelected(res)">{{res.nazev}}</li> <li v-for="res in searchResults" :key="res.id" v-on:click="setSelected(res)">{{res.nazev}}</li>
</ul> </ul>
</div> </div>
</div> <button v-if="create" v-on:click="createNode">Vytvořit vzorák</button>
<button v-if="!create" v-on:click="saveNode">Uložit</button>
</template>
<template v-else>
<h5>Řešení {{item.node.uloha.cislo_zadani.poradi}}.{{item.node.uloha.kod}}: {{item.node.uloha.nazev}}</h5>
<button v-if="editorMode" v-on:click="editorShow = !editorShow">Upravit</button>
</template>
</div> </div>
</template> </template>
@ -27,21 +31,30 @@ export default {
isResult: false, isResult: false,
searchQuery: '', searchQuery: '',
searchResults: [], searchResults: [],
showSelect: false,
selected: null, selected: null,
selected_id: null selected_id: null,
editorShow: false,
} }
}, },
props: { props: {
item: Object, item: Object,
create: Boolean, create: Boolean,
showSelect: Boolean,
editorMode: Boolean, editorMode: Boolean,
editorShow: Boolean,
tema: Object,
refnode: Object,
where: String,
}, },
mounted: function(){ mounted: function(){
axios.defaults.headers.common['X-CSRFToken'] = this.getCookie('csrftoken');
if (this.create){ if (this.create){
this.showSelect = true; this.editorShow = true;
console.log('Creating'); this.searchQuery = "";
this.selected_id = null;
} else {
this.searchQuery = this.item.node.uloha.nazev;
this.selected_id = this.item.node.uloha.id;
this.selected = this.item.node.uloha;
} }
if (this.item !== null && this.item.node.uloha === null){ if (this.item !== null && this.item.node.uloha === null){
console.log("Uloha je null!"); console.log("Uloha je null!");
@ -49,9 +62,27 @@ export default {
} }
}, },
methods: { 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;
},
submitSearch: function(){ submitSearch: function(){
if (this.searchQuery.length < 3) { return;} if (this.searchQuery.length < 3) { return;}
var reqURL = "/api/ulohavzoraknode/?nazev="+this.searchQuery; let nazev = "nazev="+this.searchQuery+"&";
let nadproblem = "nadproblem="+this.tema.id+"&";
var reqURL = "/api/uloha/?"+nazev+nadproblem;
axios.get(reqURL).then( (response) => { axios.get(reqURL).then( (response) => {
this.searchResults = response.data.results; this.searchResults = response.data.results;
this.isResult = true; this.isResult = true;
@ -64,6 +95,38 @@ export default {
setSelected: function(res){ setSelected: function(res){
this.searchQuery = res.nazev this.searchQuery = res.nazev
this.selected_id = res.id this.selected_id = res.id
this.selected = res
},
createNode: function(){
console.log('Creating UlohaVzorakNode');
this.loading = true
axios.post('/api/ulohavzoraknode/',{
refnode: this.refnode.id,
where: this.where,
uloha_id: this.selected_id,
}).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 UlohaVzorakNode');
this.loading = true
axios.put('/api/ulohavzoraknode/'+this.item.node.id+'/',{
id: this.item.node.id,
uloha: this.selected_id
}).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;
} }
} }
} }

Loading…
Cancel
Save