26 changed files with 9054 additions and 1 deletions
@ -0,0 +1,7 @@ |
|||
from rest_framework import routers |
|||
from seminar import viewsets as vs |
|||
|
|||
router = routers.DefaultRouter() |
|||
|
|||
router.register(r'ulohavzoraknode', vs.UlohaVzorakNodeViewSet) |
|||
|
|||
@ -0,0 +1,7 @@ |
|||
{% load render_bundle from webpack_loader %} |
|||
|
|||
<div id="app"> |
|||
<app></app> |
|||
</div> |
|||
{% render_bundle 'chunk-vendors' %} |
|||
{% render_bundle 'vue_app_01' %} |
|||
@ -1,2 +1,3 @@ |
|||
from .views_all import * |
|||
from .autocomplete import * |
|||
from .views_rest import * |
|||
|
|||
@ -0,0 +1,89 @@ |
|||
from rest_framework import serializers |
|||
from rest_polymorphic.serializers import PolymorphicSerializer |
|||
|
|||
import seminar.models as m |
|||
|
|||
DEFAULT_NODE_DEPTH = 2 |
|||
|
|||
class UlohaVzorakNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.UlohaVzorakNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
class UlohaZadaniNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.UlohaZadaniNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
class RocnikNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.RocnikNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
class CisloNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.CisloNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
class MezicisloNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.MezicisloNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
class TemaVCisleNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.TemaVCisleNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
class OrgTextNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.OrgTextNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
class PohadkaNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.PohadkaNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
class TextNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.TextNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
class CastNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.CastNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
class ReseniNodeSerializer(serializers.ModelSerializer): |
|||
class Meta: |
|||
model = m.ReseniNode |
|||
fields = '__all__' |
|||
depth = DEFAULT_NODE_DEPTH |
|||
|
|||
|
|||
class TreeNodeSerializer(PolymorphicSerializer): |
|||
model_serializer_mapping = { |
|||
m.RocnikNode: RocnikNodeSerializer, |
|||
m.CisloNode: CisloNodeSerializer, |
|||
m.MezicisloNode: MezicisloNodeSerializer, |
|||
m.TemaVCisleNode: TemaVCisleNodeSerializer, |
|||
m.OrgTextNode: OrgTextNodeSerializer, |
|||
m.UlohaZadaniNode: UlohaZadaniNodeSerializer, |
|||
m.UlohaVzorakNode: UlohaVzorakNodeSerializer, |
|||
m.PohadkaNode: PohadkaNodeSerializer, |
|||
m.TextNode: TextNodeSerializer, |
|||
m.CastNode: CastNodeSerializer, |
|||
m.ReseniNode: ReseniNodeSerializer, |
|||
|
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
from rest_framework import viewsets,filters |
|||
from . import models as m |
|||
from . import views |
|||
|
|||
class UlohaVzorakNodeViewSet(viewsets.ModelViewSet): |
|||
queryset = m.UlohaVzorakNode.objects.all() |
|||
serializer_class = views.UlohaVzorakNodeSerializer |
|||
@ -0,0 +1,22 @@ |
|||
.DS_Store |
|||
node_modules |
|||
/dist |
|||
|
|||
# local env files |
|||
.env.local |
|||
.env.*.local |
|||
|
|||
# Log files |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
pnpm-debug.log* |
|||
|
|||
# Editor directories and files |
|||
.idea |
|||
.vscode |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
@ -0,0 +1,5 @@ |
|||
module.exports = { |
|||
presets: [ |
|||
'@vue/cli-plugin-babel/preset' |
|||
] |
|||
} |
|||
@ -0,0 +1,46 @@ |
|||
{ |
|||
"name": "vue_frontend", |
|||
"version": "0.1.0", |
|||
"private": true, |
|||
"scripts": { |
|||
"serve": "vue-cli-service serve", |
|||
"build": "vue-cli-service build", |
|||
"lint": "vue-cli-service lint" |
|||
}, |
|||
"dependencies": { |
|||
"@ckeditor/ckeditor5-build-classic": "^22.0.0", |
|||
"@ckeditor/ckeditor5-vue": "^1.0.1", |
|||
"axios": "^0.19.2", |
|||
"core-js": "^3.6.5", |
|||
"vue": "^2.6.11" |
|||
}, |
|||
"devDependencies": { |
|||
"@vue/cli-plugin-babel": "~4.4.0", |
|||
"@vue/cli-plugin-eslint": "~4.4.0", |
|||
"@vue/cli-service": "~4.4.0", |
|||
"babel-eslint": "^10.1.0", |
|||
"eslint": "^6.7.2", |
|||
"eslint-plugin-vue": "^6.2.2", |
|||
"vue-template-compiler": "^2.6.11", |
|||
"webpack-bundle-tracker": "0.4.3" |
|||
}, |
|||
"eslintConfig": { |
|||
"root": true, |
|||
"env": { |
|||
"node": true |
|||
}, |
|||
"extends": [ |
|||
"plugin:vue/essential", |
|||
"eslint:recommended" |
|||
], |
|||
"parserOptions": { |
|||
"parser": "babel-eslint" |
|||
}, |
|||
"rules": {} |
|||
}, |
|||
"browserslist": [ |
|||
"> 1%", |
|||
"last 2 versions", |
|||
"not dead" |
|||
] |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<div v-if="loading"> |
|||
Loading... |
|||
</div> |
|||
<div v-else id="app"> |
|||
<!--pre> |
|||
{{item}} |
|||
</pre--> |
|||
<TreeNode :item="item"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import TreeNode from './components/TreeNode.vue' |
|||
import axios from 'axios' |
|||
export default { |
|||
name: 'App', |
|||
components: { |
|||
TreeNode, |
|||
}, |
|||
data: () => ({ |
|||
loading: true, |
|||
item: null |
|||
}), |
|||
mounted: function() { |
|||
this.getArticles(); |
|||
}, |
|||
methods: { |
|||
getArticles: function() { |
|||
this.loading = true; |
|||
axios.get('/treenode/1/json/') |
|||
.then((response) => { |
|||
this.item = response.data; |
|||
this.loading = false; |
|||
}) |
|||
.catch((err) => { |
|||
this.loading = false; |
|||
console.log(err); |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
#app { |
|||
font-family: Avenir, Helvetica, Arial, sans-serif; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
color: #2c3e50; |
|||
margin-top: 60px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,45 @@ |
|||
<template> |
|||
<div class="castnode"> |
|||
<!--pre>CastNode {{item}} {{typeof(item)}}</pre--> |
|||
<div v-if="editorShow"> |
|||
<input type="text" v-model="currentText" /> |
|||
<button v-on:click="updateText">Uložit</button> |
|||
<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button> |
|||
</div> |
|||
<div v-else> |
|||
<h4>{{ currentText }} <button v-on:click="editorShow=!editorShow">Upravit</button> </h4> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'CastNode', |
|||
data: () => ({ |
|||
editorShow: false, |
|||
currentText: "", |
|||
originalText: "", |
|||
}), |
|||
props: { |
|||
item: Object |
|||
}, |
|||
mounted: function() { |
|||
console.log("mounted"); |
|||
this.currentText = this.item.node.nadpis; |
|||
this.originalText = this.item.node.nadpis; |
|||
//this.getText(); |
|||
}, |
|||
methods: { |
|||
updateText: function() { |
|||
console.log("Saving text"); |
|||
console.log(this.currentText); |
|||
// FIXME really save! |
|||
this.editorShow = false; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
</style> |
|||
@ -0,0 +1,33 @@ |
|||
<template> |
|||
<div class="cislonode"> |
|||
<!--pre>CisloNode {{item}} {{typeof(item)}}</pre--> |
|||
<h2>Číslo {{ item.node.cislo.poradi }}</h2> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'CisloNode', |
|||
props: { |
|||
item: Object |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
h3 { |
|||
margin: 40px 0 0; |
|||
} |
|||
ul { |
|||
/* list-style-type: none;*/ |
|||
padding: 0; |
|||
} |
|||
li { |
|||
/*display: inline-block;*/ |
|||
margin: 0 10px; |
|||
} |
|||
a { |
|||
color: #42b983; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,33 @@ |
|||
<template> |
|||
<div class="rocniknode"> |
|||
<!--pre>RocnikNode {{item}} {{typeof(item)}}</pre--> |
|||
<h1>Ročník {{ item.node.rocnik.rocnik }} ({{ item.node.rocnik.prvni_rok }}/{{item.node.rocnik.prvni_rok+1 }})</h1> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'RocnikNode', |
|||
props: { |
|||
item: Object |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
h3 { |
|||
margin: 40px 0 0; |
|||
} |
|||
ul { |
|||
/* list-style-type: none;*/ |
|||
padding: 0; |
|||
} |
|||
li { |
|||
/*display: inline-block;*/ |
|||
margin: 0 10px; |
|||
} |
|||
a { |
|||
color: #42b983; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,19 @@ |
|||
<template> |
|||
<div class="temavcislenode"> |
|||
<!--pre>TemaVCisleNode {{item}} {{typeof(item)}}</pre--> |
|||
<h4>Téma {{ item.node.tema.kod }}: {{ item.node.tema.nazev }}</h4> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'TemaVCisleNode', |
|||
props: { |
|||
item: Object |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
</style> |
|||
@ -0,0 +1,88 @@ |
|||
<template> |
|||
<div v-if="loading" class="loading"> |
|||
<p>Loading...</p> |
|||
</div> |
|||
<div v-else class="textnode"> |
|||
<!--pre>TextNode {{item}} {{typeof(item)}}</pre--> |
|||
<div v-if="editorShow"> |
|||
<component v-bind:is="editorComponent" :editor="editor" v-model="currentText" :config="editorConfig"></component> |
|||
<button v-on:click="updateText">Uložit</button> |
|||
<button v-on:click="currentText = originalText;editorShow=!editorShow;">Zahodit úpravy</button> |
|||
</div> |
|||
<div v-else v-bind:class="changedObject"> |
|||
<button v-on:click="editorShow=!editorShow">Upravit</button> |
|||
<p v-html="currentText"></p> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import axios from 'axios' |
|||
|
|||
import ClassicEditor from '@ckeditor/ckeditor5-build-classic' |
|||
import CKEditor from '@ckeditor/ckeditor5-vue'; |
|||
|
|||
export default { |
|||
name: 'TextNode', |
|||
data: () => ({ |
|||
loading: false, |
|||
editor: ClassicEditor, |
|||
editorData: '<p>Content of the editor.</p>', |
|||
editorConfig: { |
|||
// The configuration of the editor. |
|||
}, |
|||
editorShow: false, |
|||
editorComponent: CKEditor.component, |
|||
currentText: "",// this.item.node.text.na_web, |
|||
originalText: "",// this.item.node.text.na_web, |
|||
}), |
|||
computed: { |
|||
changedObject: function () { |
|||
console.log(this.currentText); |
|||
//console.log(this.originalText); |
|||
return { |
|||
changed: this.currentText !== this.originalText, |
|||
} |
|||
} |
|||
}, |
|||
props: { |
|||
item: Object |
|||
}, |
|||
mounted: function() { |
|||
console.log("mounted"); |
|||
this.currentText = this.item.node.text.na_web; |
|||
this.originalText = this.item.node.text.na_web; |
|||
//this.getText(); |
|||
}, |
|||
methods: { |
|||
getText: function() { |
|||
this.loading = true; |
|||
console.log(this.item); |
|||
console.log(this.item.node.text); |
|||
axios.get('/treenode/text/'+this.item.node.text) |
|||
.then((response) => { |
|||
this.text = response.data.na_web; |
|||
this.loading = false; |
|||
}) |
|||
.catch((err) => { |
|||
this.loading = false; |
|||
console.log(err); |
|||
}) |
|||
}, |
|||
|
|||
updateText: function() { |
|||
console.log("Saving text"); |
|||
console.log(this.currentText); |
|||
// FIXME really save! |
|||
this.editorShow = false; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
.changed { |
|||
background-color: yellow; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<div class="treenode"> |
|||
<button v-on:click="debugShow = !debugShow">Ladící data</button> |
|||
<div v-if="debugShow"> |
|||
<pre>{{ item.node.polymorphic_ctype.model }}</pre> |
|||
<pre>{{ item }}</pre> |
|||
</div> |
|||
<component :is='item.node.polymorphic_ctype.model' :item='item'></component> |
|||
<div v-if="item.children.length === 0"> |
|||
<div v-if="item.appendable_children.length > 0"> |
|||
<h1>Vložit jako syna</h1> |
|||
<ul> |
|||
<li v-for="chld in item.appendable_children" :key="chld[0]"> |
|||
<a href="">{{chld[1]}}</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
<div v-else> |
|||
<h1>Vložit před</h1> |
|||
<ul> |
|||
<li v-for="chld in item.appendable_children" :key="chld[0]"> |
|||
<a href="">{{chld[1]}}</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<ul> |
|||
<li v-for="chld in item.children" v-bind:key="chld.nazev" > |
|||
<TreeNode :item="chld"> |
|||
</TreeNode> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import rocniknode from './RocnikNode.vue' |
|||
import cislonode from './CisloNode.vue' |
|||
import temavcislenode from './TemaVCisleNode.vue' |
|||
import castnode from './CastNode.vue' |
|||
import textnode from './TextNode.vue' |
|||
import ulohazadaninode from './UlohaZadaniNode.vue' |
|||
import ulohavzoraknode from './UlohaVzorakNode.vue' |
|||
|
|||
|
|||
export default { |
|||
name: 'TreeNode', |
|||
components: { |
|||
rocniknode, |
|||
cislonode, |
|||
temavcislenode, |
|||
castnode, |
|||
textnode, |
|||
ulohazadaninode, |
|||
ulohavzoraknode, |
|||
}, |
|||
data: () => ({ |
|||
debugShow: false, |
|||
}), |
|||
props: { |
|||
item: Object |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
h3 { |
|||
margin: 40px 0 0; |
|||
} |
|||
ul { |
|||
/* list-style-type: none;*/ |
|||
padding: 0; |
|||
} |
|||
li { |
|||
/*display: inline-block;*/ |
|||
margin: 0 10px; |
|||
} |
|||
a { |
|||
color: #42b983; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,15 @@ |
|||
<template> |
|||
<div class="ulohavzoraknode"> |
|||
<!--pre>UlohaVzorakNode {{item}} {{typeof(item)}}</pre--> |
|||
<h5>Řešení {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'UlohaVzorakNode', |
|||
props: { |
|||
item: Object |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,15 @@ |
|||
<template> |
|||
<div class="ulohazadaninode"> |
|||
<!--pre>UlohaZadaniNode {{item.node.uloha}} {{typeof(item)}}</pre--> |
|||
<h5>Zadání {{item.node.uloha.cislo_zadani.poradi}}.{{ item.node.uloha.kod }}: {{ item.node.uloha.nazev }}</h5> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'UlohaZadaniNode', |
|||
props: { |
|||
item: Object |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,10 @@ |
|||
import Vue from 'vue' |
|||
import App from './App.vue' |
|||
import CKEditor from '@ckeditor/ckeditor5-vue' |
|||
|
|||
Vue.config.productionTip = false |
|||
Vue.use(CKEditor); |
|||
|
|||
new Vue({ |
|||
render: h => h(App), |
|||
}).$mount('#app') |
|||
@ -0,0 +1,60 @@ |
|||
const BundleTracker = require("webpack-bundle-tracker"); |
|||
|
|||
const pages = { |
|||
'vue_app_01': { |
|||
entry: './src/main.js', |
|||
chunks: ['chunk-vendors'] |
|||
}, |
|||
'vue_app_02': { |
|||
entry: './src/newhampshir.js', |
|||
chunks: ['chunk-vendors'] |
|||
}, |
|||
} |
|||
|
|||
module.exports = { |
|||
pages: pages, |
|||
filenameHashing: false, |
|||
productionSourceMap: false, |
|||
publicPath: process.env.NODE_ENV === 'production' |
|||
? '/static/seminar/vue/' |
|||
: 'http://localhost:8080/', |
|||
outputDir: '../seminar/static/seminar/vue/', |
|||
|
|||
chainWebpack: config => { |
|||
|
|||
config.optimization |
|||
.splitChunks({ |
|||
cacheGroups: { |
|||
vendor: { |
|||
test: /[\\/]node_modules[\\/]/, |
|||
name: "chunk-vendors", |
|||
chunks: "all", |
|||
priority: 1 |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
Object.keys(pages).forEach(page => { |
|||
config.plugins.delete(`html-${page}`); |
|||
config.plugins.delete(`preload-${page}`); |
|||
config.plugins.delete(`prefetch-${page}`); |
|||
}) |
|||
|
|||
config |
|||
.plugin('BundleTracker') |
|||
.use(BundleTracker, [{filename: '../vue_frontend/webpack-stats.json'}]); |
|||
|
|||
config.resolve.alias |
|||
.set('__STATIC__', 'static') |
|||
|
|||
config.devServer |
|||
.public('http://localhost:8080') |
|||
.host('localhost') |
|||
.port(8080) |
|||
.hotOnly(true) |
|||
.watchOptions({poll: 1000}) |
|||
.https(false) |
|||
.headers({"Access-Control-Allow-Origin": ["*"]}) |
|||
|
|||
} |
|||
}; |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue