API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 20th, 2019
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.81 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2.  
  3. <div>
  4. <nav aria-label="breadcrumb">
  5. <ol class="breadcrumb breadcrumb-alt bg-white px-4 push font-size-sm">
  6. <li class="breadcrumb-item">
  7. <a href="#">
  8. <i class="fa fa-school"></i>
  9. </a>
  10. </li>
  11. <li class="breadcrumb-item" aria-current="page">
  12. <a href="#">
  13. Modules
  14. </a>
  15. </li>
  16. <li class="breadcrumb-item active" aria-current="page">
  17. <div class="dropdown d-inline">
  18. <a href="javascript:void(0)" id="example-dropdown-folder-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  19. {{ module.name}} <i class="fa fa-angle-down ml-1"></i>
  20. </a>
  21. <div class="dropdown-menu font-size-sm" aria-labelledby="example-dropdown-folder-2" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 19px, 0px);">
  22. <a v-for="(m) in this.module.map.maps" class="dropdown-item" @click="openMap(m)">
  23. <i class="fa fa-folder mr-1"></i> {{ m.name }}
  24. </a>
  25. </div>
  26. </div>
  27. </li>
  28. <li class="breadcrumb-item" aria-current="page">
  29. <a href="#" @click="openMap(module.map)">
  30. Hoofdmap
  31. </a>
  32. </li>
  33. <li v-for="(bc) in breadcrumbs" class="breadcrumb-item" aria-current="page">
  34. <a href="#" @click="openMap(bc.id)">
  35. {{ bc.name }}
  36. </a>
  37. </li>
  38. </ol>
  39. </nav>
  40. <h2 class="content-heading border-black-op">
  41. <i class="far fa-fw fa-folder mr-1"></i> Mappen ({{ map.maps.length}})
  42. <div class="input-group col-xl-4" style="float: right;">
  43. <input placeholder="Map naam" type="text" class="form-control" v-model="mapNameInput">
  44. <button class="btn btn-primary" @click="addMap()">Toevoegen</button>
  45. </div>
  46. </h2>
  47. <div class="row items-push">
  48. <div v-for="(m) in map.maps" class="col-sm-6 col-md-4 col-xl-3 d-flex align-items-center">
  49. <div class="options-container fx-overlay-zoom-in w-100">
  50. <div class="options-item block block-rounded block-transparent mb-0">
  51. <div class="block-content text-center">
  52. <p class="mb-2">
  53. <i class="fa fa-folder fa-4x text-info"></i>
  54. </p>
  55. <p class="font-w600 font-size-lg mb-0">
  56. {{ m.name}}
  57. </p>
  58. <p class="font-size-sm text-muted">
  59. {{ m.maps.length }} Mappen
  60. </p>
  61. </div>
  62. </div>
  63. <div class="options-overlay rounded-lg bg-white-50">
  64. <div class="options-overlay-content">
  65. <div class="mb-3">
  66. <a class="btn btn-hero-light" @click="openMap(m)">
  67. <i class="fa fa-share text-primary mr-1"></i> Open
  68. </a>
  69. </div>
  70. <div class="btn-group">
  71. <a class="btn btn-sm btn-light" href="javascript:void(0)">
  72. <i class="fa fa-pencil-alt text-black mr-1"></i>
  73. </a>
  74. <button class="btn btn-sm btn-light" @click="deleteMap(m)">
  75. <i class="fa fa-trash text-danger mr-1"></i>
  76. </button>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. <h2 class="content-heading border-black-op">
  84. <i class="far fa-fw fa-file mr-1"></i> Leermiddelen ({{ map.resources.length }})
  85. </h2>
  86. <div class="row items-push">
  87. <div v-for="(resource) in map.resources" class="col-sm-6 col-md-4 col-xl-3 d-flex align-items-center">
  88. <div class="options-container w-100">
  89. <div class="options-item block block-rounded block-transparent mb-0">
  90. <div class="block-content text-center">
  91. <p class="mb-2 overflow-hidden">
  92. <i class="fa fa-fw fa-4x fa-file-powerpoint text-warning"></i>
  93. </p>
  94. <p class="font-w600 mb-0">
  95. {{ resource.name }}
  96. </p>
  97. <p class="font-size-sm text-muted">
  98. 4.5mb
  99. </p>
  100. </div>
  101. </div>
  102. <div class="options-overlay rounded-lg bg-white-50">
  103. <div class="options-overlay-content">
  104. <div class="mb-3">
  105. <a class="btn btn-hero-light" href="javascript:void(0)">
  106. <i class="fa fa-eye text-primary mr-1"></i> View
  107. </a>
  108. </div>
  109. <div class="btn-group">
  110. <a class="btn btn-sm btn-light" href="javascript:void(0)">
  111. <i class="fa fa-download text-black mr-1"></i>
  112. </a>
  113. <a class="btn btn-sm btn-light" href="javascript:void(0)">
  114. <i class="fa fa-trash text-danger mr-1"></i>
  115. </a>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123.  
  124. <!-- <div class="row">-->
  125. <!-- <div class="col-md-3">-->
  126. <!-- <div class="block block-rounded block-themed">-->
  127. <!-- <div class="block-header block-header-default">-->
  128. <!-- Mappen overzicht-->
  129. <!-- </div>-->
  130. <!-- <div class="block-content">-->
  131. <!-- <ul>-->
  132.  
  133. <!-- </ul>-->
  134. <!-- </div>-->
  135. <!-- </div>-->
  136. <!-- </div>-->
  137. <!-- <div class="col-md-9">-->
  138. <!-- <div class="block block-rounded">-->
  139. <!-- <div class="block-content">-->
  140. <!-- <div class="clearfix">-->
  141. <!-- <h5 class="float-left">Map naam</h5>-->
  142. <!-- <div class="float-right">-->
  143. <!-- <button class="btn btn-secondary btn-sm" @click="CreateMapForm('show')" v-if="this.create_map_visible == 0">Map toevoegen</button>-->
  144. <!-- <button class="btn btn-secondary btn-sm" @click="CreateMapForm('hide')" v-if="create_map_visible == 1">Map toevoegen verbergen</button>-->
  145. <!-- </div>-->
  146. <!-- </div>-->
  147. <!-- <div class="form-group pt-2" v-if="create_map_visible == 1">-->
  148. <!-- <div class="input-group">-->
  149. <!-- <input type="text" class="form-control form-control-sm" v-model="mapNameInput" placeholder="Map toevoegen">-->
  150. <!-- <div class="input-group-append">-->
  151. <!-- <button type="button" class="btn btn-secondary" @click="addMap()">Toevoegen</button>-->
  152. <!-- </div>-->
  153. <!-- </div>-->
  154. <!-- </div>-->
  155. <!-- <hr />-->
  156. <!-- <table class="table table-borderless table-striped table-vcenter">-->
  157. <!-- <thead class="bg-white">-->
  158. <!-- <tr class="text-uppercase font-size-sm">-->
  159. <!-- <th class="text-center" style="width: 50px;">Type</th>-->
  160. <!-- <th>Naam</th>-->
  161. <!-- <th class="text-center" style="width: 100px;">Acties</th>-->
  162. <!-- </tr>-->
  163. <!-- </thead>-->
  164. <!-- <tbody>-->
  165. <!-- <tr>-->
  166. <!-- <th class="text-center" scope="row">1</th>-->
  167. <!-- <td class="font-w600">-->
  168. <!-- <a href="be_pages_generic_profile.html">Jack Estrada</a>-->
  169. <!-- </td>-->
  170. <!-- <td class="text-center">-->
  171. <!-- <div class="btn-group">-->
  172. <!-- <button type="button" class="btn btn-sm btn-primary js-tooltip-enabled" data-toggle="tooltip" title="" data-original-title="Edit">-->
  173. <!-- <i class="fa fa-pencil-alt"></i>-->
  174. <!-- </button>-->
  175. <!-- <button type="button" class="btn btn-sm btn-primary js-tooltip-enabled" data-toggle="tooltip" title="" data-original-title="Delete">-->
  176. <!-- <i class="fa fa-times"></i>-->
  177. <!-- </button>-->
  178. <!-- </div>-->
  179. <!-- </td>-->
  180. <!-- </tr>-->
  181. <!-- </tbody>-->
  182. <!-- </table>-->
  183. <!-- </div>-->
  184. <!-- </div>-->
  185. <!-- </div>-->
  186. <!-- </div>-->
  187.  
  188. </template>
  189. <script>
  190. export default {
  191. props: ['moduleProp'],
  192. data() {
  193. return {
  194. module: this.moduleProp,
  195. map: this.moduleProp.map,
  196. create_map_visible: 0,
  197. mapNameInput: '',
  198. breadcrumbs: [],
  199. }
  200. },
  201. mounted() {
  202. this.updateBreadcrumb();
  203. },
  204. methods: {
  205. updateBreadcrumb()
  206. {
  207. while(map.map) {
  208. breadcrumbs.push({
  209. 'name': map.name,
  210. 'id': map.id,
  211. });
  212. }
  213. },
  214. openMap(map) {
  215.  
  216. // Make post request to server
  217. axios.get(`/staff/maps/` + map.id).then((response) => {
  218. this.map = response.data;
  219. }).catch(err => console.log(err));
  220.  
  221. this.updateBreadcrumb();
  222. },
  223. CreateMapForm(action) {
  224. switch(action) {
  225. case('show'):
  226.  
  227. this.create_map_visible = 1;
  228.  
  229. break;
  230. case('hide'):
  231.  
  232. this.create_map_visible = 0;
  233.  
  234. break;
  235. }
  236. },
  237. addMap() {
  238. // POST REQUEST
  239. axios.post(`/staff/maps/` + this.map.id + `/create`, {
  240. name: this.mapNameInput,
  241. }).then((response) => {
  242.  
  243. this.map = response.data;
  244. this.mapNameInput = '';
  245.  
  246. }).catch(err => console.log(err));
  247. },
  248. deleteMap(map) {
  249. swal({
  250. title: "Weet je het zeker?",
  251. text: "Eenmaal verwijderd kunt u \'"+ map.name +"\' niet terug halen.",
  252. icon: "warning",
  253. buttons: ["Annuleren", "Ok"],
  254. dangerMode: true,
  255. }).then((willDelete) => {
  256. if(willDelete) {
  257. axios.delete(`/staff/maps/` + map.id + `/delete`)
  258. .then((response) => {
  259. this.map = response.data;
  260.  
  261. swal({
  262. title: "Map verwijderd!",
  263. icon: "success",
  264. });
  265. }).catch((error) => {
  266. if(error) {
  267. console.log(error);
  268. }
  269. })
  270. }
  271. });
  272. }
  273. }
  274. }
  275. </script>
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!