mam
/
mamweb
12
0
Fork 0
Code Issues Pull Requests 11 Projects Releases Wiki Activity
Browse Source

TreeNodeEditor | funguje pridavani a editace vzoraku.

export_seznamu_prednasek
Tomas 'Jethro' Pokorny 4 years ago
parent
32121c0229
commit
f6ce35beb4
5 changed files with 160 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 99
      vue_frontend/src/components/UlohaVzorakNode.vue

51
seminar/views/views_rest.py
View File

@ -22,11 +22,6 @@ class UlohaSerializer(serializers.ModelSerializer):
model = m.Uloha
fields = '__all__'
class UlohaVzorakNodeSerializer(serializers.ModelSerializer):
class Meta:
model = m.UlohaVzorakNode
fields = '__all__'
depth = DEFAULT_NODE_DEPTH
class RocnikNodeSerializer(serializers.ModelSerializer):
class Meta:
@ -205,6 +200,52 @@ class UlohaZadaniNodeCreateSerializer(serializers.ModelSerializer):
fields = ('uloha','where','refnode')
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 Meta:

6
seminar/viewsets.py
View File

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

3
vue_frontend/src/components/AddNewNode.vue
View File

@ -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('ulohaVzorakNode')" v-on:click="selected='ulohaVzorakNode'" :disabled="selected && selected !== 'ulohaVzorakNode'">Vzorák</button>
<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>
</template>
@ -24,6 +24,7 @@ export default {
types: Array,
where: String,
refnode: Object,
tema: Object,
},
data: () => ({
selected: null,

40
vue_frontend/src/components/TreeNode.vue
View File

@ -1,16 +1,19 @@
<template>
<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>
Force visible: {{String(force_visible)}}-->
<component :is='item.node.polymorphic_ctype.model' :item='item' :key='item.node.id'
:tema="temaOut"
:editorMode="editorMode"
: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 -->
<div v-if="debugShow">
<pre>Tema: {{ tema }}</pre>
<pre>TemaOut: {{ temaOut }}</pre>
<pre>{{ item.node.polymorphic_ctype.model }}</pre>
<pre>{{ item }}</pre>
</div>
@ -18,31 +21,31 @@
<div v-if="item.children.length === 0">
<div v-if="item.appendable_children.length > 0 && editorMode">
<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 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">
<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 v-if="item.node.polymorphic_ctype.model==='temavcislenode'">
<!--Children: {{String(showChildren)}}-->
<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="chld.node.polymorphic_ctype.model==='ulohazadaninode'">
<button v-if="showChildren" v-on:click="showChildren=!showChildren"> Schovat </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"
:editorMode="editorMode"
:debugMode="debugMode">
</TreeNode>
</div>
<div v-else>
<TreeNode :item="chld" :v_tematu="true"
<TreeNode :item="chld" :tema="temaOut"
:force_visible="showChildren"
:editorMode="editorMode"
:debugMode="debugMode">
@ -51,7 +54,7 @@
<div v-if="chld.appendable_siblings.length > 0 && editorMode" >
<b v-if="index < (item.children.length - 1)">Vložit mezi: </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>
@ -60,16 +63,16 @@
</div>
<div v-else>
<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>
<TreeNode :item="chld" :v_tematu="v_tematu"
<TreeNode :item="chld" :tema="temaOut"
:force_visible="force_visible"
:editorMode="editorMode"
:debugMode="debugMode">
</TreeNode>
</div>
<div v-else>
<TreeNode :item="chld" :v_tematu="v_tematu"
<TreeNode :item="chld" :tema="temaOut"
:force_visible="force_visible"
:editorMode="editorMode"
:debugMode="debugMode">
@ -78,7 +81,7 @@
<div v-if="chld.appendable_siblings.length > 0 && editorMode" >
<b v-if="index < (item.children.length - 1)">Vložit mezi: </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>
@ -112,14 +115,15 @@ export default {
},
data: () => ({
debugShow: false,
showChildren: false
showChildren: false,
temaOut: null,
}),
computed: {
},
props: {
item: Object,
force_visible: Boolean,
v_tematu: Boolean,
tema: Object,
editorMode: Boolean,
debugMode: Boolean,
},
@ -132,7 +136,17 @@ export default {
return false;
}
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>

99
vue_frontend/src/components/UlohaVzorakNode.vue
View File

@ -1,19 +1,23 @@
<template>
<div class="ulohavzoraknode">
<template v-if="editorShow">
<!--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>Ř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">
<input type="text" v-model="searchQuery" placeholder="Napište název" @keyup="submitSearch">
</form>
<div class="searchResult" v-show="isResult">
<ul>
<li v-for="res in searchResults" :key="res.id" v-on:click="setSelected(res)">{{res.nazev}}</li>
</ul>
</div>
</div>
<form class="searchForm" v-on:submit.prevent="submitSearch">
<input type="text" v-model="searchQuery" placeholder="Napište název" @keyup="submitSearch">
</form>
<div class="searchResult" v-show="isResult">
<ul>
<li v-for="res in searchResults" :key="res.id" v-on:click="setSelected(res)">{{res.nazev}}</li>
</ul>
</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>
</template>
@ -27,21 +31,30 @@ export default {
isResult: false,
searchQuery: '',
searchResults: [],
showSelect: false,
selected: null,
selected_id: null
selected_id: null,
editorShow: false,
}
},
props: {
item: Object,
create: Boolean,
showSelect: Boolean,
editorMode: Boolean,
editorShow: Boolean,
tema: Object,
refnode: Object,
where: String,
},
mounted: function(){
axios.defaults.headers.common['X-CSRFToken'] = this.getCookie('csrftoken');
if (this.create){
this.showSelect = true;
console.log('Creating');
this.editorShow = true;
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){
console.log("Uloha je null!");
@ -49,9 +62,27 @@ export default {
}
},
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(){
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) => {
this.searchResults = response.data.results;
this.isResult = true;
@ -64,6 +95,38 @@ export default {
setSelected: function(res){
this.searchQuery = res.nazev
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;
}
}
}

Write Preview
Loading…
Cancel
Save