diff --git a/resources/js/panel/panel.vue b/resources/js/panel/panel.vue
index 36e9c07..d97beb4 100644
--- a/resources/js/panel/panel.vue
+++ b/resources/js/panel/panel.vue
@@ -48,7 +48,7 @@
Date | ID | Name | Status | Quantity |
-
+
{{order.updated_at}} |
{{order.id}} |
{{order.service.name}} |
@@ -59,8 +59,9 @@
-
-
+
+ {{historyPage}}/{{Math.ceil(orders.length/10)}}
+
@@ -83,8 +84,19 @@ function toggleOrderItem(event) {
event.target.parentNode.parentNode.classList.toggle('selected')
}
-function logout(event) {
- event.target.parentNode.parentNode.classList.toggle('selected')
+function moveHistory(forward) {
+ if (forward) {
+ this.historyPage += 1
+ } else {
+ this.historyPage -= 1
+ }
+ if (this.historyPage < 1) {
+ this.historyPage = 1
+ return
+ } else if (this.historyPage > this.orders.length/10+1) {
+ this.historyPage -= 1
+ return
+ }
}
export default {
@@ -93,8 +105,8 @@ export default {
},
data() {
return {active: window.location.hash, user: '',
- token: '', orders: ''}
+ token: '', orders: '', historyPage: 1}
},
- methods: {togglePending, toggleOrderItem}
+ methods: {togglePending, toggleOrderItem, moveHistory}
}
diff --git a/resources/scss/main.scss b/resources/scss/main.scss
index 8f1040e..8679f18 100644
--- a/resources/scss/main.scss
+++ b/resources/scss/main.scss
@@ -853,12 +853,36 @@ main.panel {
}
.history-pane {
- table {
- overflow: scroll;
+ overflow: visible;
+ transition: all 0.2s;
+ .nav-btn {
+ width: 1.5em;
+ transform: translateY(1.5em);
+
}
- thead {
- // display: block;
+ .nav-btn.right {
+ bottom: 0px;
+ right: 1em;
+ position: absolute;
+ display: block;
+ margin-left: auto;
}
+ .nav-btn.left {
+ bottom: 0px;
+ left: 1em;
+ position: absolute;
+ display: block;
+ margin-right: auto;
+ }
+ .nav-legend {
+ color: grey;
+ transform: translateX(-1.5em);
+ text-align: center;
+ position: absolute;
+ width: 3em;
+ left: 50%;
+ }
+
}
.actions {