diff --git a/frontend/src/components/Breadcrumb/Breadcrumb.vue b/frontend/src/components/Breadcrumb/Breadcrumb.vue deleted file mode 100644 index 795816884..000000000 --- a/frontend/src/components/Breadcrumb/Breadcrumb.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - diff --git a/frontend/src/components/Breadcrumb/BreadcrumbItem.vue b/frontend/src/components/Breadcrumb/BreadcrumbItem.vue deleted file mode 100644 index 2bf5a8c6c..000000000 --- a/frontend/src/components/Breadcrumb/BreadcrumbItem.vue +++ /dev/null @@ -1,18 +0,0 @@ - - - diff --git a/frontend/src/components/Breadcrumb/RouteBreadcrumb.vue b/frontend/src/components/Breadcrumb/RouteBreadcrumb.vue deleted file mode 100644 index bd378f312..000000000 --- a/frontend/src/components/Breadcrumb/RouteBreadcrumb.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - - - diff --git a/frontend/src/components/ButtonCheckbox.vue b/frontend/src/components/ButtonCheckbox.vue deleted file mode 100644 index e408c69a2..000000000 --- a/frontend/src/components/ButtonCheckbox.vue +++ /dev/null @@ -1,38 +0,0 @@ - - - diff --git a/frontend/src/components/ButtonRadioGroup.vue b/frontend/src/components/ButtonRadioGroup.vue deleted file mode 100644 index c757a50d8..000000000 --- a/frontend/src/components/ButtonRadioGroup.vue +++ /dev/null @@ -1,55 +0,0 @@ - - - diff --git a/frontend/src/components/Charts/BarChart.js b/frontend/src/components/Charts/BarChart.js deleted file mode 100644 index 057c31163..000000000 --- a/frontend/src/components/Charts/BarChart.js +++ /dev/null @@ -1,30 +0,0 @@ -import { Bar, mixins } from 'vue-chartjs' -import globalOptionsMixin from '@/components/Charts/globalOptionsMixin' - -export default { - name: 'bar-chart', - extends: Bar, - mixins: [mixins.reactiveProp, globalOptionsMixin], - props: { - extraOptions: { - type: Object, - default: () => ({}), - }, - }, - data() { - return { - ctx: null, - } - }, - mounted() { - this.$watch( - 'chartData', - (newVal, oldVal) => { - if (!oldVal) { - this.renderChart(this.chartData, this.extraOptions) - } - }, - { immediate: true }, - ) - }, -} diff --git a/frontend/src/components/Charts/LineChart.js b/frontend/src/components/Charts/LineChart.js deleted file mode 100644 index 81452f14d..000000000 --- a/frontend/src/components/Charts/LineChart.js +++ /dev/null @@ -1,29 +0,0 @@ -import { Line, mixins } from 'vue-chartjs' -import globalOptionsMixin from '@/components/Charts/globalOptionsMixin' -export default { - name: 'line-chart', - extends: Line, - mixins: [mixins.reactiveProp, globalOptionsMixin], - props: { - extraOptions: { - type: Object, - default: () => ({}), - }, - }, - data() { - return { - ctx: null, - } - }, - mounted() { - this.$watch( - 'chartData', - (newVal, oldVal) => { - if (!oldVal) { - this.renderChart(this.chartData, this.extraOptions) - } - }, - { immediate: true }, - ) - }, -} diff --git a/frontend/src/components/Charts/config.js b/frontend/src/components/Charts/config.js deleted file mode 100644 index 694a036b5..000000000 --- a/frontend/src/components/Charts/config.js +++ /dev/null @@ -1,234 +0,0 @@ -import { parseOptions } from '@/components/Charts/optionHelpers' -import Chart from 'chart.js' - -export const Charts = { - mode: 'light', // (themeMode) ? themeMode : 'light'; - fonts: { - base: 'Open Sans', - }, - colors: { - gray: { - 100: '#f6f9fc', - 200: '#e9ecef', - 300: '#dee2e6', - 400: '#ced4da', - 500: '#adb5bd', - 600: '#8898aa', - 700: '#525f7f', - 800: '#32325d', - 900: '#212529', - }, - theme: { - default: '#172b4d', - primary: '#5e72e4', - secondary: '#f4f5f7', - info: '#11cdef', - success: '#2dce89', - danger: '#f5365c', - warning: '#fb6340', - }, - black: '#12263F', - white: '#FFFFFF', - transparent: 'transparent', - }, -} - -function chartOptions() { - const { colors, mode, fonts } = Charts - // Options - const options = { - defaults: { - global: { - responsive: true, - maintainAspectRatio: false, - defaultColor: mode === 'dark' ? colors.gray[700] : colors.gray[600], - defaultFontColor: mode === 'dark' ? colors.gray[700] : colors.gray[600], - defaultFontFamily: fonts.base, - defaultFontSize: 13, - layout: { - padding: 0, - }, - legend: { - display: false, - position: 'bottom', - labels: { - usePointStyle: true, - padding: 16, - }, - }, - elements: { - point: { - radius: 0, - backgroundColor: colors.theme.primary, - }, - line: { - tension: 0.4, - borderWidth: 4, - borderColor: colors.theme.primary, - backgroundColor: colors.transparent, - borderCapStyle: 'rounded', - }, - rectangle: { - backgroundColor: colors.theme.warning, - }, - arc: { - backgroundColor: colors.theme.primary, - borderColor: mode === 'dark' ? colors.gray[800] : colors.white, - borderWidth: 4, - }, - }, - tooltips: { - enabled: true, - mode: 'index', - intersect: false, - }, - }, - pie: { - tooltips: { - mode: 'point', - }, - }, - doughnut: { - tooltips: { - mode: 'point', - }, - cutoutPercentage: 83, - legendCallback: function (chart) { - const data = chart.data - let content = '' - - data.labels.forEach(function (label, index) { - const bgColor = data.datasets[0].backgroundColor[index] - - content += '' - content += - '' - content += label - content += '' - }) - - return content - }, - }, - }, - } - - // yAxes - Chart.scaleService.updateScaleDefaults('linear', { - gridLines: { - borderDash: [2], - borderDashOffset: [2], - color: mode === 'dark' ? colors.gray[900] : colors.gray[200], - drawBorder: false, - drawTicks: true, - zeroLineWidth: 1, - zeroLineColor: mode === 'dark' ? colors.gray[900] : colors.gray[200], - zeroLineBorderDash: [2], - zeroLineBorderDashOffset: [2], - }, - ticks: { - beginAtZero: true, - padding: 10, - callback: function (value) { - if (!(value % 10)) { - return value - } - }, - }, - }) - - // xAxes - Chart.scaleService.updateScaleDefaults('category', { - gridLines: { - drawBorder: false, - drawOnChartArea: false, - drawTicks: false, - lineWidth: 1, - zeroLineWidth: 1, - }, - ticks: { - padding: 20, - }, - maxBarThickness: 10, - }) - - return options -} - -let initialized = false - -export function initGlobalOptions() { - if (initialized) { - return - } - parseOptions(Chart, chartOptions()) - initialized = true -} - -export const basicOptions = { - maintainAspectRatio: false, - legend: { - display: false, - }, - responsive: true, -} -export const blueChartOptions = { - scales: { - yAxes: [ - { - gridLines: { - color: Charts.colors.gray[700], - zeroLineColor: Charts.colors.gray[700], - }, - }, - ], - }, -} - -export const lineChartOptionsBlue = { - ...basicOptions, - tooltips: { - backgroundColor: '#f5f5f5', - titleFontColor: '#333', - bodyFontColor: '#666', - bodySpacing: 4, - xPadding: 12, - mode: 'nearest', - intersect: 0, - position: 'nearest', - }, - responsive: true, - scales: { - yAxes: [ - { - barPercentage: 1.6, - gridLines: { - drawBorder: false, - color: 'rgba(29,140,248,0.0)', - zeroLineColor: 'transparent', - }, - ticks: { - suggestedMin: 60, - suggestedMax: 125, - padding: 20, - fontColor: '#9e9e9e', - }, - }, - ], - - xAxes: [ - { - barPercentage: 1.6, - gridLines: { - drawBorder: false, - color: 'rgba(29,140,248,0.1)', - zeroLineColor: 'transparent', - }, - ticks: { - padding: 20, - fontColor: '#9e9e9e', - }, - }, - ], - }, -} diff --git a/frontend/src/components/Charts/globalOptionsMixin.js b/frontend/src/components/Charts/globalOptionsMixin.js deleted file mode 100644 index 323ac94e4..000000000 --- a/frontend/src/components/Charts/globalOptionsMixin.js +++ /dev/null @@ -1,7 +0,0 @@ -import { initGlobalOptions } from '@/components/Charts/config' -import './roundedCornersExtension' -export default { - mounted() { - initGlobalOptions() - }, -} diff --git a/frontend/src/components/Charts/optionHelpers.js b/frontend/src/components/Charts/optionHelpers.js deleted file mode 100644 index 5b4630b73..000000000 --- a/frontend/src/components/Charts/optionHelpers.js +++ /dev/null @@ -1,10 +0,0 @@ -// Parse global options -export function parseOptions(parent, options) { - for (const item in options) { - if (typeof options[item] !== 'object') { - parent[item] = options[item] - } else { - parseOptions(parent[item], options[item]) - } - } -} diff --git a/frontend/src/components/Charts/roundedCornersExtension.js b/frontend/src/components/Charts/roundedCornersExtension.js deleted file mode 100644 index 2ef8fd1d2..000000000 --- a/frontend/src/components/Charts/roundedCornersExtension.js +++ /dev/null @@ -1,126 +0,0 @@ -// -// Chart extension for making the bars rounded -// Code from: https://codepen.io/jedtrow/full/ygRYgo -// -import Chart from 'chart.js' -Chart.elements.Rectangle.prototype.draw = function () { - const ctx = this._chart.ctx - const vm = this._view - let left, right, top, bottom, signX, signY, borderSkipped - let borderWidth = vm.borderWidth - // Set Radius Here - // If radius is large enough to cause drawing errors a max radius is imposed - const cornerRadius = 6 - - if (!vm.horizontal) { - // bar - left = vm.x - vm.width / 2 - right = vm.x + vm.width / 2 - top = vm.y - bottom = vm.base - signX = 1 - signY = bottom > top ? 1 : -1 - borderSkipped = vm.borderSkipped || 'bottom' - } else { - // horizontal bar - left = vm.base - right = vm.x - top = vm.y - vm.height / 2 - bottom = vm.y + vm.height / 2 - signX = right > left ? 1 : -1 - signY = 1 - borderSkipped = vm.borderSkipped || 'left' - } - - // Canvas doesn't allow us to stroke inside the width so we can - // adjust the sizes to fit if we're setting a stroke on the line - if (borderWidth) { - // borderWidth shold be less than bar width and bar height. - const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom)) - borderWidth = borderWidth > barSize ? barSize : borderWidth - const halfStroke = borderWidth / 2 - // Adjust borderWidth when bar top position is near vm.base(zero). - const borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0) - const borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0) - const borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0) - const borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0) - // not become a vertical line? - if (borderLeft !== borderRight) { - top = borderTop - bottom = borderBottom - } - // not become a horizontal line? - if (borderTop !== borderBottom) { - left = borderLeft - right = borderRight - } - } - - ctx.beginPath() - ctx.fillStyle = vm.backgroundColor - ctx.strokeStyle = vm.borderColor - ctx.lineWidth = borderWidth - - // Corner points, from bottom-left to bottom-right clockwise - // | 1 2 | - // | 0 3 | - const corners = [ - [left, bottom], - [left, top], - [right, top], - [right, bottom], - ] - - // Find first (starting) corner with fallback to 'bottom' - const borders = ['bottom', 'left', 'top', 'right'] - let startCorner = borders.indexOf(borderSkipped, 0) - if (startCorner === -1) { - startCorner = 0 - } - - function cornerAt(index) { - return corners[(startCorner + index) % 4] - } - - // Draw rectangle from 'startCorner' - let corner = cornerAt(0) - ctx.moveTo(corner[0], corner[1]) - - for (let i = 1; i < 4; i++) { - corner = cornerAt(i) - let nextCornerId = i + 1 - if (nextCornerId === 4) { - nextCornerId = 0 - } - - const width = corners[2][0] - corners[1][0] - const height = corners[0][1] - corners[1][1] - const x = corners[1][0] - const y = corners[1][1] - - let radius = cornerRadius - - // Fix radius being too large - if (radius > height / 2) { - radius = height / 2 - } - if (radius > width / 2) { - radius = width / 2 - } - - ctx.moveTo(x + radius, y) - ctx.lineTo(x + width - radius, y) - ctx.quadraticCurveTo(x + width, y, x + width, y + radius) - ctx.lineTo(x + width, y + height - radius) - ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height) - ctx.lineTo(x + radius, y + height) - ctx.quadraticCurveTo(x, y + height, x, y + height - radius) - ctx.lineTo(x, y + radius) - ctx.quadraticCurveTo(x, y, x + radius, y) - } - - ctx.fill() - if (borderWidth) { - ctx.stroke() - } -} diff --git a/frontend/src/components/CloseButton.spec.js b/frontend/src/components/CloseButton.spec.js deleted file mode 100644 index b92422df8..000000000 --- a/frontend/src/components/CloseButton.spec.js +++ /dev/null @@ -1,28 +0,0 @@ -import { mount } from '@vue/test-utils' - -import CloseButton from './CloseButton' - -const localVue = global.localVue - -describe('CloseButton', () => { - let wrapper - const propsData = { - target: 'Target', - expanded: false, - } - - const Wrapper = () => { - return mount(CloseButton, { localVue, propsData }) - } - - describe('mount', () => { - beforeEach(() => { - wrapper = Wrapper() - }) - - it('emmits click event', () => { - wrapper.find('.navbar-toggler').trigger('click') - expect(wrapper.emitted('click')).toBeTruthy() - }) - }) -}) diff --git a/frontend/src/components/CloseButton.vue b/frontend/src/components/CloseButton.vue deleted file mode 100755 index 8c61f4f60..000000000 --- a/frontend/src/components/CloseButton.vue +++ /dev/null @@ -1,36 +0,0 @@ - - - diff --git a/frontend/src/components/NotificationPlugin/Notification.vue b/frontend/src/components/NotificationPlugin/Notification.vue deleted file mode 100644 index e36985036..000000000 --- a/frontend/src/components/NotificationPlugin/Notification.vue +++ /dev/null @@ -1,194 +0,0 @@ - - - diff --git a/frontend/src/components/NotificationPlugin/Notifications.vue b/frontend/src/components/NotificationPlugin/Notifications.vue deleted file mode 100644 index f180a7f37..000000000 --- a/frontend/src/components/NotificationPlugin/Notifications.vue +++ /dev/null @@ -1,52 +0,0 @@ - - diff --git a/frontend/src/components/NotificationPlugin/index.js b/frontend/src/components/NotificationPlugin/index.js deleted file mode 100644 index 5b6bbe67b..000000000 --- a/frontend/src/components/NotificationPlugin/index.js +++ /dev/null @@ -1,66 +0,0 @@ -import Notifications from './Notifications.vue' - -const NotificationStore = { - state: [], // here the notifications will be added - settings: { - overlap: false, - verticalAlign: 'top', - horizontalAlign: 'right', - type: 'info', - timeout: 5000, - closeOnClick: true, - showClose: true, - }, - setOptions(options) { - this.settings = Object.assign(this.settings, options) - }, - removeNotification(timestamp) { - const indexToDelete = this.state.findIndex((n) => n.timestamp === timestamp) - if (indexToDelete !== -1) { - this.state.splice(indexToDelete, 1) - } - }, - addNotification(notification) { - if (typeof notification === 'string' || notification instanceof String) { - notification = { message: notification } - } - notification.timestamp = new Date() - notification.timestamp.setMilliseconds( - notification.timestamp.getMilliseconds() + this.state.length, - ) - notification = Object.assign({}, this.settings, notification) - this.state.push(notification) - }, - notify(notification) { - if (Array.isArray(notification)) { - notification.forEach((notificationInstance) => { - this.addNotification(notificationInstance) - }) - } else { - this.addNotification(notification) - } - }, -} - -const NotificationsPlugin = { - install(Vue, options) { - const app = new Vue({ - data: { - notificationStore: NotificationStore, - }, - methods: { - notify(notification) { - this.notificationStore.notify(notification) - }, - }, - }) - Vue.prototype.$notify = app.notify - Vue.prototype.$notifications = app.notificationStore - Vue.component('Notifications', Notifications) - if (options) { - NotificationStore.setOptions(options) - } - }, -} - -export default NotificationsPlugin diff --git a/frontend/src/components/SearchUser.vue b/frontend/src/components/SearchUser.vue deleted file mode 100644 index dd3fe34a6..000000000 --- a/frontend/src/components/SearchUser.vue +++ /dev/null @@ -1,81 +0,0 @@ - - diff --git a/frontend/src/components/SidebarPlugin/index.js b/frontend/src/components/SidebarPlugin/index.js index ab59a9595..4723f9952 100755 --- a/frontend/src/components/SidebarPlugin/index.js +++ b/frontend/src/components/SidebarPlugin/index.js @@ -10,12 +10,10 @@ const SidebarStore = { }, toggleMinimize() { document.body.classList.toggle('sidebar-mini') - // we simulate the window Resize so the charts will get updated in realtime. const simulateWindowResize = setInterval(() => { window.dispatchEvent(new Event('resize')) }, 180) - // we stop the simulation of Window Resize after the animations are completed setTimeout(() => { clearInterval(simulateWindowResize) }, 1000) diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index 60015ef98..0fcda6c30 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -106,7 +106,6 @@ }, "profil": { "activity": { - "chart":"Gemeinschaftsstunden Chart", "new":"Neue Gemeinschaftsstunden eintragen", "list":"Meine Gemeinschaftsstunden Liste" } diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 5154aacc0..1ea67c41d 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -107,7 +107,6 @@ "profil": { "transactions":"transactions", "activity": { - "chart":"Community Hours Chart", "new":"Register new community hours", "list":"My Community Hours List" } diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js index 269fa7a84..cd2e00aa5 100755 --- a/frontend/src/plugins/dashboard-plugin.js +++ b/frontend/src/plugins/dashboard-plugin.js @@ -1,7 +1,5 @@ // Polyfills for js features used in the Dashboard but not supported in some browsers (mainly IE) import '@/polyfills' -// Notifications plugin. Used on Notifications page -import Notifications from '@/components/NotificationPlugin' // Validation plugin used to validate forms import { configure, extend, localize } from 'vee-validate' // A plugin file where you could register global components used across the app @@ -48,7 +46,6 @@ export default { Vue.use(GlobalComponents) Vue.use(GlobalDirectives) Vue.use(SideBar) - Vue.use(Notifications) Vue.use(BootstrapVue) Vue.use(IconsPlugin) Vue.use(VueGoodTablePlugin) diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js index 0bfd5566a..5fca6b8e2 100644 --- a/frontend/test/testSetup.js +++ b/frontend/test/testSetup.js @@ -6,7 +6,6 @@ import * as rules from 'vee-validate/dist/rules' import { messages } from 'vee-validate/dist/locale/en.json' import RegeneratorRuntime from 'regenerator-runtime' -import Notifications from '@/components/NotificationPlugin' import SideBar from '@/components/SidebarPlugin' import VueRouter from 'vue-router' import VueQrcode from 'vue-qrcode' @@ -29,7 +28,6 @@ global.localVue.use(BootstrapVue) global.localVue.use(Vuex) global.localVue.use(IconsPlugin) global.localVue.use(RegeneratorRuntime) -global.localVue.use(Notifications) global.localVue.use(SideBar) global.localVue.use(VueRouter) global.localVue.use(VueQrcode)