API tools faq
paste
Advertisement
MarkUa

Уроки для курсу

MarkUa
Jul 1st, 2019
456
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Edit course content</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.css">
  10.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  11. <style>
  12.     body {
  13.     background-color: #ededed;
  14.     background-position: left top;
  15.     background-size: auto;
  16.     background-repeat: repeat;
  17.     background-attachment: scroll;
  18. }
  19. .tasks{
  20.    width: 100%;
  21.    max-width: 45rem;
  22.    padding: 1em;
  23.    margin: 1em auto;
  24.    overflow: auto;
  25.    background-color: white;
  26.    box-shadow: 0px 0.25rem 1rem rgba(0,0,0,0.25);
  27.    border: 1px solid #d2d1d1;
  28. }
  29. .tasks__list {
  30.    clear: both;
  31. }
  32. .tasks__item {
  33.    margin-bottom: 0.5em;
  34.    position: relative;
  35.  
  36. }
  37. .tasks__item__toggle {
  38.    cursor: pointer;
  39.    width: 100%;
  40.    text-align: left;
  41.    padding: 0.85em 2.25em 0.85em 1em;
  42.    background-color: rgba(0,0,0,0.05);
  43.    border: 1px solid rgba(0,0,0,0.1);
  44. }
  45. .tasks__item__toggle:hover {
  46.    background-color: rgba(0,0,0,0.1);
  47.    border-color: rgba(0,0,0,0.15);
  48. }
  49. .tasks__item__toggle--completed {
  50.    text-decoration: line-through;
  51.    background-color: rgba(0,128,0,0.15);
  52.    border-color: rgba(0,128,0,0.2);
  53. }
  54. .tasks__item__toggle--completed:hover {
  55.    background-color: rgba(0,128,0,0.25);
  56.    border-color: rgba(0,128,0,0.3);
  57. }
  58. .tasks__item__remove {
  59.    position: absolute;
  60.    height: 100%;
  61.    top: 50%;
  62.    right: 0;
  63.    -webkit-transform: translateY(-50%);
  64.           transform: translateY(-50%);
  65. }
  66.  
  67. .tasks__item__add {
  68.    position: absolute;
  69.    height: 100%;
  70.    top: 50%;
  71.    right: 40px;
  72.    -webkit-transform: translateY(-50%);
  73.           transform: translateY(-50%);
  74. }
  75.  
  76. .tasks__item__show {
  77.    position: absolute;
  78.    height: 100%;
  79.    top: 50%;
  80.    right: 85px;
  81.    -webkit-transform: translateY(-50%);
  82.           transform: translateY(-50%);
  83. }
  84. .tasks__item__create{
  85.     position: absolute;
  86.    height: 100%;
  87.    top: 50%;
  88.    right: 210px;
  89.    -webkit-transform: translateY(-50%);
  90.           transform: translateY(-50%);
  91. }
  92.  
  93. #ee{
  94.    position: absolute;
  95.    height: 100%;
  96.    top: 50%;
  97.    right: 150px;
  98.    -webkit-transform: translateY(-50%);
  99.           transform: translateY(-50%);
  100. }
  101.  
  102. .tasks__item__remove i {
  103.    vertical-align: middle;
  104. }
  105.  
  106. </style>
  107. </head>
  108. <body>
  109. <br>
  110.  
  111. <div id="app">
  112.    <task-list ref = "call_me" :tasks="tasks"></task-list>
  113. </div>
  114.  
  115. <template id="task-list">
  116.  
  117.    <section class="tasks">
  118.       <div class="tasks__new input-group">
  119.          <input type="text" placeholder="Lesson name" class="input-group-field" v-model="newTask" @keyup.enter ="addTask">
  120.          <span class="input-group-button">
  121.             <button class="button" @click="addTask">
  122.                <i class="fa fa-plus">Add</i>
  123.             </button>
  124.          </span>
  125.  
  126.       </div>
  127.          <textarea rows="4" type="text" placeholder="Lesson description" v-model="description" @keyup.enter ="addTask"> </textarea>
  128.       <ul class="tasks__list no-bullet">
  129.             <task-item  v-for="(task, index) in tasks"  @create_test="create_test_(index)"  @edit = "editTask(index)"  @add_lesson_content = "add_lesson_content_(index)"   @remove="removeTask(index)" @complete="completeTask(task)"  :task="task" :key ="task.id"></task-item>
  130.       </ul>
  131.    </section>
  132. </template>
  133.  
  134. <template id="task-item">
  135.  
  136.     <li class="tasks__item">
  137.  
  138.        <button :class="className">
  139.             <p > {% verbatim %}{{ task.title  }}{% endverbatim %}  </p>
  140.        </button>
  141.        <button class="tasks__item__create button alert" @click="$emit('create_test')">
  142.                <!-- <a><font color="FF00CC">Переглянути</font> </a> -->
  143.            <i >Tests</i>
  144.        </button>
  145.  
  146.         <button class="tasks__item__show button danger" @click="$emit('add_lesson_content')">
  147.                <!-- <a><font color="FF00CC">Переглянути</font> </a> -->
  148.            <i >Additional files</i>
  149.        </button>
  150.  
  151.         <button class="tasks__item__add button success" @click="$emit('edit')">
  152.            <i >Edit</i>
  153.        </button>
  154.  
  155.         <button class="tasks__item__remove button alert" @click="$emit('remove')">
  156.            <i class="fa fa-times"></i>
  157.        </button>
  158.  
  159.     </li>
  160. </template>
  161. <div class="container">
  162.   <!-- Modal -->
  163.     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"  aria-hidden="true">
  164.   <div class="modal-dialog" role="document">
  165.     <div class="modal-content">
  166.       <div class="modal-header">
  167.         <h5 class="modal-title" id="exampleModalLabel">    haha </h5>
  168.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  169.           <span aria-hidden="true">&times;</span>
  170.         </button>
  171.       </div>
  172.       <div class="modal-body">
  173.         <form>
  174.           <div class="form-group">
  175.             <label for="recipient-name" class="col-form-label">Lesson Name:</label>
  176.             <input type="text" class="form-control" id="Lesson_name" >
  177.               <input id="prodId" type="hidden">
  178.           </div>
  179.           <div class="form-group">
  180.             <label for="message-text" class="col-form-label">Description</label>
  181.             <textarea class="form-control" id="message-text"  ></textarea>
  182.           </div>
  183.         </form>
  184.       </div>
  185.       <div class="modal-footer">
  186.         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  187.         <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save()" >Save</button>
  188.       </div>
  189.     </div>
  190.   </div>
  191. </div>
  192.  
  193. </div>
  194. <script>
  195. function ff() {
  196.     alert("gggee")
  197. }
  198.  function f(title,description,index){
  199.      document.getElementById("message-text").value = description;
  200.        document.getElementById("Lesson_name").value = title;
  201.         document.getElementById("prodId").value = index;
  202.          $("#exampleModal").modal();
  203.     }
  204. function save(){
  205.        app.$refs.call_me.e();
  206.          app.$refs.call_me.save(document.getElementById("message-text").value , document.getElementById("Lesson_name").value,document.getElementById("prodId").value);
  207.  }
  208.  function r(){
  209.       document.getElementById("few").value = "Опис Уроку: " ;
  210.  }
  211. Vue.component('task-list', {
  212.   template: '#task-list',
  213.   props: {
  214.     tasks: [],
  215.       temp_description: "",
  216.       temp_title: ""
  217.   },
  218.   data() {
  219.     return {
  220.       newTask: '',
  221.         description: ''
  222.     };
  223.   },
  224.   created: function() {
  225.         $.ajax({
  226.     url: '',
  227.     type: 'get', // This is the default though, you don't actually need to always mention it
  228.     data: {
  229.           'title':  "",
  230.  
  231.             'csrfmiddlewaretoken': '{{ csrf_token }}'
  232.         },
  233.             success: function(data) {
  234.        this.tasks = data.lessons;
  235.     }.bind(this),
  236.     failure: function(data) {
  237.         alert('Got an error dude');
  238.     }
  239. })
  240.   } ,
  241.   methods: {
  242.       hello(){
  243.       },
  244.       add(){
  245.           this.tasks.push({
  246.           title: "haha",
  247.             description: "hih",
  248.         });
  249.       },
  250.     addTask() {
  251.       if (this.newTask) {
  252.         this.tasks.push({
  253.           title: this.newTask,
  254.             description: this.description,
  255.         });
  256.         $.ajax({
  257.     url: '',
  258.     type: 'get', // This is the default though, you don't actually need to always mention it
  259.     data: {
  260.           'title':  this.newTask,
  261.             'description': this.description,
  262.             'csrfmiddlewaretoken': '{{ csrf_token }}'
  263.         },
  264.             success: function(data) {
  265.         //alert(JSON.stringify(data));
  266.        this.tasks =   data.lessons;
  267.         location.reload();
  268.     }.bind(this),
  269.     failure: function(data) {
  270.         alert('Got an error dude');
  271.           alert(JSON.stringify(data))
  272.     }
  273. });
  274.         this.newTask = '';
  275.         this.description = '';
  276.       }
  277.     },
  278.     completeTask(task) {
  279.     },
  280.     removeTask(index) {
  281.         $.ajax({
  282.     url: '',
  283.     type: 'get', // This is the default though, you don't actually need to always mention it
  284.     data: {
  285.           'title':  this.tasks[index]["title"],
  286.             'description': this.tasks[index]["description"],
  287.             'remove': 'true',
  288.         'csrfmiddlewaretoken': '{{ csrf_token }}'
  289.         },
  290.             success: function(data) {
  291.          location.reload();
  292.     }.bind(this),
  293.     failure: function(data) {
  294.         alert('Got an error dude');
  295.           alert(JSON.stringify(data))
  296.     }
  297. });
  298.     },
  299.     editTask(index) {
  300.  
  301.           this.temp_title = this.tasks[index].title;
  302.           this.temp_description = this.tasks[index].description;
  303.             alert(this.temp_title +" "+this.temp_description );
  304.  
  305. f(this.tasks[index].title ,this.tasks[index].description,index);
  306.  
  307.  
  308.     },
  309.       create_test_(index){
  310.             var lesson = this.tasks[index].title;
  311.          window.location = "{% url 'create_course_tests_for_lesson' 1234 123 %}".replace(/1234/,"{{course.name }}").replace(/123/, lesson);
  312.       },
  313.       e(){
  314.         alert("hello");
  315.       },
  316.  
  317.       show(index){
  318.  
  319.       },
  320.     add_lesson_content_(index){
  321.           var title = this.tasks[index].title;
  322.           var description = this.tasks[index].description;
  323.           document.location.href = course_name +"/lesson/"+ title + "/created-by/" + course_creator_name;
  324.     },
  325.     save(description,header,index){
  326.           $.ajax({
  327.             url: '',
  328.             type: 'get', // This is the default though, you don't actually need to always mention it
  329.             data: {
  330.                 'title':  this.temp_title,
  331.                 'description': this.temp_description,
  332.                 'new_title': header,
  333.                 'new_description': description,
  334.                 'csrfmiddlewaretoken': '{{ csrf_token }}'
  335.             },
  336.             success: function(data) {
  337.                 // alert("success");
  338.                 this.tasks =   data.lessons;
  339.                  location.reload();
  340.             }.bind(this),
  341.             failure: function(data) {
  342.                 alert('Got an error dude');
  343.                 alert(JSON.stringify(data))
  344.             }
  345.           })
  346.     }
  347.   }
  348. });
  349. Vue.component('task-item', {
  350.   template: '#task-item',
  351.   props: ['task'],
  352.   computed: {
  353.     className() {
  354.       let classes = ['tasks__item__toggle'];
  355.       if (this.task.completed) {
  356.         classes.push('tasks__item__toggle--completed');
  357.       }
  358.       return classes.join(' ');
  359.     }
  360.   }
  361. });
  362.     var app = new Vue({
  363.  
  364.         el: '#app',
  365.         data: {
  366.             tasks: []
  367.         }
  368.     });
  369. var course_creator_name= "{{course.course_creator.name }}";
  370. var course_name = "{{ course.name }}"
  371. </script>
  372. <style>
  373. </style>
  374. </body>
  375. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!