Ohm-Management - Projektarbeit B-ME
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

profilCard.js 3.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. Vue.component('profil-card', {
  2. template: `
  3. <div class="profil-card card">
  4. <img class="prof-image" src="img/profil_icon.png" alt="Card image cap">
  5. <div class="logout-item" style="float: right;">
  6. <b-button type="button" class="btn btn-primary" data-dismiss="modal" @click.prevent="logout">
  7. <i class="material-icons" style="float: left; margin: -0.1rem 0.2rem 0 -0.2rem;" @click.prevent="logout">exit_to_app</i>
  8. Logout</b-button>
  9. </div>
  10. <div class="profil-text">
  11. <span style="font-size:120%; display:inline-block; margin: 0.8rem 0 0 0;"><b>{{ auth.name }}</b></span><br><br>
  12. <span style="font-size:90%; display:inline-block; margin: 0 0 0.8rem 0;"><b>{{ major }}</b></span>
  13. <br><br>
  14. </div>
  15. <hr class="first">
  16. <div class="btnprofil">
  17. <button @click="isCardModalActive = true"><b>Abonniert: <br/>{{ abos }}</b> <br/></button>
  18. <button @click="$router.push('/bookmark')"><b>Gespeichert:<br/> {{ bookmarks }}</b><br/></button>
  19. </div>
  20. <section>
  21. <b-modal :active.sync="isCardModalActive" :width="600" scroll="keep">
  22. <div class="card">
  23. <header class="modal-card-head">
  24. <p class="modal-card-title">Abonnierte Tags</p>
  25. </header>
  26. <div class="card-content">
  27. <div class="content">
  28. <ul>
  29. <li></li>
  30. <li></li>
  31. <li></li>
  32. <li></li>
  33. <li></li>
  34. <li></li>
  35. <li></li>
  36. </ul>
  37. </div>
  38. </div>
  39. <footer class="modal-card-foot">
  40. <b-button size="is-medium" @click="isCardModalActive = false">Close</b-button>
  41. </footer>
  42. </div>
  43. </b-modal>
  44. </section>
  45. </div>`,
  46. data: function () {
  47. return {
  48. auth: auth,
  49. abos: auth.abos ? auth.abos.length : '-',
  50. bookmarks: auth.bookmarks ? auth.bookmarks.length : '-',
  51. isCardModalActive: false,
  52. };
  53. },
  54. computed: {
  55. major: function() {
  56. // e.g. ST@B-ME;ST@EFI;
  57. var majorID = auth.type.split(';')[0].split('@')[1];
  58. //console.info(majorID);
  59. //console.info(majorList);
  60. var majorName = 'Studiengang Unbekannt';
  61. majorList.forEach(function(major) {
  62. if (major.id == majorID) {
  63. majorName = major.name;
  64. }
  65. });
  66. return majorName;
  67. },
  68. },
  69. methods: {
  70. logout: function() {
  71. clearAuthState();
  72. $.ajax({ url: "api/logout", method: "POST" });
  73. vueForceRender();
  74. router.push('/profil');
  75. },
  76. }
  77. });