Fixed pic upload page relation

controllers/imageController.js

@@ -1,4 +1,4 @@
-const { Image } = require('../models');
+const { Image, MenuItem, Page } = require('../models');
 const { v4: uuidv4 } = require('uuid');
 const multer = require('multer');
 const path = require('path');
@@ -17,17 +17,33 @@ const upload = multer({ storage });
 
 exports.uploadImage = upload.single('image');
 
+exports.getAllPages = async (req, res) => {
+  try {
+    const pages = await MenuItem.findAll();
+    res.status(200).json(pages.map((item) => {return { link: item.link, name: item.name}; }));
+  } catch (error) {
+    console.log(error);
+    res.status(500).send('Fehler beim Auslesen');
+  }
+}
+
 exports.saveImageDetails = async (req, res) => {
   try {
-    const { title, description, pageId } = req.body;
+    const { title, description, page } = req.body;
     const filename = req.file.filename;
+    const pageItem = await Page.findAll({ where: { link: page } });
+    console.log(pageItem)
     const newImage = await Image.create({
       id: uuidv4(),
       filename,
       title,
       description,
-      pageId: pageId || null
+      pageId: pageItem && pageItem[0] ? pageItem[0].id : null
     });
+    if (page) {
+      const imageUrl = `/uploads/${filename}`;
+      await MenuItem.update({ image: imageUrl }, { where: { link: page} });
+    }
     res.status(201).json(newImage);
   } catch (error) {
     console.error('Fehler beim Speichern des Bildes:', error);
@@ -37,7 +53,7 @@ exports.saveImageDetails = async (req, res) => {
 
 exports.getImages = async (req, res) => {
   try {
-    const images = await Image.findAll({ order: [['title', 'ASC']]});
+    const images = await Image.findAll({ order: [['title', 'ASC']] });
     res.status(200).json(images);
   } catch (error) {
     console.error('Fehler beim Abrufen der Bilder:', error);

routes/image.js

@@ -1,12 +1,14 @@
 const express = require('express');
 const router = express.Router();
-const { uploadImage, saveImageDetails, getImages, getImagesByPage, getImageById, getImageByHash, updateImage } = require('../controllers/imageController');
+const { getAllPages, uploadImage, saveImageDetails, getImages, getImagesByPage, getImageById, getImageByHash, updateImage } = require('../controllers/imageController');
 const authMiddleware = require('../middleware/authMiddleware')
 
 router.post('/', authMiddleware, uploadImage, saveImageDetails);
 router.get('/', authMiddleware, getImages);
 router.get('/page/:pageId', getImagesByPage);
+router.put('/hash/:id', getImageByHash);
+router.get('/pages', getAllPages);
 router.get('/:id', getImageById);
 router.put('/:id', authMiddleware, updateImage);
-router.put('/hash/:id', getImageByHash);
+
 module.exports = router;

src/content/admin/ImageUpload.vue

@@ -1,134 +1,145 @@
 <template>
-    <div>
-      <h1>Bild hochladen</h1>
-      <form @submit.prevent="uploadImage">
-        <div>
-          <label for="title">Titel</label>
-          <input type="text" id="title" v-model="title" />
-        </div>
-        <div>
-          <label for="description">Beschreibung</label>
-          <textarea id="description" v-model="description"></textarea>
-        </div>
-        <div>
-          <label for="image">Bild</label>
-          <input type="file" id="image" @change="onFileChange" />
-        </div>
-        <div>
-          <label for="page">Seite</label>
-          <select id="page" v-model="selectedPage">
-            <option value="">Keine Seite</option>
-            <option v-for="page in pages" :key="page.id" :value="page.id">{{ page.title }}</option>
-          </select>
-        </div>
-        <button type="submit">Hochladen</button>
-      </form>
-  
-      <div v-if="images.length">
-        <h2>Hochgeladene Bilder</h2>
-        <div v-for="image in images" :key="image.id" class="uploaded-image">
-          <img :src="`/images/uploads/${image.filename}`" :alt="image.title" width="100" />
-          <input type="text" v-model="image.title" @change="updateImage(image)" />
-          <textarea v-model="image.description" @change="updateImage(image)"></textarea>
-          <p>{{ formatDate(image.uploadDate) }} {{ formatTimeFromDate(image.uploadDate) }}</p>
-        </div>
+  <div>
+    <h1>Bild hochladen</h1>
+    <form @submit.prevent="uploadImage">
+      <div>
+        <label for="title">Titel</label>
+        <input type="text" id="title" v-model="title" />
+      </div>
+      <div>
+        <label for="description">Beschreibung</label>
+        <textarea id="description" v-model="description"></textarea>
+      </div>
+      <div>
+        <label for="image">Bild</label>
+        <input type="file" id="image" @change="onFileChange" />
+      </div>
+      <div>
+        <label for="page">Seite</label>
+        <select id="page" v-model="selectedPage">
+          <option value="">Keine Seite</option>
+          <option v-for="page in pages" :key="page.value" :value="page.value">{{ page.caption }}</option>
+        </select>
+      </div>
+      <button type="submit">Hochladen</button>
+    </form>
+
+    <div v-if="images.length">
+      <h2>Hochgeladene Bilder</h2>
+      <div v-for="image in images" :key="image.id" class="uploaded-image">
+        <img :src="`/images/uploads/${image.filename}`" :alt="image.title" width="100" />
+        <input type="text" v-model="image.title" @change="updateImage(image)" />
+        <textarea v-model="image.description" @change="updateImage(image)"></textarea>
+        <p>{{ formatDate(image.uploadDate) }} {{ formatTimeFromDate(image.uploadDate) }}</p>
       </div>
     </div>
-  </template>
-  
-  <script>
-  import axios from '../../axios';
-  import { formatDate, formatTimeFromDate } from '@/utils/strings'
-  
-  export default {
-    name: 'ImageUpload',
-    data() {
-      return {
-        title: '',
-        description: '',
-        image: null,
-        selectedPage: '',
-        pages: [],
-        images: []
-      };
+  </div>
+</template>
+
+<script>
+import axios from '../../axios';
+import { formatDate, formatTimeFromDate } from '@/utils/strings'
+
+export default {
+  name: 'ImageUpload',
+  data() {
+    return {
+      title: '',
+      description: '',
+      image: null,
+      selectedPage: '',
+      pages: [],
+      images: []
+    };
+  },
+  methods: {
+    formatDate,
+    formatTimeFromDate,
+    onFileChange(e) {
+      this.image = e.target.files[0];
     },
-    methods: {
-      formatDate,
-      formatTimeFromDate,
-      onFileChange(e) {
-        this.image = e.target.files[0];
-      },
-      async uploadImage() {
-        const formData = new FormData();
-        formData.append('title', this.title);
-        formData.append('description', this.description);
-        formData.append('image', this.image);
-        formData.append('pageId', this.selectedPage);
-  
-        try {
-          await axios.post('/image/', formData);
-          this.fetchImages();
-          this.resetForm();
-        } catch (error) {
-          console.error('Fehler beim Hochladen des Bildes:', error);
-        }
-      },
-      async fetchImages() {
-        try {
-          const response = await axios.get('/image');
-          this.images = response.data;
-        } catch (error) {
-          console.error('Fehler beim Abrufen der Bilder:', error);
-        }
-      },
-      async fetchPages() {
-        try {
-          const response = await axios.get('/image/pages');
-          this.pages = response.data;
-        } catch (error) {
-          console.error('Fehler beim Abrufen der Seiten:', error);
-        }
-      },
-      async updateImage(image) {
-        try {
-          await axios.put(`/image/${image.id}`, {
-            title: image.title,
-            description: image.description
-          });
-          this.fetchImages();
-        } catch (error) {
-          console.error('Fehler beim Aktualisieren des Bildes:', error);
-        }
-      },
-      resetForm() {
-        this.title = '';
-        this.description = '';
-        this.image = null;
-        this.selectedPage = '';
-        document.getElementById('image').value = null;
+    async uploadImage() {
+      const formData = new FormData();
+      formData.append('title', this.title);
+      formData.append('description', this.description);
+      formData.append('image', this.image);
+      formData.append('page', this.selectedPage);
+
+      try {
+        await axios.post('/image/', formData);
+        this.fetchImages();
+        this.resetForm();
+      } catch (error) {
+        console.error('Fehler beim Hochladen des Bildes:', error);
       }
     },
-    mounted() {
-      this.fetchImages();
-      this.fetchPages();
+    async fetchImages() {
+      try {
+        const response = await axios.get('/image');
+        this.images = response.data;
+      } catch (error) {
+        console.error('Fehler beim Abrufen der Bilder:', error);
+      }
+    },
+    async fetchPages() {
+      try {
+        const response = await axios.get('/menu-data');
+        const buildRecursive = function (data, prefix = '') {
+          return data.flatMap(item => {
+            let children = [];
+            if (item.submenu && item.submenu.length) {
+              children = buildRecursive(item.submenu, prefix + item.name + " -> ");
+            }
+            return [{ value: item.link, caption: prefix + item.name }, ...children];
+          });
+        };
+
+        this.pages = buildRecursive(response.data);
+      } catch (error) {
+        console.error('Fehler beim Abrufen der Seiten:', error);
+      }
+    },
+    async updateImage(image) {
+      try {
+        await axios.put(`/image/${image.id}`, {
+          title: image.title,
+          description: image.description
+        });
+        this.fetchImages();
+      } catch (error) {
+        console.error('Fehler beim Aktualisieren des Bildes:', error);
+      }
+    },
+    resetForm() {
+      this.title = '';
+      this.description = '';
+      this.image = null;
+      this.selectedPage = '';
+      document.getElementById('image').value = null;
     }
-  };
-  </script>
-  
-  <style scoped>
-  form div {
-    margin-bottom: 10px;
+  },
+  mounted() {
+    this.fetchImages();
+    this.fetchPages();
   }
-  .uploaded-image {
-    display: inline-block;
-    margin: 0 0 0.5em 0.5em;
-    border: 1px solid #e0e0e0;
-    padding: 10px;
-  }
-  .uploaded-image input,
-  .uploaded-image textarea {
-    width: 100%;
-    margin: 5px 0;
-  }
-  </style>
-  
+};
+</script>
+
+<style scoped>
+form div {
+  margin-bottom: 10px;
+}
+
+.uploaded-image {
+  display: inline-block;
+  margin: 0 0 0.5em 0.5em;
+  border: 1px solid #e0e0e0;
+  padding: 10px;
+}
+
+.uploaded-image input,
+.uploaded-image textarea {
+  width: 100%;
+  margin: 5px 0;
+}
+</style>