Allow to set a custom background

Signed-off-by: Julius Härtl <jus@bitgrid.net>

6 files changed, 343 insertions, 1 deletions

diff --git a/apps/dashboard/appinfo/routes.php b/apps/dashboard/appinfo/routes.php
index 4edca1a3ec5..704311bddf5 100644
--- a/apps/dashboard/appinfo/routes.php
+++ b/apps/dashboard/appinfo/routes.php
@@ -28,5 +28,7 @@ return [
 	'routes' => [
 		['name' => 'dashboard#index', 'url' => '/', 'verb' => 'GET'],
 		['name' => 'dashboard#updateLayout', 'url' => '/layout', 'verb' => 'POST'],
+		['name' => 'dashboard#getBackground', 'url' => '/background', 'verb' => 'GET'],
+		['name' => 'dashboard#setBackground', 'url' => '/background', 'verb' => 'POST'],
 	]
 ];
diff --git a/apps/dashboard/lib/Controller/DashboardController.php b/apps/dashboard/lib/Controller/DashboardController.php
index 305759fa6e8..f6fea2aaf45 100644
--- a/apps/dashboard/lib/Controller/DashboardController.php
+++ b/apps/dashboard/lib/Controller/DashboardController.php
@@ -26,9 +26,12 @@ declare(strict_types=1);
 
 namespace OCA\Dashboard\Controller;
 
+use OCA\Dashboard\Service\BackgroundService;
 use OCA\Files\Event\LoadSidebar;
 use OCA\Viewer\Event\LoadViewer;
 use OCP\AppFramework\Controller;
+use OCP\AppFramework\Http;
+use OCP\AppFramework\Http\FileDisplayResponse;
 use OCP\AppFramework\Http\JSONResponse;
 use OCP\AppFramework\Http\TemplateResponse;
 use OCP\Dashboard\IManager;
