Home Explore Help
Sign In
fgm
/
meteor__coursera-meteor-1
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

End of week2

Frederic G. MARAND 9 years ago
parent
fe790d06b5
commit
7afa06d3d3
4 changed files with 74 additions and 5 deletions
Unified View Show Diff Stats
  1. 1 0
      .eslintrc.js
  2. 31 2
      image_share.html
  3. 41 2
      image_share.js
  4. 1 1
      startup.js

+ 1 - 0
.eslintrc.js
View File 

@@ -10,6 +10,7 @@ module.exports = {
 
     "$": true,
 
     "$": true,
 
     "jQuery": true,
 
     "jQuery": true,
 
     "Meteor": true,
 
     "Meteor": true,
 
+    "Mongo": true,
 
     "Template": true,
 
     "Template": true,
 
     "Images": true
 
     "Images": true
 
   },
 
   },

+ 31 - 2
image_share.html
View File 

@@ -3,13 +3,41 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
+  {{> image_add_form }}
 
+
 
   <h1>Welcome to coursera!</h1>
 
   <h1>Welcome to coursera!</h1>
 
   <div class="container">
 
   <div class="container">
 
     {{> images}}
 
     {{> images}}
 
   </div>
 
   </div>
 
 </body>
 
 </body>
 
 
 
+<template name="image_add_form">
 
+
 
+  <div class="modal fade" id="image_add_form">
 
+    <div class="modal-dialog">
 
+      <div class="modal-content">
 
+        <div class="modal-header">
 
+          <div class="modal-title"></div>
 
+        </div>
 
+        <div class="modal-body">
 
+          <form class="js-add-image">
 
+            <input type="text" name="img_src" />
 
+            <br /><input type="text" name="img_alt" />
 
+            <button class="btn btn-success">save</button>
 
+          </form>
 
+        </div>
 
+        <div class="modal-footer">
 
+          <button class="btn btn-warning" data-dismiss="modal">cancel</button>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+  </div>
 
+
 
+</template>
 
+
 
 <template name="images">
 
 <template name="images">
 
+  <button class="btn btn-success js-show-image-form">add image</button>
 
   <div class="row">
 
   <div class="row">
 
     {{#each images}}
 
     {{#each images}}
 
       <div class="col-xs-12 col-md-3" id="{{_id}}">
 
       <div class="col-xs-12 col-md-3" id="{{_id}}">
 
@@ -18,8 +46,9 @@
 
           <img class="js-image" src="{{img_src}}" alt="{{img_alt}}" />
 
           <img class="js-image" src="{{img_src}}" alt="{{img_alt}}" />
 
 
 
           <div class="caption">
 
           <div class="caption">
 
-            <h3>Thumbnail label</h3>
 
-            <p>description of the image</p>
 
+            <h3>Rating: {{ rating }}</h3>
 
+            <p>{{ img_alt }}</p>
 
+            <p>{{> starsRating mutable=true class="js-rate-image" id=image_id }}</p>
 
             <button class="js-del-image btn btn-warning">delete</button>
 
             <button class="js-del-image btn btn-warning">delete</button>
 
           </div>
 
           </div>
 
         </div>
 
         </div>

+ 41 - 2
image_share.js
View File 

@@ -2,7 +2,12 @@
 
 Images = new Mongo.Collection("images");
 
 Images = new Mongo.Collection("images");
 
 
 
 if (Meteor.isClient) {
 
 if (Meteor.isClient) {
 
-  Template.images.helpers({ images: Images.find() });
 
+  Template.images.helpers({
 
+    images: Images.find({}, { sort: { createdOn: -1, rating: -1 }}),
 
+    image_id: function () {
 
+      return "rating-" + this._id;
 
+    }
 
+  });
 
 
 
   Template.images.events({
 
   Template.images.events({
 
     "click .js-image": function (event) {
 
     "click .js-image": function (event) {
 
@@ -11,9 +16,43 @@ if (Meteor.isClient) {
 
     "click .js-del-image": function (event) {
 
     "click .js-del-image": function (event) {
 
       let imageId = this._id;
 
       let imageId = this._id;
 
       console.log(imageId);
 
       console.log(imageId);
 
-      $("#" + imageId).hide(200, function () {
 
+      // use jquery to hide the image component
 
+      // then remove it at the end of the animation
 
+      $("#" + imageId).hide("slow", function () {
 
         Images.remove({ _id: imageId });
 
         Images.remove({ _id: imageId });
 
       });
 
       });
 
+    },
 
+    "click .js-rate-image": function (event) {
 
+      let rating = $(event.currentTarget).data("userrating");
 
+      let imageId = this.id.substring(7); // "rating-".length = 7.
 
+      console.log(imageId);
 
+
 
+      Images.update({ _id: imageId },
 
+        { $set: { rating: rating }}
 
+      );
 
+    },
 
+    "click .js-show-image-form": function (event) {
 
+      $("#image_add_form").modal("show");
 
     }
 
     }
 
+
 
   });
 
   });
 
+
 
+  Template.image_add_form.events({
 
+    'submit .js-add-image': function (event) {
 
+      let img_src = event.target.img_src.value;
 
+      let img_alt = event.target.img_alt.value;
 
+      console.log("src: " + img_src + " alt: " + img_alt);
 
+
 
+      Images.insert({
 
+        img_src: img_src,
 
+        img_alt: img_alt,
 
+        createdOn: new Date()
 
+      });
 
+       $("#image_add_form").modal('show');
 
+      return false;
 
+    }
 
+  });
 
+
 
+
 
 }
 
 }
 
+

+ 1 - 1
startup.js
View File 

@@ -8,7 +8,7 @@ if (Meteor.isServer) {
 
         });
 
         });
 
       } // end of for insert images
 
       } // end of for insert images
 
       // count the images!
 
       // count the images!
 
-      Meteor._debug("startup.js says: " + Images.find().count());
 
+      console.log("startup.js says: " + Images.find().count());
 
     } // end of if have no images.
 
     } // end of if have no images.
 
   });
 
   });