My SMM panel
 
 
 
 
 
 

189 line
6.1 KiB

  1. <template>
  2. <sidebar :active="active"></sidebar>
  3. <transition name="fade" mode="out-in">
  4. <div v-if="active === ''" id="main">
  5. <section class="welcome-pane"><h3>Welcome, {{user.name}}!</h3></section>
  6. <section class="credits-pane"><img src="../../images/wallet2.svg" alt="wallet" class="icon"/><p>Credits: ${{user.credits}}</p></section>
  7. <section class="alerts-pane"><h4>News and Announcements</h4>
  8. <p>We've just launched. Thanks for joining us.</p>
  9. </section>
  10. <section class="recent-pane"><h4>Recent Activity</h4>
  11. <table>
  12. <thead><th>Date</th><th>Name</th><th>Status</th> <th>Quantity</th></thead>
  13. <tbody>
  14. <tr v-bind:key='order.id' v-for='order in orders.slice(0, 10)'>
  15. <template v-if="order.status != 'pending'">
  16. <td>{{order.updated_at}}</td>
  17. <td>{{order.service.name}}</td>
  18. <td :class="order.status"
  19. class="status"><span>{{order.status.charAt(0).toUpperCase() +
  20. order.status.slice(1)}}</span></td>
  21. <td>{{order.quantity}}</td>
  22. </template>
  23. </tr>
  24. </tbody>
  25. </table>
  26. </section>
  27. </div>
  28. <div v-else-if="active === '#orders'" id="main">
  29. <div class="actions"><a class="new-order" href="#orders/new">New</a></div>
  30. <section class="pending-pane">
  31. <h4>Pending Orders</h4>
  32. <ul>
  33. <template v-bind:key='order.id' v-for="order in orders">
  34. <div class="pending-item" v-if="order.status == 'pending'">
  35. <div class="pending-heading">
  36. <li @click="togglePending($event)">{{order.service.name}} ({{order.updated_at}})</li>
  37. <img class="chevron" src="../../images/chevron-down.svg" alt="">
  38. </div>
  39. <div class="pending-content">
  40. <p>ID: {{order.id}}<br>URL: {{order.url}}<br>Quantity: {{order.quantity}}<br>Note: {{order.note}}</p>
  41. </div>
  42. </div>
  43. </template>
  44. </ul>
  45. </section>
  46. <section class="history-pane">
  47. <h4>Order History</h4>
  48. <table>
  49. <thead><th>Date</th><th>ID</th><th>Name</th><th>Status</th> <th>Quantity</th></thead>
  50. <tbody>
  51. <tr @click="toggleOrderItem($event)" v-bind:key='order.id' v-for='order in orders.slice(historyPage*10-10, historyPage*10)'>
  52. <td>{{order.updated_at}}</td>
  53. <td>{{order.id}}</td>
  54. <td>{{order.service.name}}</td>
  55. <td :class="order.status"
  56. class="status"><span>{{order.status.charAt(0).toUpperCase() +
  57. order.status.slice(1)}}</span></td>
  58. <td>{{order.quantity}}</td>
  59. </tr>
  60. </tbody>
  61. </table>
  62. <img @click="moveHistory(false)" class="nav-btn left" src="../../images/arrow-left-circle-fill.svg" alt="">
  63. <p class="nav-legend">{{historyPage}}/{{Math.ceil(orders.length/10)}}</p>
  64. <img @click="moveHistory(true)" class="nav-btn right" src="../../images/arrow-right-circle-fill.svg" alt="">
  65. </section>
  66. </div>
  67. <div id="main" v-else-if="active === '#exit'">
  68. <section class="logout-pane">
  69. <h3>Are you sure you want to logout?</h3>
  70. <a href="/logout">Logout</a>
  71. </section>
  72. </div>
  73. <div class="settings-page" id="main" v-else-if="active === '#settings'">
  74. <section class="change-name-pane">
  75. <h3>Settings</h3>
  76. <h4>Name</h4>
  77. <input :value="user.name" name="name" id="changed_name" type="text">
  78. <button @click="changeName">Save <loading src="../../images/loading-white.svg" alt=""></loading></button>
  79. <span></span>
  80. </section>
  81. <section class="change-email-pane">
  82. <h4>Email</h4>
  83. <input :value="user.email" name="email" type="text" id="changed_email">
  84. <button @click="changeEmail">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
  85. <span></span>
  86. </section>
  87. <section class="change-password-pane">
  88. <h4>Change Password</h4>
  89. <h5>Current Password</h5><input name="current_passowrd" id="current_password" type="password">
  90. <h5>New Password</h5><input id="changed_password" name="passowrd" type="password">
  91. <h5>Confirm Password</h5><input id="confirm_password" name="confirm_passowrd" type="password">
  92. <button @click="changePassword">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
  93. <span></span>
  94. </section>
  95. </div>
  96. </transition>
  97. </template>
  98. <script>
  99. import Sidebar from './sidebar.vue'
  100. import Loading from '../icons/loading.vue'
  101. function togglePending(event) {
  102. event.target.parentNode.parentNode.classList.toggle('selected')
  103. }
  104. function toggleOrderItem(event) {
  105. event.target.parentNode.parentNode.classList.toggle('selected')
  106. }
  107. function moveHistory(forward) {
  108. if (forward) {
  109. this.historyPage += 1
  110. } else {
  111. this.historyPage -= 1
  112. }
  113. if (this.historyPage < 1) {
  114. this.historyPage = 1
  115. return
  116. } else if (this.historyPage > this.orders.length/10+1) {
  117. this.historyPage -= 1
  118. return
  119. }
  120. }
  121. function changeName() {
  122. let name = document.getElementById('changed_name').value
  123. let info = document.querySelector('.change-name-pane span')
  124. let pane = document.querySelector('.change-name-pane')
  125. pane.classList.add('loading')
  126. fetch("/panel/change-name", {
  127. method: 'POST',
  128. headers: {'Content-Type': 'application/json',
  129. 'Accept': 'application/json',
  130. 'X-XSRF-TOKEN': this.token},
  131. body: JSON.stringify({'name': name}),
  132. }).then(response => {
  133. if (response.ok) {
  134. response.json().then(data => {this.user = data})
  135. pane.classList.add('completed')
  136. info.textContent = 'Completed'
  137. } else {
  138. pane.classList.add('error')
  139. info.textContent = 'Error:' + response.status
  140. }
  141. pane.classList.remove('loading')
  142. })
  143. }
  144. function changeEmail() {
  145. let email = document.getElementById('changed_email').value
  146. let info = document.querySelector('.change-email-pane span')
  147. let pane = document.querySelector('.change-email-pane')
  148. pane.classList.add('loading')
  149. fetch("/panel/change-name", {
  150. method: 'POST',
  151. headers: {'Content-Type': 'application/json',
  152. 'Accept': 'application/json',
  153. 'X-XSRF-TOKEN': this.token},
  154. body: JSON.stringify({'email': email}),
  155. }).then(response => {
  156. if (response.ok) {
  157. response.json().then(data => {this.user = data})
  158. pane.classList.add('completed')
  159. info.textContent = 'Completed'
  160. } else {
  161. pane.classList.add('error')
  162. info.textContent = 'Error:' + response.status
  163. }
  164. pane.classList.remove('loading')
  165. })
  166. }
  167. export default {
  168. components: {
  169. Sidebar, Loading
  170. },
  171. data() {
  172. return {active: window.location.hash, user: '',
  173. token: '', orders: '', historyPage: 1}
  174. },
  175. methods: {togglePending, toggleOrderItem, moveHistory, changeName, changeEmail}
  176. }
  177. </script>