Working on Gallery folder list state change

motorradig/.idea/workspace.xml

@@ -2,13 +2,14 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="eed7de89-f054-487c-bf59-36356758942b" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/public/upload/images/Superordner2/Roblox_Dropper.png" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/public/upload/images/Superordner2/thumbnail/Roblox_Dropper.png" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app/Http/Controllers/FileController.php" beforeDir="false" afterPath="$PROJECT_DIR$/app/Http/Controllers/FileController.php" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/public/js/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/public/js/app.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/upload/images/Superordner2/Gazprom.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/public/upload/images/Superordner2/mod1.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/resources/js/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/app.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/resources/js/views/Gallery.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/Gallery.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/resources/js/views/Upload.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/Upload.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/resources/js/views/Main.vue" beforeDir="false" afterPath="$PROJECT_DIR$/resources/js/views/Main.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -246,7 +247,7 @@
       <workItem from="1581843962263" duration="5279000" />
       <workItem from="1581857706961" duration="672000" />
       <workItem from="1582013508305" duration="204000" />
-      <workItem from="1582103369899" duration="2047000" />
+      <workItem from="1582103369899" duration="6548000" />
     </task>
     <servers />
   </component>

motorradig/app/Http/Controllers/FileController.php

@@ -86,6 +86,9 @@ class FileController extends Controller
                         folders
                     WHERE
                         files.folder_id=folders.id
+                    ORDER BY
+                        folders.created_at
+                    DESC
                     ;";
         $filelisting = DB::select($query);
 

motorradig/public/js/app.js

@@ -1996,6 +1996,20 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 /* harmony default export */ __webpack_exports__["default"] = ({
@@ -2012,9 +2026,15 @@ __webpack_require__.r(__webpack_exports__);
       }),
       //folders: this.$store.state.folders
       folders: ['Folder1', 'Folder2'],
-      selectedFolder: this.$store.state.selectedFolder
+      selectedFolder: this.$store.state.selectedFolder,
+      xFiles: this.$store.state.files
     };
   },
+  computed: {
+    xFiles2: function xFiles2() {
+      return this.$store.state.files;
+    }
+  },
   beforeDestroy: function beforeDestroy() {
     this.editor.destroy();
   },
@@ -2100,19 +2120,28 @@ __webpack_require__.r(__webpack_exports__);
         console.log("First entry:");
         console.log(res.data.folders);
         console.log("Received the following data:");
+        _this3.$store.state.files = [];
 
         for (var i = 0; i < res.data.folders.length; i++) {
           var folder = res.data.folders[i].folder_name;
           var file = res.data.folders[i].file_name;
           console.log('http://localhost:8000/upload/images/' + folder + "/" + file);
-          console.log('http://localhost:8000/upload/images/' + folder + "/thumbnail/" + file);
+          var thumbUrl = 'http://localhost:8000/upload/images/' + folder + "/thumbnail/" + file;
+          console.log(thumbUrl);
+
+          _this3.$store.state.files.push(thumbUrl);
         }
+
+        _this3.files = _this3.$store.state.files;
       });
     },
     newFolderSelected: function newFolderSelected(event) {
       console.log("New Folder selected:");
       console.log(event.target.value);
       this.$store.state.selectedFolder = event.target.value;
+    },
+    showUrlList: function showUrlList() {
+      console.log(this.$store.state.files);
     }
   }
 });
@@ -31682,9 +31711,51 @@ var render = function() {
         _vm._v(" "),
         _vm._m(0),
         _vm._v(" "),
-        _vm._m(1)
+        _vm._m(1),
+        _vm._v(" "),
+        _c(
+          "div",
+          [
+            _c("p", [_vm._v("Static test")]),
+            _vm._v(" "),
+            _vm._l([1, 2, 3], function(entry) {
+              return _c("p", [_vm._v(_vm._s(entry))])
+            })
+          ],
+          2
+        ),
+        _vm._v(" "),
+        _c("p", [_vm._v("-")]),
+        _vm._v(" "),
+        _c(
+          "div",
+          { attrs: { id: "gallery" } },
+          [
+            _c("p", [_vm._v("Test")]),
+            _vm._v(" "),
+            _vm._l(_vm.xFiles2, function(url) {
+              return _c("p", [_vm._v(_vm._s(url))])
+            })
+          ],
+          2
+        )
       ],
       1
+    ),
+    _vm._v(" "),
+    _c("p", [_vm._v("BUTTON")]),
+    _vm._v(" "),
+    _c(
+      "button",
+      {
+        staticClass: "button",
+        on: {
+          click: function($event) {
+            return _vm.showUrlList()
+          }
+        }
+      },
+      [_vm._v("Debug output:List")]
     )
   ])
 }
