Add Brand Section

components/footer/SiteFooter.vue

@@ -1,5 +1,6 @@
 <template>
-  <footer class="site--footer">
+  <footer class="site--footer" style="    position: relative;
+    z-index: 999;">
     <div class="container">
       <div class="row">
         <section class="col-12 r1">

pages/index.vue

@@ -75,36 +75,35 @@
       </div>
     </div>
 
-    <div class="p-3" style="background-color: white">
+    <div v-if="brands.length > 0" class="p-3" style="background-color: white;  position: relative;
+    z-index: 999;">
       <div>
-        <el-carousel :interval="400000" type="card" height="350px">
+        <el-carousel :interval="5000" type="card" height="300px">
-          <el-carousel-item style="display: flex; justify-content: center" v-for="item, i in brands" :key="i">
+          <el-carousel-item style="display: flex; justify-content: center; align-items: center;" v-for="item, i in brands" :key="i">
-            <el-card
+           <a :href="item.link" class="m-2 p-2" style="  width: 100%;   height: 100%;">
-              style="display: flex; justify-content: center; align-items: center; width: fit-content"
+          
-              :body-style="{ padding: '5px' }"
+            <div class="row box-shape">
-            >
+             
-            
+              <div class=" col-lg-4 col-sm-12" style="display: flex; justify-content: center; align-items: center;">
-              <a :href="item.link">
+  <!-- <img :src="'https://www.asan-service.com/uploads/images/brands/' + item.image"> -->
-                <img height="175" 
+              <img width="188" 
                 :src="config.apiAsanMarket + item.logo"
-                class="image rounded"
+               
               />
-              <div
-                style="
-                  padding: 14px;
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: center;
-                  align-items: center;
-                "
-              >
-                <span>{{item.title}}</span>
-                <div class="bottom clearfix">
-                  <time class="time">{{ item.description }}</time>
-                </div>
               </div>
-              </a>
+            
-            </el-card>
+              <div class="col-lg-8 col-sm-12 desc-box p-3">
+                <h4 class="mb-4">
+                  {{ item.title }}
+                </h4>
+                <p>
+                  {{ item.description }}
+                </p>
+
+              </div>
+            </div>
+           
+           </a>
           </el-carousel-item>
         </el-carousel>
       </div>