@@ -51,6 +54,10 @@ class DashboardController extends Controller {
 	private $config;
 	/** @var string */
 	private $userId;
+	/**
+	 * @var BackgroundService
+	 */
+	private $backgroundService;
 
 	public function __construct(
 		string $appName,
@@ -59,6 +66,7 @@ class DashboardController extends Controller {
 		IEventDispatcher $eventDispatcher,
 		IManager $dashboardManager,
 		IConfig $config,
+		BackgroundService $backgroundService,
 		$userId
 	) {
 		parent::__construct($appName, $request);
@@ -67,6 +75,7 @@ class DashboardController extends Controller {
 		$this->eventDispatcher = $eventDispatcher;
 		$this->dashboardManager = $dashboardManager;
 		$this->config = $config;
+		$this->backgroundService = $backgroundService;
 		$this->userId = $userId;
 	}
 
@@ -95,6 +104,7 @@ class DashboardController extends Controller {
 		$this->inititalStateService->provideInitialState('dashboard', 'panels', $widgets);
 		$this->inititalStateService->provideInitialState('dashboard', 'layout', $userLayout);
 		$this->inititalStateService->provideInitialState('dashboard', 'firstRun', $this->config->getUserValue($this->userId, 'dashboard', 'firstRun', '1') === '1');
+		$this->inititalStateService->provideInitialState('dashboard', 'shippedBackgrounds', BackgroundService::SHIPPED_BACKGROUNDS);
 		$this->config->setUserValue($this->userId, 'dashboard', 'firstRun', '0');
 
 		return new TemplateResponse('dashboard', 'index');
@@ -109,4 +119,30 @@ class DashboardController extends Controller {
 		$this->config->setUserValue($this->userId, 'dashboard', 'layout', $layout);
 		return new JSONResponse(['layout' => $layout]);
 	}
+
+	/**
+	 * @NoAdminRequired
+	 */
+	public function setBackground($path = null, $url = null): JSONResponse {
+		// FIXME: store current version of the background and return the result
+		// FIXME: handle shipped backgrounds  avoid file duplication
+		// FIXME: allow to reset to default ones
+		if ($path !== null) {
+			$this->backgroundService->setFileBackground($path);
+		}
+		if ($url !== null) {
+			$this->backgroundService->setUrlBackground($url);
+		}
+		return new JSONResponse([]);
+	}
+
+	/**
+	 * @NoAdminRequired
+	 * @NoCSRFRequired
+	 */
+	public function getBackground(): FileDisplayResponse {
+		$file = $this->backgroundService->getBackground();
+		$response = new FileDisplayResponse($file, Http::STATUS_OK, ['Content-Type' => $file->getMimeType()]);
+		return $response;
+	}
 }
diff --git a/apps/dashboard/lib/Controller/LayoutApiController.php b/apps/dashboard/lib/Controller/LayoutApiController.php
new file mode 100644
index 00000000000..31b796575e0
--- /dev/null
+++ b/apps/dashboard/lib/Controller/LayoutApiController.php
@@ -0,0 +1,63 @@
+<?php
+/**
+ * @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+declare(strict_types=1);
+
+
+namespace OCA\Dashboard\Controller;
+
+use OCP\AppFramework\Http\JSONResponse;
+use OCP\AppFramework\OCSController;
+use OCP\IConfig;
+use OCP\IRequest;
+
+class LayoutApiController extends OCSController {
+
+	/** @var IConfig */
+	private $config;
+	/** @var string */
+	private $userId;
+
+	public function __construct(
+		string $appName,
+		IRequest $request,
+		IConfig $config,
+		$userId
+	) {
+		parent::__construct($appName, $request);
+
+		$this->config = $config;
+		$this->userId = $userId;
+	}
+
+	/**
+	 * @NoAdminRequired
+	 *
+	 * @param string $layout
+	 * @return JSONResponse
+	 */
+	public function create(string $layout): JSONResponse {
+		$this->config->setUserValue($this->userId, 'dashboard', 'layout', $layout);
+		return new JSONResponse(['layout' => $layout]);
+	}
+}
diff --git a/apps/dashboard/lib/Service/BackgroundService.php b/apps/dashboard/lib/Service/BackgroundService.php
new file mode 100644
index 00000000000..1247690a4f9
--- /dev/null
+++ b/apps/dashboard/lib/Service/BackgroundService.php
@@ -0,0 +1,99 @@
+<?php
+/**
+ * @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+declare(strict_types=1);
+
+
+namespace OCA\Dashboard\Service;
+
+
+use OCP\Files\File;
+use OCP\Files\IAppData;
+use OCP\Files\IRootFolder;
+use OCP\Files\NotFoundException;
+use OCP\Files\SimpleFS\ISimpleFile;
+
+class BackgroundService {
+
+	const SHIPPED_BACKGROUNDS = [
+		'anatoly-mikhaltsov-butterfly-wing-scale-5k.jpg',
+		'bernie-cetonia-aurata-take-off-composition-8k.jpg',
+		'eduardo-neves-pedra-azul-5k.jpg',
+		'europeanspaceagency-baltic-blooms-6k.jpg',
+		'europeanspaceagency-barents-bloom-2k.jpg',
+		'europeanspaceagency-colourful-queensland-6k.jpg',
+		'europeanspaceagency-namib-desert-6k.jpg',
+		'europeanspaceagency-peruvian-andes-6k.jpg',
+		'flickr-148302424@N05-36591009215.jpg',
+		'flickr-andymag-26451722126.jpg',
+		'flickr-angietrenz-24259359268.jpg',
+		'flickr-coconut-cove-mixed-2k.jpg',
+		'flickr-dejankrsmanovic-42971456774.jpg',
+		'flickr-paszczak000-8715851521.jpg',
+		'flickr-xomeox-sewage-3k.jpg',
+		'flickr-zalexandra-7948897538.jpg',
+		'hannes-fritz-flippity-floppity-4k.jpg',
+		'hannes-fritz-parkour-4k.jpg',
+		'hannes-fritz-roulette-4k.jpg',
+		'hannes-fritz-sea-spray-6k.jpg',
+		'insa-wulf-radial-4k.jpg',
+		'microcosmos-lab-microcrystals-5k.jpg',
+		'nasa-goddard-antarctica-melts-6k.jpg',
+		'nasa-goddard-iceberg-greenland-4k.jpg',
+		'pexels-snapwire-forest-4k-cc0.jpg',
+		'yana-sichikova-sergey-ovachev-stone-flower-2k.jpg',
+	];
+
+	public function __construct(IRootFolder $rootFolder, IAppData $appData, $userId) {
+		$this->userFolder = $rootFolder->getUserFolder($userId);
+		try {
+			$this->dashboardUserFolder = $appData->getFolder($userId);
+		} catch (NotFoundException $e) {
+			$this->dashboardUserFolder = $appData->newFolder($userId);
+		}
+	}
+
+	public function setFileBackground($path) {
+		$file = $this->userFolder->get($path);
+		$newFile = $this->dashboardUserFolder->newFile('background.jpg', $file->fopen('r'));
+	}
+
+	public function setUrlBackground($url) {
+		if (substr($url, 0, 1) === '/') {
+			$url = \OC::$server->getURLGenerator()->getAbsoluteURL($url);
+		}
+
+		$client = \OC::$server->getHTTPClientService()->newClient();
+		$response = $client->get($url);
+		$content = $response->getBody();
+		$newFile = $this->dashboardUserFolder->newFile('background.jpg', $content);
+	}
+
+	/**
+	 * @throws NotFoundException
+	 */
+	public function getBackground(): ISimpleFile {
+		return $this->dashboardUserFolder->getFile('background.jpg');
+	}
+
+}
diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 9831f761e1a..807a0e6f61e 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -53,6 +53,9 @@
 
 				<a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
 
+				<h3>{{ t('dashboard', 'Change the background image') }}</h3>
+				<BackgroundSettings @updateBackground="updateBackground" />
+
 				<h3>{{ t('dashboard', 'Credits') }}</h3>
 				<p>{{ t('dashboard', 'Photos') }}: <a href="https://www.flickr.com/photos/paszczak000/8715851521/" target="_blank" rel="noopener">Clouds (Kamil Porembiński)</a>, <a href="https://www.flickr.com/photos/148302424@N05/36591009215/" target="_blank" rel="noopener">Un beau soir dété (Tanguy Domenge)</a>.</p>
 			</div>
@@ -69,15 +72,19 @@ import Draggable from 'vuedraggable'
 import axios from '@nextcloud/axios'
 import { generateUrl, generateFilePath } from '@nextcloud/router'
 import isMobile from './mixins/isMobile'
+import BackgroundSettings from './components/BackgroundSettings'
 
 const panels = loadState('dashboard', 'panels')
 const firstRun = loadState('dashboard', 'firstRun')
 
+const prefixWithBaseUrl = (url) => generateFilePath('dashboard', '', 'img/') + url
+
 export default {
 	name: 'App',
 	components: {
 		Modal,
 		Draggable,
+		BackgroundSettings,
 	},
 	mixins: [
 		isMobile,
@@ -96,11 +103,14 @@ export default {
 			modal: false,
 			appStoreUrl: generateUrl('/settings/apps/dashboard'),
 			statuses: {},
+			backgroundTime: Date.now(),
+			defaultBackground: window.OCA.Accessibility.theme === 'dark' ? prefixWithBaseUrl('flickr-148302424@N05-36591009215.jpg?v=1') : prefixWithBaseUrl('flickr-paszczak000-8715851521.jpg?v=1'),
 		}
 	},
 	computed: {
 		backgroundImage() {
-			const prefixWithBaseUrl = (url) => generateFilePath('dashboard', '', 'img/') + url
+			// FIXME: make this dependent if the default is set or not
+			return generateUrl('/apps/dashboard/background') + '?v=' + this.backgroundTime
 			if (window.OCA.Accessibility.theme === 'dark') {
 				return !isMobile ? prefixWithBaseUrl('flickr-148302424@N05-36591009215.jpg?v=1') : prefixWithBaseUrl('flickr-148302424@N05-36591009215-mobile.jpg?v=1')
 			}
@@ -244,6 +254,9 @@ export default {
 				this.firstRun = false
 			}, 1000)
 		},
+		updateBackground(date) {
+			this.backgroundTime = date
+		},
 	},
 }
 </script>
@@ -411,6 +424,8 @@ export default {
 	.modal__content {
 		width: 30vw;
 		margin: 20px;
+		max-height: 70vh;
+		overflow: auto;
 		ol {
 			display: flex;
 			flex-direction: column;
diff --git a/apps/dashboard/src/components/BackgroundSettings.vue b/apps/dashboard/src/components/BackgroundSettings.vue
new file mode 100644
index 00000000000..7645d8fb832
--- /dev/null
+++ b/apps/dashboard/src/components/BackgroundSettings.vue
@@ -0,0 +1,127 @@
+<!--
+  - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div class="background-selector">
+		<div v-if="loading">Loading</div>
+		<div v-for="background in shippedBackgrounds"
+			:key="background"
+			class="background"
+			@click="setUrl(background)">
+			<img :src="background">
+		</div>
+		<div class="background" @click="pickFile">
+			<a>
+				{{ t('dashboard', 'Pick an image from your files') }}
+			</a>
+		</div>
+	</div>
+</template>
+
+<script>
+import axios from '@nextcloud/axios'
+import { generateUrl, generateFilePath } from '@nextcloud/router'
+import { loadState } from '@nextcloud/initial-state'
+
+const prefixWithBaseUrl = (url) => generateFilePath('dashboard', '', 'img/') + url
+const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds')
+
+export default {
+	name: 'BackgroundSettings',
+	data() {
+		return {
+			backgroundImage: generateUrl('/apps/dashboard/background') + '?v=' + Date.now(),
+			loading: false,
+		}
+	},
+	computed: {
+		shippedBackgrounds() {
+			return shippedBackgroundList.map((item) => {
+				return prefixWithBaseUrl(item)
+			})
+		},
+	},
+	methods: {
+		async update() {
+			const date = Date.now()
+			this.backgroundImage = generateUrl('/apps/dashboard/background') + '?v=' + date
+			const image = new Image()
+			image.onload = () => {
+				this.$emit('updateBackground', date)
+				this.loading = false
+			}
+			image.src = this.backgroundImage
+		},
+		setDefault() {
+			console.debug('SetDefault')
+			this.update()
+		},
+		async setUrl(url) {
+			this.loading = true
+			console.debug('SetUrl ' + url)
+			await axios.post(generateUrl('/apps/dashboard/background'), { url })
+			this.update()
+		},
+		async setFile(path) {
+			this.loading = true
+			console.debug('SetFile ' + path)
+			await axios.post(generateUrl('/apps/dashboard/background'), { path })
+			this.update()
+		},
+		pickFile() {
+			window.OC.dialogs.filepicker(t('dashboard', 'Insert from {productName}', { productName: OC.theme.name }), (path, type) => {
+				if (type === OC.dialogs.FILEPICKER_TYPE_CHOOSE) {
+					this.setFile(path)
+				}
+			}, false, ['image/png', 'image/gif', 'image/jpeg', 'image/svg'], true, OC.dialogs.FILEPICKER_TYPE_CHOOSE)
+		},
+	},
+}
+</script>
+
+<style scoped lang="scss">
+
+	.background-selector {
+		display: flex;
+		flex-wrap: wrap;
+
+		.background {
+			width: 140px;
+			padding: 15px;
+			border-radius: var(--border-radius);
+			text-align: center;
+
+			&.current {
+				background-image: var(--color-background-dark);
+			}
+
+			& img {
+				width: 140px;
+			}
+
+			&:hover {
+				background-color: var(--color-background-hover);
+			}
+		}
+	}
+
+</style>