@@ -31843,7 +31914,7 @@ var render = function() {
                   }
                 }
               },
-              [_vm._v("Bilder-Uploads")]
+              [_vm._v("Gallerie")]
             )
           ])
         : _vm._e(),
@@ -31860,7 +31931,7 @@ var render = function() {
                   }
                 }
               },
-              [_vm._v("Bilder-Uploads")]
+              [_vm._v("Gallerie")]
             )
           ])
         : _vm._e(),

motorradig/resources/js/app.js

@@ -28,3 +28,5 @@ new Vue({
     store,
     router
 });
+
+

motorradig/resources/js/views/Gallery.vue

@@ -15,7 +15,6 @@
             <span v-else-if="this.$store.state.user.role==='MEMBER'"><button class="button" @click="" >Tourplan (komplett)</button></span>
             <span v-else-if="this.$store.state.user.role==='ADMIN'"><button class="button" @click="" >Tourplan (komplett)</button></span>
 
-
             <button class="button" @click=""         >Wetter</button>
             <button class="button" @click=""          >Links</button>
             <button class="button" @click=""      >Impressum</button>
@@ -24,7 +23,6 @@
 
             <router-link class="button" :to="{ name: 'Login' }">Log-In</router-link>
 
-
             <div style="background-color:darkmagenta;">
                 <p>&nbsp; .....<br/></p>
             </div>
@@ -33,8 +31,24 @@
                 <span>GALLERY:</span>
             </div>
 
+
+            <div>
+                <p>Static test</p>
+                <p v-for="entry in [1,2,3]">{{ entry }}</p>
+            </div>
+
+            <p>-</p>
+
+            <div id="gallery">
+                <p>Test</p>
+                <p v-for="url in xFiles2">{{ url }}</p>
+            </div>
+
         </div>
 
+        <p>BUTTON</p>
+        <button class="button" @click="showUrlList()"      >Debug output:List</button>
+
     </div>
 </template>
 
@@ -91,9 +105,15 @@
                 }),
                 //folders: this.$store.state.folders
                 folders: ['Folder1','Folder2'],
-                selectedFolder:this.$store.state.selectedFolder
+                selectedFolder:this.$store.state.selectedFolder,
+                xFiles:this.$store.state.files
             }
         },
+        computed: {
+          xFiles2: function () {
+              return this.$store.state.files;
+          }
+        },
         beforeDestroy() {
             this.editor.destroy()
         },
@@ -182,19 +202,25 @@
                         console.log(res.data.folders);
 
                         console.log("Received the following data:");
+                        this.$store.state.files=[];
                         for (var i=0; i<res.data.folders.length; i++) {
                             var folder=res.data.folders[i].folder_name;
                             var file  =res.data.folders[i].file_name;
                             console.log('http://localhost:8000/upload/images/'+folder+"/"+file);
-                            console.log('http://localhost:8000/upload/images/'+folder+"/thumbnail/"+file);
+                            let thumbUrl='http://localhost:8000/upload/images/'+folder+"/thumbnail/"+file;
+                            console.log(thumbUrl);
+                            this.$store.state.files.push(thumbUrl);
                         }
-
+                        this.files=this.$store.state.files;
                     })
             },
             newFolderSelected(event) {
                 console.log("New Folder selected:");
                 console.log(event.target.value);
                 this.$store.state.selectedFolder=event.target.value;
+            },
+            showUrlList() {
+                console.log(this.$store.state.files);
             }
         }
     }

motorradig/resources/js/views/Main.vue

@@ -17,8 +17,8 @@
             <span v-if="this.$store.state.user.role==='ADMIN'"><button class="button" @click="userlistPage()" >Userverwaltung</button></span>
             <span v-if="this.$store.state.user.role==='ADMIN'"><button class="button" @click="upload()" >Upload</button></span>
 
-            <span v-if="this.$store.state.user.role==='MEMBER'"><button class="button" @click="galleryPage()" >Bilder-Uploads</button></span>
+            <span v-if="this.$store.state.user.role==='MEMBER'"><button class="button" @click="galleryPage()" >Gallerie</button></span>
-            <span v-if="this.$store.state.user.role==='ADMIN'"><button class="button" @click="galleryPage()" >Bilder-Uploads</button></span>
+            <span v-if="this.$store.state.user.role==='ADMIN'"><button class="button" @click="galleryPage()" >Gallerie</button></span>
 
             <button class="button" @click=""         >Wetter</button>
             <button class="button" @click="loadPage('links')"          >Links</button>