From 5cd4c92fd45a40de12ccd1b41c6ad542f4d478e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristian=20St=C3=B6ckel?= Date: Sat, 4 Jan 2025 00:56:32 +0100 Subject: [PATCH] mockup: status dashboard in vue --- package-lock.json | 100 +++++++++ package.json | 1 + resources/js/app.js | 7 + resources/views/dashboard.blade.php | 5 +- resources/vue/components/status/Dashboard.vue | 40 ++++ .../vue/components/status/StatusCard.vue | 189 ++++++++++++++++++ 6 files changed, 340 insertions(+), 2 deletions(-) create mode 100644 resources/vue/components/status/Dashboard.vue create mode 100644 resources/vue/components/status/StatusCard.vue diff --git a/package-lock.json b/package-lock.json index 5bec6f3ed..5681d5e3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "apexcharts": "^4.1.0", "autoprefixer": "^10.4.20", "awesomplete": "^1.1.5", + "axios": "^1.7.9", "bootstrap-cookie-alert": "^1.2.1", "chart.js": "^2.9.4", "croppie": "^2.6.5", @@ -1845,6 +1846,12 @@ "dev": true, "license": "MIT" }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, "node_modules/autoprefixer": { "version": "10.4.20", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz", @@ -1888,6 +1895,17 @@ "integrity": "sha512-hwClzFReIIfheoMWpoJ7juLp1o6Q7YjTtEdZIGfXvhRHA9ewKM03VS4ZoK+OEFIKM066PfQt9pzRIGV1TguRBw==", "license": "MIT" }, + "node_modules/axios": { + "version": "1.7.9", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz", + "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -2129,6 +2147,18 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "license": "MIT" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -2285,6 +2315,15 @@ "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==", "license": "MIT" }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/destr": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.3.tgz", @@ -2499,6 +2538,26 @@ "node": ">=8" } }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/foreground-child": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", @@ -2516,6 +2575,20 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/form-data": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz", + "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fraction.js": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", @@ -3046,6 +3119,27 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mimic-fn": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", @@ -3624,6 +3718,12 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "license": "MIT" }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", diff --git a/package.json b/package.json index 104b1d797..422109490 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "apexcharts": "^4.1.0", "autoprefixer": "^10.4.20", "awesomplete": "^1.1.5", + "axios": "^1.7.9", "bootstrap-cookie-alert": "^1.2.1", "chart.js": "^2.9.4", "croppie": "^2.6.5", diff --git a/resources/js/app.js b/resources/js/app.js index e8f4fcec5..64a38aa9b 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -15,6 +15,7 @@ import "./components/maps"; import CheckinSuccessHelper from "../vue/components/CheckinSuccessHelper.vue"; import {i18nVue} from "laravel-vue-i18n"; import TagHelper from "../vue/components/TagHelper.vue"; +import Dashboard from "../vue/components/status/Dashboard.vue"; import TripCreationForm from "../vue/components/TripCreation/TripCreationForm.vue"; import {createPinia} from 'pinia' import piniaPluginPersistedsState from 'pinia-plugin-persistedstate' @@ -117,7 +118,13 @@ document.addEventListener("DOMContentLoaded", function () { app7.use(i18nVue, i18nOptions); app7.use(pinia); app7.mount("#settings-friend-checkin"); + } + if(document.getElementById('vue-container-admin-dashboard')) { + const app8 = createApp({}); + app8.component('dashboard', Dashboard); + app8.use(i18nVue, i18nOptions); + app8.mount('#vue-container-admin-dashboard'); } }); diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php index 014bd3edd..c020fb5d9 100644 --- a/resources/views/dashboard.blade.php +++ b/resources/views/dashboard.blade.php @@ -108,8 +108,9 @@ class="accordion-collapse collapse" @endif - @include('includes.statuses', ['statuses' => $statuses, 'showDates' => true]) - {{ $statuses->links() }} +
+ +
@if($showGlobalButton)
diff --git a/resources/vue/components/status/Dashboard.vue b/resources/vue/components/status/Dashboard.vue new file mode 100644 index 000000000..a1481c070 --- /dev/null +++ b/resources/vue/components/status/Dashboard.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/resources/vue/components/status/StatusCard.vue b/resources/vue/components/status/StatusCard.vue new file mode 100644 index 000000000..f1a52a305 --- /dev/null +++ b/resources/vue/components/status/StatusCard.vue @@ -0,0 +1,189 @@ + + + + +