@@ -226,4 +225,16 @@ export default {
 .el-carousel__item:nth-child(2n + 1) {
   background-color: #d3dce600;
 }
+
+.box-shape{
+  background-color: #f1f1f1;
+  border: 1px solid #c4c4c4;
+  height: 100%;
+  border-radius: 5px;
+}
+.desc-box{
+  display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
 </style>

sass/pages/home.scss

@@ -22,7 +22,7 @@
 
   .txtBox {
     position: absolute;
-    top: 50%;
+    top: 40%;
     left: 50%;
     width: 100%;
     z-index: 1;

server/controllers/brandController.js

@@ -0,0 +1,138 @@
+const Brand = require("../models/Brand");
+const { checkValidations } = require("../plugins/HelperFunctions")
+const { body, validationResult } = require('express-validator')
+const { _sr } = require("../plugins/resServer")
+
+
+//@desc Create a brand
+//@route POST /api/brands/
+//@access Private
+const createbrand = [
+    [
+        body('title').notEmpty().withMessage(_sr.fa.required.title),
+        body('description').notEmpty().withMessage(_sr.fa.required.description),
+        body('link').notEmpty().trim().isLowercase().withMessage(_sr.fa.required.field),
+        body('logo').notEmpty().withMessage(_sr.fa.required.image),
+
+    ],
+    checkValidations(validationResult),
+    async (req, res) => {
+
+        const { title, link, description, logo } = req.body;
+
+
+        const linkAvailable = await Brand.findOne({ link });
+        if (linkAvailable) {
+            res.status(400);
+            throw new Error(_sr.fa.duplicated.link);
+        }
+
+        const brand = await Brand.create({
+            title,
+            link,
+            description,
+            logo,
+        });
+
+        res.status(201).json(brand);
+
+    }
+
+]
+
+
+//@desc Get to all brands
+//@route GET /api/brands/
+//@access Public
+const getbrands = async (req, res) => {
+    const brand = await Brand.find();
+
+    res.status(200).json(brand);
+};
+
+
+//@desc Get to brand by id
+//@route GET /api/brands/id/:id
+//@access Public
+const getbrand = async (req, res) => {
+    const brand = await Brand.findById(req.params.id);
+    if (!brand) {
+        res.status(404)
+        throw new Error(_sr.fa.not_found.item_id)
+    }
+    res.status(200).json(brand);
+};
+
+
+//@desc Update a brand
+//@route Put /api/brands/:id
+//@access Private
+const updatebrand = [
+    [
+        body('title').notEmpty().withMessage(_sr.fa.required.title),
+        body('description').notEmpty().withMessage(_sr.fa.required.description),
+        body('link').notEmpty().trim().isLowercase().withMessage(_sr.fa.required.field),
+        body('logo').notEmpty().withMessage(_sr.fa.required.image),
+    ],
+    checkValidations(validationResult),
+    async (req, res) => {
+        const { title, link, description, logo, native, ordering } = req.body;
+
+
+        const brand = await Brand.findById(req.params.id);
+        if (!brand) {
+            res.status(404);
+            throw new Error(_sr.fa.not_found.item_id);
+        }
+
+        const linkAvailable = await Brand.findOne({ link });
+        if (linkAvailable && linkAvailable.id != req.params.id) {
+            res.status(400);
+            throw new Error(_sr.fa.duplicated.link);
+        }
+
+        const updateBrand = await Brand.findByIdAndUpdate(
+            req.params.id,
+            {
+                title,
+                link,
+                description,
+                logo,
+                native,
+                ordering
+            },
+            { new: true }
+        );
+
+        res.status(201).json(updateBrand);
+
+    }
+]
+
+
+//@desc Delete a brand
+//@route DELETE /api/brands/:id
+//@access Private
+const deletebrand = async (req, res) => {
+    const brand = await Brand.findById(req.params.id);
+
+
+    if (!brand) {
+        res.status(404);
+        throw new Error(_sr.fa.not_found.item_id);
+    }
+
+    await brand.deleteOne();
+
+    res.status(201).json(brand);
+
+};
+
+
+module.exports = {
+    createbrand,
+    getbrands,
+    getbrand,
+    updatebrand,
+    deletebrand,
+};

server/index.js

@@ -13,6 +13,7 @@ function init() {
   const fileUpload = require('express-fileupload')
   const authentication = require('./authentication')
   const { checkThirdPartyAccess } = require('./plugins/checkThirdPartyAccess')
+  const { rs } = require('./plugins/resHeader')
   // const { getVerityToken, getPanatechToken } = require('./ArpaWebService')
   const cronJobs = require('./plugins/cronJobs')
   const router = express.Router()
@@ -24,6 +25,7 @@ function init() {
   app.use(express.json())
   app.use(express.urlencoded({ extended: true }))
   app.use(fileUpload())
+  app.use(rs)
   console.log('🟢 ~ Node Server is running ')
   app.use((req, res, next) => {
     res.setHeader('Access-Control-Allow-Origin', '*');

server/models/Brand.js

@@ -0,0 +1,17 @@
+const mongoose = require('mongoose');
+
+const brandSchema = new mongoose.Schema({
+  title: String,
+  link: {
+    type: String,
+    unique: [true, "This link already taken"] 
+  },
+  description: String,
+  logo: String,
+},
+{
+  timestamps: true,
+}
+);
+
+module.exports = mongoose.model('Brand', brandSchema);

server/plugins/resHeader.js

@@ -0,0 +1,13 @@
+module.exports.rs=(req, res, next) => {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization, siteuser');
+    res.setHeader('Author', "Mr Swift")
+    res.setHeader('X-Powered-By', "77 114 32 83 119 105 102 116")
+    res.setHeader(
+      "Strict-Transport-Security",
+      "max-age=31536000; includeSubDomains; preload"
+    );
+    
+    next();
+  }