test of vuejs
This commit is contained in:
parent
e4e3f51834
commit
99e3a9a9f4
|
|
@ -19,6 +19,7 @@ class AppKernel extends Kernel
|
|||
|
||||
// dependencies
|
||||
new FOS\RestBundle\FOSRestBundle(),
|
||||
new FOS\JsRoutingBundle\FOSJsRoutingBundle(),
|
||||
new JMS\SerializerBundle\JMSSerializerBundle(),
|
||||
new Nelmio\ApiDocBundle\NelmioApiDocBundle(),
|
||||
new Propel\Bundle\PropelBundle\PropelBundle(),
|
||||
|
|
|
|||
|
|
@ -9,10 +9,13 @@
|
|||
<body>
|
||||
{% block body %}{% endblock %}
|
||||
{% block javascripts %}
|
||||
<script type="text/javascript" src="{{ asset('components/marked/lib/marked.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('components/vue/dist/vue.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('components/vue-validator/dist/vue-validator.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('bundles/coursending/js/app.js') }}"></script>
|
||||
{% endblock %}
|
||||
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
|
||||
<script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('components/marked/lib/marked.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('components/vue/dist/vue.min.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('components/vue-validator/dist/vue-validator.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('components/vue-resource/dist/vue-resource.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset('bundles/coursending/js/app.js') }}"></script>
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block body %}
|
||||
<div id="wrapper">
|
||||
<div id="container">
|
||||
<div id="welcome">
|
||||
<h1><span>Welcome to</span> Symfony {{ constant('Symfony\\Component\\HttpKernel\\Kernel::VERSION') }}</h1>
|
||||
</div>
|
||||
|
||||
<div id="status">
|
||||
<p>
|
||||
<svg id="icon-status" width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" fill="#759E1A"/></svg>
|
||||
|
||||
Your application is now ready. You can start working on it at:
|
||||
<code>{{ base_dir }}/</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="next">
|
||||
<h2>What's next?</h2>
|
||||
<p>
|
||||
<svg id="icon-book" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="-12.5 9 64 64" enable-background="new -12.5 9 64 64" xml:space="preserve">
|
||||
<path fill="#AAA" d="M6.8,40.8c2.4,0.8,4.5-0.7,4.9-2.5c0.2-1.2-0.3-2.1-1.3-3.2l-0.8-0.8c-0.4-0.5-0.6-1.3-0.2-1.9
|
||||
c0.4-0.5,0.9-0.8,1.8-0.5c1.3,0.4,1.9,1.3,2.9,2.2c-0.4,1.4-0.7,2.9-0.9,4.2l-0.2,1c-0.7,4-1.3,6.2-2.7,7.5
|
||||
c-0.3,0.3-0.7,0.5-1.3,0.6c-0.3,0-0.4-0.3-0.4-0.3c0-0.3,0.2-0.3,0.3-0.4c0.2-0.1,0.5-0.3,0.4-0.8c0-0.7-0.6-1.3-1.3-1.3
|
||||
c-0.6,0-1.4,0.6-1.4,1.7s1,1.9,2.4,1.8c0.8,0,2.5-0.3,4.2-2.5c2-2.5,2.5-5.4,2.9-7.4l0.5-2.8c0.3,0,0.5,0.1,0.8,0.1
|
||||
c2.4,0.1,3.7-1.3,3.7-2.3c0-0.6-0.3-1.2-0.9-1.2c-0.4,0-0.8,0.3-1,0.8c-0.1,0.6,0.8,1.1,0.1,1.5c-0.5,0.3-1.4,0.6-2.7,0.4l0.3-1.3
|
||||
c0.5-2.6,1-5.7,3.2-5.8c0.2,0,0.8,0,0.8,0.4c0,0.2,0,0.2-0.2,0.5c-0.2,0.3-0.3,0.4-0.2,0.7c0,0.7,0.5,1.1,1.2,1.1
|
||||
c0.9,0,1.2-1,1.2-1.4c0-1.2-1.2-1.8-2.6-1.8c-1.5,0.1-2.8,0.9-3.7,2.1c-1.1,1.3-1.8,2.9-2.3,4.5c-0.9-0.8-1.6-1.8-3.1-2.3
|
||||
c-1.1-0.7-2.3-0.5-3.4,0.3c-0.5,0.4-0.8,1-1,1.6c-0.4,1.5,0.4,2.9,0.8,3.4l0.9,1c0.2,0.2,0.6,0.8,0.4,1.5c-0.3,0.8-1.2,1.3-2.1,1
|
||||
c-0.4-0.2-1-0.5-0.9-0.9c0.1-0.2,0.2-0.3,0.3-0.5s0.1-0.3,0.1-0.3c0.2-0.6-0.1-1.4-0.7-1.6c-0.6-0.2-1.2,0-1.3,0.8
|
||||
C4.3,38.4,4.7,40,6.8,40.8z M46.1,20.9c0-4.2-3.2-7.5-7.1-7.5h-3.8C34.8,10.8,32.7,9,30.2,9L-2.3,9.1c-2.8,0.1-4.9,2.4-4.9,5.4
|
||||
L-7,58.6c0,4.8,8.1,13.9,11.6,14.1l34.7-0.1c3.9,0,7-3.4,7-7.6L46.1,20.9z M-0.3,36.4c0-8.6,6.5-15.6,14.5-15.6
|
||||
c8,0,14.5,7,14.5,15.6S22.1,52,14.2,52C6.1,52-0.3,45-0.3,36.4z M42.1,65.1c0,1.8-1.5,3.1-3.1,3.1H4.6c-0.7,0-3-1.8-4.5-4.4h30.4
|
||||
c2.8,0,5-2.4,5-5.4V17.9h3.7c1.6,0,2.9,1.4,2.9,3.1V65.1L42.1,65.1z"/>
|
||||
</svg>
|
||||
|
||||
Read the documentation to learn
|
||||
<a href="http://symfony.com/doc/{{ constant('Symfony\\Component\\HttpKernel\\Kernel::VERSION')[:3] }}/book/page_creation.html">
|
||||
How to create your first page in Symfony
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
<style>
|
||||
body { background: #F5F5F5; font: 18px/1.5 sans-serif; }
|
||||
h1, h2 { line-height: 1.2; margin: 0 0 .5em; }
|
||||
h1 { font-size: 36px; }
|
||||
h2 { font-size: 21px; margin-bottom: 1em; }
|
||||
p { margin: 0 0 1em 0; }
|
||||
a { color: #0000F0; }
|
||||
a:hover { text-decoration: none; }
|
||||
code { background: #F5F5F5; max-width: 100px; padding: 2px 6px; word-wrap: break-word; }
|
||||
#wrapper { background: #FFF; margin: 1em auto; max-width: 800px; width: 95%; }
|
||||
#container { padding: 2em; }
|
||||
#welcome, #status { margin-bottom: 2em; }
|
||||
#welcome h1 span { display: block; font-size: 75%; }
|
||||
#icon-status, #icon-book { float: left; height: 64px; margin-right: 1em; margin-top: -4px; width: 64px; }
|
||||
#icon-book { display: none; }
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#wrapper { width: 80%; margin: 2em auto; }
|
||||
#icon-book { display: inline-block; }
|
||||
#status a, #next a { display: block; }
|
||||
|
||||
@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
|
||||
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
|
||||
.sf-toolbar { opacity: 0; -webkit-animation: fade-in 1s .2s forwards; animation: fade-in 1s .2s forwards;}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
@ -79,3 +79,8 @@ propel:
|
|||
dsn: %database_driver%:host=%database_host%;dbname=%database_name%;charset=UTF8
|
||||
options: {}
|
||||
attributes: {}
|
||||
|
||||
fos_js_routing:
|
||||
routes_to_expose:
|
||||
- api_get_forms
|
||||
- api_get_questions
|
||||
|
|
|
|||
|
|
@ -10,3 +10,6 @@ CoursEndingBundle:
|
|||
NelmioApiDocBundle:
|
||||
resource: "@NelmioApiDocBundle/Resources/config/routing.yml"
|
||||
prefix: /api/doc
|
||||
|
||||
FOSJsRouting:
|
||||
resource: "@FOSJsRoutingBundle/Resources/config/routing/routing.xml"
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
"dependencies": {
|
||||
"vue": "~1.0.18",
|
||||
"vue-validator": "~1.4.4",
|
||||
"marked": "~0.3.5"
|
||||
"marked": "~0.3.5",
|
||||
"vue-resource": "~0.7.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@
|
|||
"jms/serializer-bundle": "dev-master",
|
||||
"nelmio/api-doc-bundle": "^2.11",
|
||||
"propel/propel": "dev-master",
|
||||
"propel/propel-bundle": "2.0.x-dev"
|
||||
"propel/propel-bundle": "2.0.x-dev",
|
||||
"friendsofsymfony/jsrouting-bundle": "^1.6"
|
||||
},
|
||||
"require-dev": {
|
||||
"sensio/generator-bundle": "~3.0",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,9 @@ use CoursEndingBundle\Model\FormQuery;
|
|||
use CoursEndingBundle\Model\QuestionQuery;
|
||||
use CoursEndingBundle\DataRestContainer;
|
||||
|
||||
/**
|
||||
* @author Simon Vieille <simon@deblan.fr>
|
||||
*/
|
||||
class RestController extends FOSRestController
|
||||
{
|
||||
/**
|
||||
|
|
@ -27,7 +30,7 @@ class RestController extends FOSRestController
|
|||
|
||||
return $container;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @Rest\View
|
||||
* @ApiDoc(
|
||||
|
|
@ -38,7 +41,9 @@ class RestController extends FOSRestController
|
|||
{
|
||||
$data = QuestionQuery::create()->find()->getData();
|
||||
|
||||
return $data;
|
||||
$container = new DataRestContainer($data);
|
||||
|
||||
return $container;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -13,6 +13,16 @@ class DataRestContainer
|
|||
*/
|
||||
protected $count;
|
||||
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
protected $type;
|
||||
|
||||
/**
|
||||
* @var string
|
||||
*/
|
||||
protected $class;
|
||||
|
||||
/**
|
||||
* @var mixed
|
||||
*/
|
||||
|
|
@ -50,6 +60,18 @@ class DataRestContainer
|
|||
return -1;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
public function type()
|
||||
{
|
||||
$this->type = gettype($this->data);
|
||||
|
||||
if ($this->type === 'object') {
|
||||
$this->class = get_class($this->data);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param mixed $data
|
||||
* @return DataRestContainer
|
||||
|
|
@ -59,6 +81,7 @@ class DataRestContainer
|
|||
$this->data = $data;
|
||||
|
||||
$this->count();
|
||||
$this->type();
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ use CoursEndingBundle\Model\Base\Form as BaseForm;
|
|||
use JMS\Serializer\Annotation\VirtualProperty;
|
||||
use Propel\Runtime\ActiveQuery\Criteria;
|
||||
use Propel\Runtime\Connection\ConnectionInterface;
|
||||
use CoursEndingBundle\DataRestContainer;
|
||||
|
||||
class Form extends BaseForm
|
||||
{
|
||||
|
|
@ -16,6 +17,16 @@ class Form extends BaseForm
|
|||
*/
|
||||
public function getQuestionsRest()
|
||||
{
|
||||
return parent::getQuestions()->getData();
|
||||
return new DataRestContainer(parent::getQuestions()->getData());
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
* @JMS\Serializer\Annotation\SerializedName("created_at")
|
||||
* @JMS\Serializer\Annotation\VirtualProperty
|
||||
*/
|
||||
public function getCreatedAtRest()
|
||||
{
|
||||
return new DataRestContainer($this->getCreatedAt());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,19 @@
|
|||
new Vue({
|
||||
el: '#editor',
|
||||
data: {
|
||||
input: '# hello'
|
||||
},
|
||||
filters: {
|
||||
marked: marked
|
||||
}
|
||||
el: '#forms',
|
||||
|
||||
data: {
|
||||
forms: []
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.fetchForms();
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchForms: function() {
|
||||
this.$http.get(Routing.generate('api_get_forms'), function(forms) {
|
||||
this.$set('forms', forms.data);
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,44 +1,18 @@
|
|||
{% extends '::base.html.twig' %}
|
||||
|
||||
{% block body %}
|
||||
<style type="text/css">
|
||||
html, body, #editor {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
textarea, #editor div {
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
border: none;
|
||||
border-right: 1px solid #ccc;
|
||||
resize: none;
|
||||
outline: none;
|
||||
background-color: #f6f6f6;
|
||||
font-size: 14px;
|
||||
font-family: 'Monaco', courier, monospace;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #f66;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div id="editor">
|
||||
<textarea v-model="input" debounce="300"></textarea>
|
||||
<div v-html="input | marked"></div>
|
||||
<div id="forms" class="collection">
|
||||
<div class="collection-item" v-for="form in forms">
|
||||
{% raw %}
|
||||
<div class="collection-item-title">
|
||||
{{ form.label }}
|
||||
</div>
|
||||
<div class="collection-item-content">
|
||||
{{ form.active ? 'ACTVITÉ' : 'NON ACTIVÉ' }}
|
||||
</div>
|
||||
{% endraw %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue