Gestion du background

NextDom · May 10, 2020 · cd27aa7 · cd27aa7
1 parent 9ddf1a4
commit cd27aa7
Show file tree

Hide file tree

Showing 18 changed files with 134 additions and 23 deletions.
diff --git a/assets/data/backgrounds/home1-thumb.jpg b/assets/data/backgrounds/home1-thumb.jpg
diff --git a/assets/data/backgrounds/home1.jpg b/assets/data/backgrounds/home1.jpg
diff --git a/assets/data/backgrounds/wall-thumb.jpg b/assets/data/backgrounds/wall-thumb.jpg
diff --git a/assets/data/backgrounds/wall.jpg b/assets/data/backgrounds/wall.jpg
diff --git a/dash/css/app.d43809be.css → dash/css/app.0ade64ad.css b/dash/css/app.d43809be.css → dash/css/app.0ade64ad.css
diff --git a/dash/index.html b/dash/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/dash/favicon.ico><title>dash</title><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css><link href=/dash/css/app.d43809be.css rel=preload as=style><link href=/dash/css/chunk-vendors.604e650f.css rel=preload as=style><link href=/dash/js/app.d33ea983.js rel=preload as=script><link href=/dash/js/chunk-vendors.6963660c.js rel=preload as=script><link href=/dash/css/chunk-vendors.604e650f.css rel=stylesheet><link href=/dash/css/app.d43809be.css rel=stylesheet></head><body><noscript><strong>We're sorry but dash doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/dash/js/chunk-vendors.6963660c.js></script><script src=/dash/js/app.d33ea983.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/dash/favicon.ico><title>dash</title><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css><link href=/dash/css/app.0ade64ad.css rel=preload as=style><link href=/dash/css/chunk-vendors.604e650f.css rel=preload as=style><link href=/dash/js/app.1ecb4b3e.js rel=preload as=script><link href=/dash/js/chunk-vendors.6963660c.js rel=preload as=script><link href=/dash/css/chunk-vendors.604e650f.css rel=stylesheet><link href=/dash/css/app.0ade64ad.css rel=stylesheet></head><body><noscript><strong>We're sorry but dash doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/dash/js/chunk-vendors.6963660c.js></script><script src=/dash/js/app.1ecb4b3e.js></script></body></html>
diff --git a/dash/js/app.1ecb4b3e.js b/dash/js/app.1ecb4b3e.js
diff --git a/dash/js/app.1ecb4b3e.js.map b/dash/js/app.1ecb4b3e.js.map
diff --git a/dash/js/app.d33ea983.js b/dash/js/app.d33ea983.js
diff --git a/dash/js/app.d33ea983.js.map b/dash/js/app.d33ea983.js.map
diff --git a/src/Rest/DashRest.php b/src/Rest/DashRest.php
@@ -115,4 +115,36 @@ public static function pictures($path = '')
         $path = Utils::sanitizeString($path);
         return FileSystemHelper::ls(NEXTDOM_DATA . '/data/pictures/' . $path, '*.png', true);
     }
+
+    /**
+     * @param string $path
+     * @return array
+     */
+    public static function backgrounds($path = '')
+    {
+        $path = Utils::sanitizeString($path);
+        $backgroundsList = FileSystemHelper::ls(NEXTDOM_DATA . '/data/backgrounds/' . $path, '*.jpg', true);
+        $result = [];
+        foreach ($backgroundsList as $backgroundFile) {
+            $thumbPos = strpos($backgroundFile, '-thumb');
+            $fileInfo = pathinfo($backgroundFile);
+            $code = $fileInfo['filename'];
+            if ($thumbPos === false) {
+                if (!isset($result[$code])) {
+                    $result[$code] = ['thumb' => false];
+                }
+            }
+            else {
+                $code = substr($backgroundFile, 0, $thumbPos);
+                if (!isset($result[$code])) {
+                    $result[$code] = ['thumb' => true];
+                }
+                else {
+                    $result[$code]['thumb'] = true;
+                }
+            }
+            $result[$code]['ext'] = $fileInfo['extension'];
+        }
+        return $result;
+    }
 }
diff --git a/src/Rest/rest.yml b/src/Rest/rest.yml
@@ -150,3 +150,7 @@ dash_pictures:
   methods: GET
   requirements:
     path: "[a-zA-Z0-9\\-_]*"
+dash_backgrounds:
+  path: '/dash/backgrounds'
+  controller: NextDom\Rest\DashRest::backgrounds
+  methods: GET
diff --git a/src/dash/src/components/Dash.vue b/src/dash/src/components/Dash.vue
@@ -2,7 +2,7 @@
 Composant global du Dash
 -->
 <template>
-  <div id="global-container" v-bind:style="dashSize">
+  <div id="global-container" v-bind:style="dashStyle">
     <ConnectDialog v-on:connected="start" />
     <DashPreferences v-model="dashData" v-on:startWizard="startWizard" />
     <ManualDash v-if="dashData !== undefined && dashData.positioning === 'manual'" />
@@ -50,6 +50,7 @@ export default {
       title: "Dash",
       width: 640,
       height: 480,
+      background: "no",
       grid: {
         id: "0",
         children: [],
@@ -77,24 +78,31 @@ export default {
     /**
      * Taille de l'écran
      */
-    dashSize() {
+    dashStyle() {
+      let result = {};
       if (!this.initialized) {
-        return {
+        result = {
           width: 0,
           height: 0
         };
-      }
-      if (this.dashData.size === "fix") {
-        return {
-          width: this.dashData.width + "px",
-          height: this.dashData.height + "px"
-        };
       } else {
-        return {
-          width: "100%",
-          height: "100%"
-        };
+        if (this.dashData.size === "fix") {
+          result = {
+            width: this.dashData.width + "px",
+            height: this.dashData.height + "px"
+          };
+        } else {
+          result = {
+            width: "100%",
+            height: "100%"
+          };
+        }
+      }
+      if (this.dashData.background !== "no") {
+        result["backgroundImage"] =
+          "url('/data/backgrounds/" + this.dashData.background + "')";
       }
+      return result;
     }
   },
   methods: {
@@ -143,6 +151,7 @@ export default {
       if (!this.initialized) {
         this.dashData = {
           id: -1,
+          background: "no",
           name: "Dash",
           width: 640,
           height: 480,
@@ -172,10 +181,12 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 #global-container {
   padding: 0 !important;
   position: absolute;
+  background-size: cover;
+  background-position: center;
   top: 0;
   left: 0;
   width: 100%;

diff --git a/src/dash/src/components/DashEditor.vue b/src/dash/src/components/DashEditor.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
     <h1>Editeur avancé</h1>
+    <v-btn v-bind:to="{name: 'dash', params: {dashId: dashId}}">Retour au Dash</v-btn>
     <ConnectDialog v-on:connected="start" />
     <vue-json-editor
       v-bind:lang="language"
@@ -86,6 +87,7 @@ export default {
     },
     widgetsSave() {
       this.savedWidgetsData = JSON.parse(JSON.stringify(this.widgetsData));
+      this.save();
     },
     save() {
       Communication.postWithOptions("/api/dash/save", {

diff --git a/src/dash/src/components/DashPreferences.vue b/src/dash/src/components/DashPreferences.vue
@@ -20,6 +20,9 @@ Fenêtre de configuration du dash
               <v-text-field v-model="formData.height" label="Hauteur" />
             </v-col>
           </v-row>
+          <v-row>
+            <BackgroundStyle v-model="formData.background" />
+          </v-row>
           <v-row>
             <v-col cols="4" left>
               <v-btn href="/dash/index.html" color="success" dark>
@@ -45,9 +48,13 @@ Fenêtre de configuration du dash
 
 <script>
 import Communication from "@/libs/Communication";
+import BackgroundStyle from "@/components/Wizards/Helpers/BackgroundStyle";
 
 export default {
   name: "DashPreferences",
+  components: {
+    BackgroundStyle
+  },
   props: {
     value: {
       type: Object,

diff --git a/src/dash/src/components/Wizards/AddDashWizard.vue b/src/dash/src/components/Wizards/AddDashWizard.vue
@@ -70,6 +70,7 @@ Assistant de création d'un nouveau dash
             <v-card-title>Personnalisation</v-card-title>
             <v-card-text>
               <v-text-field v-model="title" label="Nom" />
+              <BackgroundStyle v-model="background" />
             </v-card-text>
           </v-card>
           <StepperButtons v-model="step" last v-on:next="endOfWizard" />
@@ -81,11 +82,13 @@ Assistant de création d'un nouveau dash
 
 <script>
 import StepperButtons from "@/components/Wizards/Helpers/StepperButtons";
+import BackgroundStyle from "@/components/Wizards/Helpers/BackgroundStyle";
 
 export default {
   name: "AddDashWizard",
   components: {
-    StepperButtons
+    StepperButtons,
+    BackgroundStyle
   },
   props: {
     showWizard: null
@@ -96,7 +99,8 @@ export default {
     positioning: "manual",
     size: "fix",
     width: 1280,
-    height: 720
+    height: 720,
+    background: "no"
   }),
   watch: {
     step: function(newStep) {
@@ -115,6 +119,7 @@ export default {
         size: this.size,
         width: this.width,
         height: this.height,
+        background: this.background,
         grid: {
           id: "0",
           children: [],

diff --git a/src/dash/src/components/Wizards/Helpers/BackgroundStyle.vue b/src/dash/src/components/Wizards/Helpers/BackgroundStyle.vue
@@ -0,0 +1,50 @@
+<template>
+  <v-radio-group v-model="background" row>
+    <v-radio value="no" label="Aucun" />
+    <v-radio
+      v-for="(backgroundData, backgroundName, index) in backgroundsList"
+      v-bind:key="`background-${index}`"
+      v-bind:value="`${backgroundName}.${backgroundData['ext']}`"
+    >
+      <template v-slot:label>
+        <img v-if="backgroundData.thumb" v-bind:src="basePath + backgroundName + '-thumb.' + backgroundData.ext" />
+        <img v-else v-bind:src="basePath + backgroundName + '.' + backgroundData.ext" />
+      </template>
+    </v-radio>
+  </v-radio-group>
+</template>
+
+<script>
+import Communication from "@/libs/Communication";
+
+export default {
+  name: "BackgroundStyle",
+  props: {
+    value: {
+      type: String,
+      default: "no"
+    }
+  },
+  data: () => ({
+    basePath: "/data/backgrounds/",
+    backgroundsList: []
+  }),
+  mounted() {
+    Communication.get("/api/dash/backgrounds", files => {
+      console.log(this.value);
+      this.backgroundsList = files;
+      console.log(this.value);
+    });
+  },
+  computed: {
+    background: {
+      get() {
+        return this.value;
+      },
+      set(newValue) {
+        this.$emit("input", newValue);
+      }
+    }
+  }
+};
+</script>
diff --git a/src/dash/src/components/Wizards/Helpers/LevelImgStyle.vue b/src/dash/src/components/Wizards/Helpers/LevelImgStyle.vue
@@ -2,8 +2,8 @@
   <v-radio-group v-model="picture" row>
     <v-radio v-for="(pictureData, index) in picturesList" v-bind:key="`pictures-${index}`" v-bind:value="index">
       <template v-slot:label>
-        <img v-bind:src="'/data/pictures/level/' + pictureData.name + '-0.png'" />/
-        <img v-bind:src="'/data/pictures/level/' + pictureData.name + '-100.png'" />/
+        <img v-bind:src="basePath + pictureData.name + '-0.png'" />/
+        <img v-bind:src="basePath + pictureData.name + '-100.png'" />
       </template>
     </v-radio>
   </v-radio-group>