├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    └── store
    │   ├── capuche.jpg
    │   ├── hoodi.jpg
    │   ├── hoodie.jpg
    │   ├── maryoul.jpg
    │   ├── socks_blue.jpg
    │   ├── socks_green.jpg
    │   ├── switer.PNG
    │   ├── t-shirt (2).jpg
    │   ├── t-shirt (3).jpg
    │   ├── t-shirt (4).jpg
    │   └── t-shirt.jpg
├── src
    ├── App.vue
    ├── assets
    │   ├── contact.png
    │   ├── hero-bg.png
    │   ├── intro.jpg
    │   └── logo.png
    ├── components
    │   ├── Eventcard.vue
    │   ├── PreloaderPage.vue
    │   ├── all_products.vue
    │   ├── contact.vue
    │   ├── navbar.vue
    │   └── toast.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── services
    │   └── EventService.js
    └── views
    │   ├── AboutView.vue
    │   ├── EventdetailsView.vue
    │   ├── HomeView.vue
    │   ├── TestEventView.vue
    │   └── contact.vue
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: https://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = space
 8 | indent_size = 4
 9 | end_of_line = crlf
10 | charset = utf-8
11 | trim_trailing_whitespace = false
12 | insert_final_newline = false


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |   ],
 9 |   rules: {
10 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
11 |     "vue/multi-word-component-names": "off",
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # projet_sem1_vuejs
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "projet_sem1_vuejs",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^1.1.3",
12 |     "bootstrap": "^5.2.2",
13 |     "core-js": "^3.8.3",
14 |     "jquery": "^3.6.1",
15 |     "jspdf": "^2.5.1",
16 |     "jspdf-autotable": "^3.5.25",
17 |     "vue": "^2.6.14",
18 |     "vue-confetti": "^2.3.0",
19 |     "vue-router": "^3.5.1"
20 |   },
21 |   "devDependencies": {
22 |     "@babel/core": "^7.12.16",
23 |     "@babel/eslint-parser": "^7.12.16",
24 |     "@vue/cli-plugin-babel": "~5.0.0",
25 |     "@vue/cli-plugin-eslint": "~5.0.0",
26 |     "@vue/cli-plugin-router": "~5.0.0",
27 |     "@vue/cli-service": "~5.0.0",
28 |     "eslint": "^7.32.0",
29 |     "eslint-plugin-vue": "^8.0.3",
30 |     "sass": "^1.32.7",
31 |     "sass-loader": "^12.0.0",
32 |     "vue-template-compiler": "^2.6.14"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/public/store/capuche.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/capuche.jpg


--------------------------------------------------------------------------------
/public/store/hoodi.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/hoodi.jpg


--------------------------------------------------------------------------------
/public/store/hoodie.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/hoodie.jpg


--------------------------------------------------------------------------------
/public/store/maryoul.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/maryoul.jpg


--------------------------------------------------------------------------------
/public/store/socks_blue.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/socks_blue.jpg


--------------------------------------------------------------------------------
/public/store/socks_green.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/socks_green.jpg


--------------------------------------------------------------------------------
/public/store/switer.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/switer.PNG


--------------------------------------------------------------------------------
/public/store/t-shirt (2).jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/t-shirt (2).jpg


--------------------------------------------------------------------------------
/public/store/t-shirt (3).jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/t-shirt (3).jpg


--------------------------------------------------------------------------------
/public/store/t-shirt (4).jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/t-shirt (4).jpg


--------------------------------------------------------------------------------
/public/store/t-shirt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/public/store/t-shirt.jpg


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <loading></loading>
 4 |     <navbar></navbar>
 5 |     <transition name="fade" mode="out-in">
 6 |       <router-view/>
 7 |     </transition>
 8 |  
 9 |   </div>
10 | </template>
11 | <script>
12 | import loading from "@/components/PreloaderPage.vue";
13 | import navbar from "@/components/navbar.vue";
14 | export default{
15 |   components:{
16 |     loading,navbar
17 |   }
18 | }
19 |    
20 | 
21 | </script>
22 | <style scoped>
23 | @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
24 | #app{
25 |   overflow-x: hidden;
26 |   width: 100vw;
27 | }
28 | .fade-enter,.fade-leave-to{
29 |   opacity: 0;
30 |   transform: translateX(2em);
31 | }
32 | .fade-enter-active,.fade-leave-active{
33 |   transition: all .3s ease;
34 | }
35 | 
36 | 
37 | 
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/assets/contact.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/src/assets/contact.png


--------------------------------------------------------------------------------
/src/assets/hero-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/src/assets/hero-bg.png


--------------------------------------------------------------------------------
/src/assets/intro.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/src/assets/intro.jpg


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TalelMejri/projet_sem1_vuejs/bad5bc4fd26ebcb266e3cc4045b83669fda0d228/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Eventcard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |         <div class="hello container py-5">
 3 |             <h1 class="mt-5 text-center">List Events :</h1>
 4 |             <div v-if="!loading"  class="mt-5 py-5 text-center" >
 5 |                 <div class="spinner-border" role="status">
 6 |                     <span class="visually-hidden"></span>
 7 |                   </div>
 8 |             </div>
 9 |             <div v-else>
10 |             <div class="row mb-4 d-flex justify-content-center py-3" >
11 |            
12 |                
13 |               <div v-if="events==''" class="w-50">
14 |                  <div class="alert alert-danger">
15 |                      Empty Events
16 |                  </div>
17 |               </div>
18 |               <div v-else v-for="event in events" :key="event.id" class="col-md-6 mb-2 ">
19 |                     <div class="card ">
20 |                          <div class="card-header text-center">
21 |                            {{event.category + event.id}}
22 |                          </div>
23 |                          <div class="card-body w-100 text-center font-weight-bold">
24 |                           <div class="card-text">  {{event.category }} </div>
25 |                           <div class="card-text">  {{event.title}}</div>
26 |                           <div class="card-text">  {{event.description}}</div>
27 |                           <div class="card-text">  {{event.location}}</div>
28 |                           <div class="card-text">  {{event.time}}</div>
29 |                          </div>
30 |                          <div class="p-3 float-end">
31 |                             <router-link :to="'/event/' + event.id">
32 |                                 <button  class="btn btn-warning mx-2">Show</button>
33 |                             </router-link>
34 |                             <button @click="delete_event(event)" class="btn btn-danger">delete</button>
35 |                         </div>
36 |                     </div>
37 |               </div>
38 |             </div>
39 |             </div>
40 |     </div>
41 | </template>
42 | 
43 | <script>
44 | export default {
45 |     
46 |   name: "HelloWorld",
47 |   data(){
48 |       return{
49 |         loading:false
50 |       }
51 |   },
52 |   props:{
53 |     events:Object
54 |   },
55 |   mounted(){
56 |         setTimeout(()=>this.loading=true,2000)
57 |     },
58 |   methods:{
59 |     delete_event(index){
60 |         if(confirm("do you want delete this")){
61 |             this.$emit('deleteevnt',index);
62 |         }
63 |     },
64 | 
65 |   }
66 | 
67 | };
68 | </script>
69 | 
70 | <!-- Add "scoped" attribute to limit CSS to this component only -->
71 | <style scoped >
72 | 
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/components/PreloaderPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-if="show_loading" class="loading">
  3 |         <p class="content-preloader">
  4 |            <span>V</span>
  5 |            <span>U</span>
  6 |            <span>E</span>
  7 |            <span>JS</span>
  8 |         </p>
  9 |     </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | export default{
 14 |   name:'PreloaderPage',
 15 |     data(){
 16 |         return{
 17 |             show_loading:true
 18 |         }
 19 |     },
 20 |     mounted(){
 21 |         setTimeout(()=>this.show_loading=false,1);
 22 |     }
 23 | 
 24 | }
 25 | </script>
 26 | 
 27 | <style>
 28 | .add{
 29 | 
 30 |   position: absolute;
 31 |  text-align: center;
 32 |  margin-left: 100px;
 33 |  font-weight: 600;
 34 |   margin-top:700px;
 35 | }
 36 | .loading{
 37 |   overflow-x: hidden;
 38 |     background-image: linear-gradient(to right , #42B883,#35495E);
 39 |     height: 100vh;
 40 |     z-index: 99999;
 41 |     position: fixed;
 42 |     top:0;
 43 |     left:0;
 44 |     width: 100vw;
 45 |     display: flex;
 46 |     min-height: 100vh;
 47 |     justify-content: center;
 48 |     align-items: center;
 49 |   }
 50 |   
 51 |   .loading.enter-out{
 52 |     display: none;
 53 |   }
 54 |   
 55 |   .content-preloader span{
 56 |    color: rgb(242, 242, 242);
 57 |    font-size: 4rem;
 58 |    height: fit-content;
 59 |    font-weight: 500;
 60 |    animation: enter-bizo 1s linear forwards;
 61 |    opacity: 0;
 62 |    padding: 0;
 63 |    margin: 0 1.5rem;
 64 |   }
 65 |   
 66 |   @keyframes enter-bizo {
 67 |     0%{
 68 |         opacity: 0;
 69 |         transform: rotateX(100deg);
 70 |         filter: blur(4px);
 71 |     }
 72 |   
 73 |     100%{
 74 |         opacity: 1;
 75 |         transform: rotateX(0);
 76 |         filter: blur(0);
 77 |     }
 78 |   }
 79 |   
 80 |   .content-preloader span:nth-child(1){
 81 |     animation-delay: .8s;
 82 |   }
 83 |   
 84 |   .content-preloader span:nth-child(2){
 85 |     animation-delay: 2s;
 86 |   }
 87 |   
 88 |   .content-preloader span:nth-child(3){
 89 |     animation-delay: 3s;
 90 |   }
 91 |   
 92 |   .content-preloader span:nth-child(4){
 93 |     animation-delay: 4s;
 94 |   }
 95 |   
 96 |   .content-preloader span:nth-child(5){
 97 |     animation-delay: 5s;
 98 |   }
 99 |   
100 |   @media screen and (max-width:768px) {
101 |     .content-preloader span{
102 |         font-size: 1rem;
103 |      }
104 |   }
105 | </style>


--------------------------------------------------------------------------------
/src/components/all_products.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |         <div class="">
  4 |             <div class="d-flex justify-content-center">
  5 |            <button :disabled="all_purchase.length==0" class="btn btn-dark mb-4 d-flex" data-bs-toggle="modal" data-bs-target="#exampleModal">
  6 |               <i class="material-icons mx-2">shopping_cart</i> 
  7 |               <span class="badge bg-dark text-white rounded-pill mt-1 mx-1">{{all_cart}}</span>
  8 |            </button>
  9 |           </div>
 10 |           <div class="">
 11 |            <button @click="sortby()" class="btn btn-primary">
 12 |               Sort By Prix
 13 |            </button>
 14 |           </div>
 15 |         </div>
 16 |     <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="false">
 17 |       <div class="modal-dialog modal-xl">
 18 |         <div class="modal-content">
 19 |           <div class="modal-header">
 20 |             <h5 class="modal-title" id="exampleModalLabel">All Purchase</h5>
 21 |             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 22 |               </div>
 23 |                    <div class="modal-body">
 24 |                             <div class="row d-flex justify-content-center my-4">
 25 |                               <div class="col-md-8">
 26 |                                   <div v-for="buy in all_purchase" :key="buy.id">
 27 |                                       <div v-if="buy.cart>0">
 28 |                                 <div class="card mb-4">
 29 |                                   <div class="card-header py-3">
 30 |                                     <h5 class="mb-0">{{buy.name}}</h5>
 31 |                                   </div>
 32 |                                   <div class="card-body">
 33 |                                     <div class="row">
 34 |                                       <div class="col-lg-3 col-md-12 mb-4 mb-lg-0">
 35 |                                         <div class="bg-image hover-overlay hover-zoom ripple rounded" data-mdb-ripple-color="light">
 36 |                                           <img :src="buy.src"
 37 |                                             class="w-100"  />
 38 |                                         </div>
 39 |                                       </div>
 40 |                                       <div class="col-lg-5 col-md-6 mb-4 mb-lg-0">
 41 |                                         <p>Size : M</p>
 42 |                                         <button type="button" class="btn btn-danger btn-sm mb-2" data-mdb-toggle="tooltip"
 43 |                                           title="Move to the wish list" @click="delete_product(buy.id)">
 44 |                                           <i  class="material-icons">delete</i>
 45 |                                         </button>
 46 |                                       </div>
 47 |                                       <div class="col-lg-4 ">
 48 |                                         <div class="d-flex" >
 49 |                                           <button :disabled="buy.quantity==0" @click="buy.cart--" class="btn btn-primary w-50"
 50 |                                             onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
 51 |                                             <i  class="material-icons"> remove</i>
 52 |                                           </button>
 53 |                                           <div class="form-control">
 54 |                                             <input id="form1" min="0" name="quantity"  v-model="buy.cart" type="number" class="form-control" />
 55 |                                             <label class="form-label" for="form1">Quantity</label>
 56 |                                           </div>
 57 |                                           <button  @click="buy.cart++" class="btn btn-primary w-50"
 58 |                                             onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
 59 |                                             <i  class="material-icons">add</i>
 60 |                                           </button>
 61 |                                         </div>
 62 |                                         <p class="text-start text-md-center py-4">
 63 |                                           <strong>{{buy.Prix}} $</strong>
 64 |                                         </p>
 65 |                                       </div>
 66 |                                     </div>
 67 |                                   </div>
 68 |                                 </div>
 69 |                               </div>
 70 |                           </div>
 71 |                   </div>
 72 |                   <div class="col-md-4">
 73 |                       <div class="card mb-4">
 74 |                         <div class="card-header py-3">
 75 |                           <h5 class="mb-0">Summary</h5>
 76 |                         </div>
 77 |                         <div class="card-body">
 78 |                           <ul class="list-group list-group-flush">
 79 |                             <li
 80 |                               class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 pb-0">
 81 |                               Products
 82 |                               <span>${{total}}</span>
 83 |                             </li>
 84 |                             <li class="list-group-item d-flex justify-content-between align-items-center px-0">
 85 |                               Shipping
 86 |                               <span>Gratis</span>
 87 |                             </li>
 88 |                             <li
 89 |                               class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
 90 |                               <div>
 91 |                                 <strong>Total amount</strong>
 92 |                                 <strong>
 93 |                                   <p class="mb-0">(including VAT)</p>
 94 |                                 </strong>
 95 |                               </div>
 96 |                               <span><strong>${{total}}</strong></span>
 97 |                             </li>
 98 |                           </ul>
 99 |                           <button @click="generate_pdf()" type="button" class="btn btn-primary btn-lg btn-block">
100 |                             Go to checkout
101 |                           </button>
102 |                         </div>
103 |                       </div>
104 |                       </div>
105 |              </div>
106 |            
107 |           </div>
108 |           <div class="modal-footer">
109 |             <button  type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
110 |           </div>
111 |         </div>
112 |       </div>
113 |     </div>
114 | 
115 |     <div v-if="select_name==''">
116 |        <div v-for="(our_product) in our_products" :key="our_product.name">
117 |           <div class="row d-flex justify-content-center  container p-4">
118 |               <div  class="col-lg-4 " v-for="our1 in our_product" :key="our1.id" >
119 |                   <div v-if="our1.Prix >= prix"  class="card mb-5">
120 |                       <div  class="card-body container">
121 |                          <p class="card-header">{{our1.name}}</p>
122 |                          <div class="box-container">
123 |                              <div class="box">
124 |                                  <img :class="{disabledimage:our1.quantity==0}" :src="our1.src"  :alt="our1.name">
125 |                                  <div class="content">
126 |                                      <i style="cursor:pointer" @click="changer_favorite(our1)"  :class=" our1.favorite ? 'text-danger material-icons mx-2' : 'material-icons mx-2' "> favorite</i> 
127 |                                      <h3>{{our1.name}}</h3>
128 |                                      <p>{{our1.quantity}}(available)   <br> {{our1.Prix}} dt</p>
129 |                                  </div>
130 |                              </div>
131 |                          </div>
132 |                          <div>
133 |                               <button :disabled="our1.quantity==0" @click="addcart(our1)" class="btn btn-outline-success">Add</button>
134 |                               <button :disabled="our1.cart==0"   @click="delete_cart(our1)" class="btn btn-outline-danger mx-2"> Delete </button>
135 |                          </div>
136 |                      </div>
137 |                  </div>
138 |               </div>
139 |       </div>
140 |        </div>
141 |       </div>
142 | 
143 |       <div v-else >
144 |             <div class="row d-flex justify-content-center  container p-4">
145 |                 <div class="col-lg-4 " v-for="our1 in our_products" :key="our1.id">
146 |                     <div v-if="our1.Prix >= prix" class="card mb-5">
147 |                         <div  class="card-body container">
148 |                            <p class="card-header">{{our1.name}}</p>
149 |                            <div class="box-container">
150 |                                <div class="box">
151 |                                    <img :class="{disabledimage:our1.quantity==0}" :src="our1.src"  :alt="our1.name">
152 |                                    <div class="content">
153 |                                        <i style="cursor:pointer" @click="changer_favorite(our1)"  :class=" our1.favorite ? 'text-danger material-icons mx-2' : 'material-icons mx-2' "> favorite</i> 
154 |                                        <h3>{{our1.name}}</h3>
155 |                                        <p>{{our1.quantity}}(available)  <br> {{our1.Prix}} dt</p>
156 |                                    </div>
157 |                                </div>
158 |                            </div>
159 |                            <div>
160 |                                 <button  :disabled="our1.quantity==0" @click="addcart(our1)" class="btn btn-outline-success">Add</button>
161 |                                 <button  :disabled="our1.cart==0"  @click="delete_cart(our1)" class="btn btn-outline-danger mx-2"> Delete </button>
162 |                            </div>
163 |                        </div>
164 |                    </div>
165 |                 </div>
166 |         </div>
167 |     </div>
168 |       </div>
169 | </template>
170 | 
171 | 
172 | <script>
173 | 
174 | import jsPDF from 'jspdf'
175 | import autoTable from 'jspdf-autotable'
176 | import Vue from 'vue';
177 | import VueConfetti from 'vue-confetti';
178 | import $ from 'jquery';
179 | Vue.use(VueConfetti);
180 | export default {
181 |   
182 |   name:'all_product',
183 |   data(){
184 |       return{
185 |           all_purchase:[],
186 |           quantity:0,
187 |           heading:"Your Facture",
188 |   }
189 | },
190 |   props:{
191 |       our_products:Object,
192 |       select_name:String,
193 |       prix:Number
194 |   },
195 |   mounted(){
196 |         console.log(this.all_purchase);
197 |   },
198 |   methods:{
199 |     sortby(){
200 |       this.$emit("sortby");
201 |     },
202 |     generate_pdf(){
203 |       $(" [data-bs-dismiss=modal] ").trigger({ type : "click" });
204 |       this.$confetti.start();
205 |       setTimeout(()=> this.$confetti.stop(),5000);
206 |       const doc = new jsPDF({
207 |         orientation:"portrait",
208 |         unit:"in",
209 |         format:"letter"
210 |       });
211 |         doc.text(this.heading,3.5,0.4);// (message,horizontale,vertical)
212 |         var total_payment="Total amount :"+this.total+" Dt ";
213 |         doc.text(total_payment,3.4,0.7);
214 |         autoTable(doc, { html: '#my-table' }) 
215 |         this.all_purchase.forEach((v)=>{
216 |         var val= v.id;
217 |         var name=v.name;
218 |         var quantity=v.cart;
219 |         autoTable(doc, {
220 |           head: [['Id', 'Name', 'Quantity']],
221 |           body: [
222 |             [val, name, quantity],
223 |           ],
224 |         })
225 |       })  
226 | 
227 |       doc.save(`${Math.random()}.pdf`);
228 |       for(let i=0;i<this.all_purchase.length;i++){
229 |          this.all_purchase.splice(this.all_purchase[i],1);
230 |       }
231 |     },
232 |       delete_product(product){
233 |           if(confirm('do you want delete this product ?')){
234 |              let item=this.all_purchase.find((v)=>v.id==product);
235 |              let i=this.all_purchase.indexOf(item);
236 |              this.all_purchase.splice(i,1);
237 |           }
238 |       },
239 |       addcart(tab){
240 |           if(tab.quantity>0){
241 |               tab.quantity--;
242 |               tab.cart++;
243 |             let item=this.all_purchase.find((v)=>v.id==tab.id);
244 |             if(!item){
245 |               this.all_purchase.push(tab);
246 |             }
247 |             console.log(this.all_purchase);
248 |           }
249 |       },
250 |       delete_cart(tab){
251 |           if(tab.cart > 0){
252 |               tab.quantity++;
253 |               tab.cart--;
254 |               
255 |           }
256 |       },
257 |       changer_favorite(tab){
258 |            tab.favorite = tab.favorite == 1 ? 0 :1;
259 |        }
260 |   },
261 |   computed:{ 
262 |     total(){
263 |       let all_prix=0;
264 |       this.all_purchase.forEach((e)=>{
265 |           all_prix+=(e.Prix*e.cart);
266 |       });
267 |       return all_prix;
268 |     },
269 |     all_cart(){
270 |       let all_prix=0;
271 |       this.all_purchase.forEach((e)=>{
272 |           all_prix+=e.cart;
273 |       });
274 |       return all_prix;
275 |     }
276 |   },
277 | }
278 | </script>
279 | 
280 | 
281 | <style scoped>
282 | .fade-enter-from{
283 |   opacity: 0;
284 |   transform: translateY(-60px);
285 | }
286 | .fade-enter-to{
287 |   opacity: 1;
288 |   transform: translateY(0);
289 | }
290 | .fade-enter-active{
291 |   transform: all .3s ease;
292 | }
293 | .fade-leave-from{
294 |   opacity: 1;
295 |   transform: translateY(0);
296 | }
297 | .fade-leave-to{
298 |   opacity: 0;
299 |   transform: translateY(-60px);
300 | }
301 | .fade-leave-active{
302 |     transform: all .3s ease;
303 |   }
304 | .disabledimage{
305 |   filter: grayscale(1500) !important;
306 | }
307 | .box-container{
308 |   display: flex;
309 |   flex-wrap: wrap;
310 |   gap:1.5rem;
311 | }
312 | 
313 |  .box-container .box{
314 |   height:15rem;
315 |   flex:1 1 30rem;
316 |   border:1rem solid #fff;
317 |   box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
318 |   border-radius: .5rem;
319 |   position: relative;
320 |   overflow: hidden;
321 | }
322 | 
323 |  .box-container .box img{
324 |   height:100%;
325 |   width:100%;
326 |   object-fit: cover;
327 | }
328 | 
329 |  .box-container .box .content{
330 |   position: absolute;
331 |   top:-100%; left:0;
332 |   height: 100%;
333 |   width:100%;
334 |   background:rgba(255,255,255,.9);
335 |   padding:2rem;
336 |   padding-top: 2rem;
337 |   text-align: center;
338 | }
339 | 
340 |  .box-container .box .content h3{
341 |   font-size:18px;
342 |   color:#000;
343 | }
344 | 
345 |  .box-container .box .content p{
346 |   font-size: 18px;
347 |   color:#000;
348 |   padding:1rem 0;
349 | }
350 | 
351 |  .box-container .box:hover .content{
352 |   top:0;
353 | }
354 | 
355 | </style>


--------------------------------------------------------------------------------
/src/components/contact.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="contact py-3">
  3 |         <div class="container-fluid py-2 " >
  4 |             <div class="d-flex py-5 justify-content-center">
  5 |                 <div class="col-xl-8 col-lg-9">
  6 |                     <div class="row shadow-lg p-5 rounded">
  7 |                         <div class="col-lg-6">
  8 |                             <h1>Add Your Reveiw :</h1>
  9 |                                 <form @submit.prevent="Onsubmit">
 10 |                                     <transition name="fade" mode="in-out">
 11 |                                         <toast v-if="afficher_message"></toast>
 12 |                                     </transition>
 13 |                                     <div class="row">
 14 |                                         <div class="col-md-6">
 15 |                                     <label>Name :</label>
 16 |                                     <input  class="form-control" type="text" v-model="name">
 17 |                                 </div>
 18 |                                 <div class="col-md-6">
 19 |                                     <label>Email :</label>
 20 |                                     <input  class="form-control" type="email" v-model="email">
 21 |                                 </div>
 22 |                                     </div>
 23 |                                     <label>Messages :</label>
 24 |                                     <textarea  class="form-control" name="" id="" cols="30" rows="10"  v-model="message"></textarea>
 25 |                                     <div class="row py-2">
 26 |                                         <div class="col-md-6">
 27 |                                     <label for="rating">Evaluation :</label>
 28 |                                     <select  class="form-control" id="rating" v-model.number="rating">
 29 |                                         <option>5</option>
 30 |                                         <option>4</option>
 31 |                                         <option>3</option>
 32 |                                         <option>2</option>
 33 |                                         <option>1</option>
 34 |                                     </select>
 35 |                                 </div>
 36 |                                 <div class="col-md-6">
 37 |                                     <label for="recommand">do you want  this produit ?</label>
 38 |                                     <select class="form-control"  id="recommand" v-model.number="recomende">
 39 |                                         <option>Yes</option>
 40 |                                         <option>No</option>
 41 |                                     </select>
 42 |                                 </div>
 43 |                                 </div>
 44 |                                 <div class="text-center">
 45 |                                     <button type="submit"  class="btn btn-outline-primary mt-4 mb-2">Send   </button>
 46 |                                     <div >
 47 |                                         <button  data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight" class="btn btn-info" :disabled="listReview.length==0">Check All Review  </button>
 48 |                                     </div>
 49 |                                     <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
 50 |                                         <div class="offcanvas-header">
 51 |                                           <h5 id="offcanvasRightLabel">All Review</h5>
 52 |                                           <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
 53 |                                         </div>
 54 |                                         <div class="offcanvas-body">
 55 |                                             <div v-for="review in listReview" :key="review.id" class="card">
 56 |                                                     <div class="card-header">
 57 |                                                        Name : {{review.name}}
 58 |                                                     </div>
 59 |                                                     <div class="card-body">
 60 |                                                          <div class="card-text">
 61 |                                                              Email :{{review.email}}
 62 |                                                          </div>
 63 |                                                          <div class="card-text">
 64 |                                                             Messages :{{review.message}}
 65 |                                                         </div>
 66 |                                                         <div class="card-text">
 67 |                                                             <span v-for="star in review.rating" :key="star.id">
 68 |                                                                 <i  class="material-icons mx-2 text-waring"> star</i>
 69 |                                                             </span>
 70 |                                                         </div>
 71 |                                                         <div class="card-text">
 72 |                                                             Recomande :{{review.recomende ? 'recommande with success' : 'Non' }}
 73 |                                                         </div>
 74 |                                                     </div>
 75 |                                             </div>
 76 |                                         </div>
 77 |                                       </div>
 78 |                                 </div>
 79 |                           </form>
 80 |                         </div>
 81 |                         <div class="col-lg-6  d-none d-lg-block text-center">
 82 |                             <img src="../assets/contact.png" alt="">
 83 |                         </div>
 84 |                     </div>
 85 |                 </div>
 86 |             </div>
 87 |         </div>
 88 |     </div>
 89 | </template>
 90 | 
 91 | <script>
 92 | import toast from "@/components/toast.vue";
 93 |  export default{
 94 |     data(){
 95 |         return{
 96 |             recomende:null,
 97 |             rating:null,
 98 |             message:'',
 99 |             email:'',
100 |             name:''
101 |         }
102 |     },
103 |     components:{
104 |         toast
105 |     },
106 |     props:{
107 |         listReview:Array,
108 |         afficher_message:Boolean
109 |     },
110 |     methods:{
111 |         Onsubmit(){
112 |             if(this.recomende==null && this.rating ==null && this.message=="" && this.email=="" && this.name==""){
113 |                 this.$emit("start_message");
114 |             }else{
115 |                 let all_response={
116 |                     name:this.name,
117 |                     email:this.email,
118 |                     message:this.message,
119 |                     rating:this.rating,
120 |                     recomende:this.recomende
121 |                 };
122 |                 this.$emit("add_review",all_response);
123 |                 this.name='';
124 |                 this.email='';
125 |                 this.message='';
126 |                 this.rating=null;
127 |                 this.recomende=null;
128 |             }
129 |         }
130 |     }
131 |  }
132 | </script>
133 | 
134 | <style scoped>
135 | .fade-enter-from{
136 |     opacity: 0;
137 |     transform: translateY(-60px);
138 |   }
139 |   .fade-enter-to{
140 |     opacity: 1;
141 |     transform: translateY(0);
142 |   }
143 |   .fade-enter-active{
144 |     transform: all .3s ease;
145 |   }
146 |   .fade-leave-from{
147 |     opacity: 1;
148 |     transform: translateY(0);
149 |   }
150 |   .fade-leave-to{
151 |     opacity: 0;
152 |     transform: translateY(-60px);
153 |   }
154 |   .fade-leave-active{
155 |       transform: all .3s ease;
156 |     }
157 | form{
158 |     position: relative;
159 | }
160 | img{
161 |     width: 100%;
162 |     height: 100%;
163 |     filter: drop-shadow(2px 4px 6px rgb(156, 154, 154));
164 |     box-shadow: none;
165 |    -webkit-box-shadow: none;
166 | }
167 | </style>


--------------------------------------------------------------------------------
/src/components/navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="navbar">
 3 |   <nav class="mb-5 navbar navbar-expand-lg text-uppercase fixed-top ">
 4 |     <div class="container">
 5 |         <a class="navbar-brand" href="##">Vue Shop</a>
 6 |         <button class="navbar-toggler text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
 7 |             Menu
 8 |             <i class="fas fa-bars"></i>
 9 |         </button>
10 |         <div  class="collapse navbar-collapse justify-content-center mx-5" id="navbarResponsive">
11 |             <ul class="navbar-nav text-center  p-2">
12 |               <li class="nav-item mx-0 mx-lg-1"><router-link to="/"><a class="nav-link text-center px-0 px-lg-3 rounded" href="#portfolio">    <i  class="material-icons mx-2"> home</i> Home </a></router-link> </li>
13 |               <li class="nav-item mx-0 mx-lg-1"><router-link to="/about"><a class="nav-link text-center px-0 px-lg-3 rounded" href="#service">    <i  class="material-icons mx-2"> store</i> Store</a></router-link></li>
14 |               <li class="nav-item mx-0 mx-lg-1"><router-link to="/contact"><a class="nav-link text-center px-0 px-lg-3 rounded" href="#contact">    <i  class="material-icons mx-2"> reviews</i> Contact </a></router-link></li>
15 |               <li class="nav-item mx-0 mx-lg-1"><router-link to="/testevent"><a class="nav-link text-center px-0 px-lg-3 rounded" href="#portfolio">    Events </a></router-link> </li>
16 |             </ul>
17 |         </div>
18 |     </div>
19 | </nav>
20 | </div>
21 | </template>
22 | 
23 | <style>
24 | router-link a{
25 |   text-decoration: none  !important;
26 | }
27 |  
28 | .navbar ul li a{
29 |   /* */
30 |   display: flex;
31 |   align-items: center;
32 |   justify-content: center;
33 |   position: relative;
34 |   font-size: 18px;
35 |   font-weight: 700;
36 |   color: #4fc3dc;
37 |   text-decoration: none;
38 |   transition: 0.3s;
39 |  }
40 | 
41 | 
42 |   .navbar {
43 |     position: relative;
44 |     background: #fff;
45 |     padding: 10px;
46 |     box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
47 |     transition: 0.5s;
48 |   }
49 |   
50 |   @media (min-width: 991px) {
51 |     .navbar-nav {
52 |         margin-left: 500px !important;
53 |     }
54 |   }
55 |   
56 |   
57 | 
58 | </style>


--------------------------------------------------------------------------------
/src/components/toast.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="essai">
 3 |         <div class="toast_wrapper">
 4 |             <div class="toast_ee">
 5 |                 you must enter all fileds
 6 |             </div>
 7 |         </div>
 8 |     </div>
 9 | </template>
10 | <script>
11 |     export default{
12 |         name:'toast'
13 |     }
14 | </script>
15 | <style>
16 |     .toast_wrapper{
17 |         width: 100%;
18 |         top: -140px;
19 |     }
20 |     .toast_ee{
21 |         padding: 20px;
22 |         color:white;
23 |         background: red;
24 |         border-radius: 10px;
25 |         box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
26 |         max-width: 400px;
27 |         margin: 0 auto;
28 |     }
29 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import "bootstrap";
 5 | import "bootstrap/dist/css/bootstrap.min.css";
 6 | import "bootstrap/js/dist/offcanvas";
 7 | import "bootstrap/js/dist/alert";
 8 | import "bootstrap/js/dist/modal";
 9 | import "bootstrap/js/dist/dropdown";
10 | 
11 | /*global.jQuery = require('jquery');
12 | var $ = global.jQuery;
13 | window.$ = $;*/
14 | 
15 | Vue.config.productionTip = false
16 | 
17 | new Vue({
18 |   router,
19 |   render: h => h(App)
20 | }).$mount('#app')
21 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import HomeView from '../views/HomeView.vue'
 4 | import contact from '../views/contact.vue'
 5 | import testEvent from '../views/TestEventView.vue'
 6 | import eventbyid from '../views/EventdetailsView'
 7 | Vue.use(VueRouter)
 8 | 
 9 | const routes = [
10 |   {
11 |     path: '/',
12 |     name: 'home',
13 |     component: HomeView
14 |   },
15 |   {
16 |     path:'/contact',
17 |     name:'contact',
18 |     component:contact
19 |   },
20 |   {
21 |     path: '/about',
22 |     name: 'about',
23 |     component: () => import('../views/AboutView.vue')
24 |   },
25 |   {
26 |     path:"/event/:id",
27 |     name:'event',
28 |     component:eventbyid
29 |   },
30 |   {
31 |     path: '/testevent',
32 |     name: 'testEvent',
33 |     component: testEvent
34 |   },
35 | ]
36 | 
37 | const router = new VueRouter({
38 |   mode: 'history',
39 |   base: process.env.BASE_URL,
40 |   routes
41 | })
42 | 
43 | export default router
44 | 


--------------------------------------------------------------------------------
/src/services/EventService.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import axios from "axios";
 3 | 
 4 | const ApiClient=axios.create({
 5 |      baseURL:'https://my-json-server.typicode.com/TalelMejri/api_calls',
 6 |      withCredentials:false,
 7 |      headers:{
 8 |         accept:"application/json",
 9 |         "content-type":"application/json"
10 |      },
11 | })
12 | 
13 | export default{
14 |     getEvents(){
15 |         return ApiClient.get('/events');
16 |     },
17 |     
18 |     getEventByid(id){
19 |         return ApiClient.get('/events/'+id);
20 |     },
21 |   
22 | 
23 | }
24 | 
25 | 


--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="contact">
  3 |       <div class="container-fluid py-5">
  4 |           <div class="d-flex py-5 justify-content-center">
  5 |             <div class="col-xl-12 col-lg-9 container">
  6 |               <div class="row  rounded shadow-lg p-5">
  7 |                  <div class="col-lg-2 border-end">
  8 |                       <h1 class="mb-5 text-danger">Menu :</h1>
  9 |                       <div class="mt-5 py-4">
 10 |                           <label for="temp">Prix :</label><br />
 11 |                           <input type="range" id="temp" min="0" v-model="prix" :max="prix_max" step="1" name="temp" />
 12 |                           <input type="text" class="form-control" v-model="prix">
 13 |                       </div>
 14 |                          Select Your Kind OF Clothes : 
 15 |                       <div class="d-flex flex-column gap-4 py-2">
 16 |                         <button @click="chose_option('')" class="btn" :class="select_name=='' ? 'btn-primary' :'btn-dark'">All</button>
 17 |                         <button @click="chose_option('T_shirt')" class="btn" :class="select_name=='T_shirt' ? 'btn-primary' :'btn-dark'">T_shirt</button>
 18 |                         <button @click="chose_option('sweater')" class="btn" :class="select_name=='sweater' ? 'btn-primary' :'btn-dark'">sweater</button>
 19 |                         <button @click="chose_option('hoodi')" class="btn" :class="select_name=='hoodi' ? 'btn-primary' :'btn-dark'">hoodi</button>
 20 |                         <button @click="chose_option('chaussete')" class="btn" :class="select_name=='chaussete' ? 'btn-primary' :'btn-dark'">chaussete</button>
 21 |                       </div>
 22 |                 </div>
 23 |                 <div class="col-lg-10 text-center">
 24 |                       <all_proudct @sortby="sortby" :our_products="myproject" :select_name="select_name" :prix="parseInt(prix)" ></all_proudct>
 25 |                 </div>
 26 |               </div>
 27 |             </div>
 28 |           </div>
 29 |       </div>
 30 |   </div>
 31 | </template>
 32 | 
 33 | <script>
 34 |   import all_proudct from "../components/all_products.vue";
 35 |   import Vue from 'vue';
 36 |   import VueConfetti from 'vue-confetti';
 37 |   Vue.use(VueConfetti);
 38 |  export default{
 39 |   data(){
 40 |     return{
 41 |       prix:0,
 42 |       do_sort_by_product:0,
 43 |       prod_ord:{},
 44 |       prix_max:0,
 45 |       select_name:'',
 46 |       our_products: {
 47 |             T_shirt: [
 48 |                {id:1,name:'T-Shirt 1',src:' /store/t-shirt (2).jpg',quantity:5,Prix:10,favorite:0,  cart:0},
 49 |                {id:2,name:'T-Shirt 3',src:' /store/t-shirt (3).jpg',quantity:10,Prix:11,favorite:0 , cart:0},
 50 |                {id:3,name:'T-Shirt 4',src:' /store/t-shirt (4).jpg',quantity:9,Prix:12,favorite:0 , cart:0},
 51 |                {id:4,name:'T-Shirt 5',src:' /store/t-shirt.jpg',quantity:15,Prix:13,favorite:0 , cart:0},
 52 |             ],
 53 |             sweater: [
 54 |                {id:5,name:'sweater 1',src:  '/store/maryoul.jpg',quantity:15,Prix:50,favorite:0 , cart:0},
 55 |                {id:6,name:'sweater 2',src: '/store/switer.PNG',quantity:15,Prix:60,favorite:0 , cart:0},
 56 |             ],
 57 |             hoodi: [
 58 |                {id:7,name:'hoodi 1',src: '/store/capuche.jpg',quantity:15,Prix:15,favorite:1 , cart:0},
 59 |                {id:8,name:'hoodi 2',src: '/store/hoodi.jpg',quantity:15,Prix:20,favorite:0 , cart:0},
 60 |                {id:9,name:'hoodi 3',src: '/store/hoodie.jpg',quantity:15,Prix:25,favorite:0 , cart:0},
 61 |             ],
 62 |             chaussete: [
 63 |                {id:10,name:'chaussete 1',src:  '/store/socks_blue.jpg',quantity:15,Prix:10,favorite:1 , cart:0},
 64 |                {id:11,name:'chaussete 2',src: '/store/socks_green.jpg',quantity:15,Prix:12,favorite:0 , cart:0},
 65 |             ],
 66 |         }
 67 |       }
 68 |   },
 69 |    methods:{
 70 |     sortby(){
 71 |       this.do_sort_by_product=1;
 72 |     },
 73 |     chose_option(select){
 74 |       this.do_sort_by_product=0;
 75 |       this.select_name=select;
 76 |     },
 77 |    },
 78 |    components:{
 79 |      all_proudct
 80 |    },
 81 |    computed:{
 82 |       myproject(){
 83 |         this.prix = 0 ;
 84 |           this.prod_ord=JSON.parse(JSON.stringify(this.our_products));
 85 |           if(this.select_name == ""){
 86 |              for(const prob in this.our_products){
 87 |                  for(let i=0;i<this.our_products[prob].length;i++){
 88 |                       if(this.our_products[prob][i].Prix>this.prix_max){
 89 |                         this.prix_max=parseInt(this.our_products[prob][i].Prix);
 90 |                       }
 91 |                  }
 92 |              }
 93 |              if(this.do_sort_by_product==1){
 94 |                for(const property in this.prod_ord){
 95 |                        this.prod_ord[property].sort((a,b)=>a.Prix>b.Prix ? -1 : 1);
 96 |                   }
 97 |                 }
 98 |                return {...this.prod_ord};
 99 |             }
100 |            else{ 
101 |             // for(let variant of this.our_products[this.select_name]){
102 |             //      console.log(variant.Prix);
103 |             //  }
104 |             this.prix_max = 0;
105 |             this.our_products[this.select_name].forEach(it=>{
106 |                 this.prix_max = this.prix_max<it.Prix ?  it.Prix : this.prix_max;
107 |             });
108 |             console.log(this.prix_max);
109 | 
110 |                if(this.do_sort_by_product==1){
111 |                     return {...this.prod_ord[''+this.select_name+''].sort((a,b)=>a.Prix>b.Prix ? -1 : 1)}; 
112 |                }  
113 |                     return {...this.prod_ord[''+this.select_name+'']};
114 |             }   
115 |           }
116 |                /*if(this.prix!=0){
117 |                  for(let property in this.our_products){
118 |                    for(let i=0;i<this.our_products[property].length;i++){
119 |                        if(this.our_products[property][i].Prix >= this.prix){
120 |                          return this.our_products[property];
121 |                        }
122 |                    }
123 |                   //  for(let variant of this.our_products[property]){
124 |                   //     console.log(variant.Prix);
125 |                   //  }
126 |                  }  
127 |                 }*/
128 |     }
129 |   }
130 | 
131 | 
132 |   
133 | </script>
134 | <style scoped>
135 | 
136 | </style>
137 | 


--------------------------------------------------------------------------------
/src/views/EventdetailsView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="hello container py-5">
 3 |         <h1 class="mt-5 text-center">List Events :</h1>        
 4 |         <div v-if="this.event==''">
 5 |             <div class="alert alert-danger">
 6 |                  empty 
 7 |             </div>
 8 |         </div>
 9 |         <div v-else class="row mb-4 d-flex justify-content-center py-3" >
10 |                 <div class="card ">
11 |                      <div class="card-header text-center">
12 |                        {{event.category + event.id}}
13 |                      </div>
14 |                      <div class="card-body w-100 text-center font-weight-bold">
15 |                       <div class="card-text">  {{event.category }} </div>
16 |                       <div class="card-text">  {{event.title}}</div>
17 |                       <div class="card-text">  {{event.description}}</div>
18 |                       <div class="card-text">  {{event.location}}</div>
19 |                       <div class="card-text">  {{event.time}}</div>
20 |                      </div>
21 |                      <div class="p-3 float-end">
22 |                         <router-link to="/testevent">
23 |                             <button  class="btn btn-warning mx-2">List Events</button>
24 |                         </router-link>
25 |                         <button @click="delete_event(event)" class="btn btn-danger">delete</button>
26 |                     </div>
27 |                 </div>
28 |           </div>
29 |         </div>
30 | </template>
31 | 
32 | <script>
33 | import service from "@/services/EventService.js";
34 |  export default{
35 | 
36 |     created(){
37 |         this.id = this.$route.params.id;
38 |         service.getEventByid(this.id).then((contenu)=>{
39 |             this.event=contenu.data;
40 |         }).catch((error)=>{
41 |             console.log(error);
42 |         })
43 |     },
44 |     name:'Eventdetails',
45 |     data(){
46 |         return{
47 |             id:0,
48 |             event:null,
49 |           
50 |         }
51 |     },
52 |     methods:{
53 |     
54 |     }
55 |  }
56 | </script>


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |           <div class="container-fluid py-5">
 4 |               <div class="d-flex py-5 justify-content-center">
 5 |                   <div class="col-xl-12 col-md-12 col-lg-12 py-5">
 6 |                       <div class="row py-5">
 7 |                               <div class="col-lg-6 py-5">
 8 |                                   <div class="py-4 text-center">
 9 |                                   <div >
10 |                                     <div class="intro_text">
11 |                                       <h1 ></h1>
12 |                                       <h2 >Just By being in it</h2>
13 |                                           <h3>Join Us </h3>
14 |                                           <div class="py-4 d-flex  justify-content-center">
15 |                                             <router-link to="/about">
16 |                                                 <button class="btn btn-outline-primary d-flex float-end">
17 |                                                   <i  class="material-icons mx-2"> shopping_cart</i>
18 |                                                      Magasin  
19 |                                                 </button>
20 |                                             </router-link>   
21 |                                           </div> 
22 |                                     </div>
23 |                                   </div>
24 |                               </div>
25 |                           </div>
26 |                               <div class="col-lg-6 d-lg-block d-none text-center py-5">
27 |                                 <transition name="fade" mode="in-out">
28 |                                          <img :src="all_image[i]" class="rounded img-thumbnail shadow-sm" width="400px" height="500px"  alt="">
29 |                                 </transition>
30 |                             </div>    
31 |                       </div>
32 |                   </div>
33 |               </div>
34 |           </div>    
35 |   </div>
36 | </template>
37 | 
38 | <script>
39 | 
40 | export default {
41 |   name: 'HomeView',
42 |  
43 |   data(){
44 |     return{
45 |      i:0,
46 |       all_image:[
47 |        '/store/capuche.jpg',
48 |        '/store/hoodi.jpg',
49 |        '/store/hoodie.jpg',
50 |        '/store/maryoul.jpg',
51 |        '/store/switer.PNG',
52 |        '/store/t-shirt (2).jpg',
53 |        '/store/t-shirt (3).jpg',
54 |        '/store/t-shirt (4).jpg',
55 |        '/store/t-shirt.jpg',
56 |       ]
57 |     }
58 |   },
59 |   mounted(){
60 |     setInterval(()=>this.i<this.all_image.length-1 ? this.i++ : this.i=0 ,3000);
61 |   },
62 | }
63 | </script>
64 | 
65 | <style scoped>
66 | 
67 | .home{
68 |  height: 97vh;
69 | }
70 | 
71 | .home{
72 |   background-image: url(../assets/hero-bg.png);
73 |   background-position: center;
74 |   background-repeat: no-repeat;
75 |   background-size: cover;
76 |   background-attachment: fixed;
77 | }
78 | 
79 | .intro_text{
80 |   color:#ff2d75;
81 | }
82 | 
83 | .intro_text h3{
84 |   color:#5995fd !important;
85 | }
86 | 
87 | @media (max-width:500px) {
88 |   h1,h3,h2{
89 |     font-size:16px;
90 |   }
91 | }
92 | </style>
93 | 


--------------------------------------------------------------------------------
/src/views/TestEventView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <listesvent :events="events" @deleteevnt="deleteevnt"></listesvent>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | 
 9 | import listesvent from "@/components/Eventcard.vue";
10 | import service from '@/services/EventService.js';
11 | 
12 | export default{
13 |   name:'TestEventView',
14 |   data(){
15 |    return {
16 |     events:[],
17 |     ApiClient:0,
18 |    }
19 |   }, 
20 |   components:{
21 |      listesvent
22 |   },
23 |   created(){
24 |     service.getEvents().then((response)=>{
25 |         this.events=response.data;
26 |     })
27 |     .catch((error)=>{
28 |         console.log(error);
29 |     })
30 |   },
31 |   methods:{
32 |     
33 |     deleteevnt(event){
34 |        let item=this.events.find((v)=>v.id==event.id);
35 |        let i=this.events.indexOf(item);
36 |        this.events.splice(i,1);
37 |     },
38 | 
39 |   }
40 | }
41 | </script>
42 | 


--------------------------------------------------------------------------------
/src/views/contact.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <contact :listReview="listReview" @add_review="add_review" @start_message="start_message" :afficher_message="afficher_message"></contact>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import contact from "@/components/contact.vue";
 9 | 
10 |  export default{
11 |     data(){
12 |         return{
13 |             listReview:[],
14 |             afficher_message:false
15 |         }
16 |     },
17 |     components:{
18 |         contact
19 |     },
20 |     methods:{
21 |         add_review(review){
22 |             this.listReview.push(review);
23 |         },
24 |         start_message(){
25 |             this.afficher_message=true;
26 |             setTimeout(()=>this.afficher_message=false,3000);
27 |         }
28 |     }
29 |  }
30 | </script>
31 | 
32 | <style scoped>
33 | 
34 | 
35 | </style>


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   lintOnSave:false,
4 |   transpileDependencies: true,
5 | })
6 | 


--------------------------------------------------------------------------------