Coder Social home page Coder Social logo

capstone-project's Introduction

General Assembly Logo

Your Capstone Project

Overview

You’ve come a long way, and it's time to show it. This will be your most advanced project to date, and if you put creativity into it, it'll hopefully be the thing you want to show off most prominently in your portfolio.

You get to call the shots and invent your own idea, choosing a framework and tools that are appropriate for what you want to build. Pull from everything you've learned so far, and tackle something that'll push you a little outside of your comfort zone.

Make sure you review your project proposal with your instructor so you can make sure it's something you can accomplish in the limited time we have, and make sure it's something that'll be impressive visually. Sometimes people do judge a book by its cover – or an app by its design.

Technical Requirements

Your app must:

  • Build a full-stack application by making your own backend and your own front-end
  • Have an API of your design
  • Any data that can be updated or deleted must be user owned and protected or controlled by an ACL (An ACL is a stretch goal).
  • Have an interactive front-end, preferably using a modern front-end framework
  • Be a complete product, which most likely means multiple relationships and CRUD functionality for at least a couple models
  • Use a database, whether that's one we've covered in class or one you want to learn
  • Implement thoughtful user stories that are significant enough to help you know which features to build and which to scrap
  • Have a visually impressive design to kick your portfolio up a notch and have something to wow future clients and employers
  • Be deployed online so it's publicly accessible
  • Not have any obvious user facing errors.

Necessary Deliverables

Planning Requirements

On the first day of project worktime, you must commit:

  • A client README with user stories and wireframes
  • An api README with an ERD

Daily Requirements

  • You must have at least one commit on either your client or api repo for each day of project worktime.

Other Deliverables

  • A working API, hosted somewhere on the internet

  • A working client app, hosted somewhere on the internet that consumes your API

  • A link to your hosted working app in the URL section of your Github repo

  • A git repository hosted on Github, with a link to your hosted project, and frequent commits dating back to the very beginning of the project

  • Two README.md files with:

    Client:

    • An embedded screenshot of the app
    • Explanations of the technologies used
    • A couple paragraphs about the general approach you took
    • Installation instructions for any dependencies
    • Link to your user stories – who are your users, what do they want, and why?
    • Link to your wireframes – sketches of major views / interfaces in your application
    • Link to your pitch deck – documentation of your wireframes, user stories, and proposed architecture
    • Descriptions of any unsolved problems or major hurdles you had to overcome

    API:

    • Links to your client-side application, deployed client app, and deployed api.
    • An ERD
    • A list of your API routes
    • Installation instructions for any dependencies
    • Explanations of the technologies used
    • A couple paragraphs about the general approach you took
    • Descriptions of any unsolved problems or major hurdles you had to overcome
    • Both client and api repositories must be pinned on your GitHub page

IMPORTANT If you do not meet the planning or daily requirements, you cannot meet expectations for this project. The final submission that you must be the project you presented to the cohort.

Overall Score

Your consultants will give you a total score on your project as an aggregate across all feedback categories:

Score Expectations
0 Does not meet expectations.
1 Meets expectations - good job!
2 Exceeds expectations, you magnificent creature, you!

This will serve as a helpful overall gauge of whether you met the project goals. But more important than your overall score is your feedback, particularly in individual categories - this will help you identify where to focus your efforts for future projects.

Suggested Ways to Get Started

  • Don’t get too caught up in too many awesome features – simple is always better. Build something impressive that does one thing well.
  • Design first. Planning with user stories and wireframes before writing code means you won't get distracted changing your mind – you'll know what to build, and you can spend your time wisely by just building it.
  • Don’t hesitate to write throwaway code to solve short term problems.
  • Read the docs for whatever technologies / frameworks / APIs you use.
  • Write your code DRY and build your APIs RESTful.
  • Commit early, commit often. Don’t be afraid to break something because you can always go back in time to a previous version.
  • Keep user stories small and well-defined, and remember – user stories focus on what a user needs, not what development tasks need accomplishing.
  • Write code another developer wouldn't have to ask you about. Do your naming conventions make sense? Would another developer be able to look at your app and understand what everything is?
  • Make it all well-formatted. Are you indenting, consistently? Can we find the start and end of every div, curly brace, etc?
  • Comment your code. Will someone understand what is going on in each block or function? Even if it's obvious, explaining the what and why means someone else can pick it up and get it.
  • Write pseudocode before you write actual code. Thinking through the logic of something helps.

Redoing Project Two

You may choose to redo project two for your capstone project. Please remember that redoing a project means that you have one less thing to put in your final portfolio. There are special requirements for redoing project two:

  • In order to meet requirements, your new full-stack app must have a new feature that was completed during capstone project week.
  • The client must be in Ember. Ember is not required if you do not re-do your second project.
  • A re-used API must have one new resource and one new relationship.

Potential Project Ideas

Q&A App

Think of how helpful sites like Quora and StackOverflow are. Maybe there's some other niche, or some surprising twist you can add to the question-and-answer game.

Car Repair Log

Keep up with your vehicle as you commute every day to your final weeks of WDI save things like mileage, last inspect, oil changes, and maybe even receipts and important document you need to have backed up.

Email-like Messages

Imagine a realtime messaging client, but with private messages, an inbox, unread messages, and who knows what else. This is your chance to re-invent email as we know it.

Additional Resources

  1. All content is licensed under a CC­BY­NC­SA 4.0 license.
  2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].

capstone-project's People

Contributors

laurenfazah avatar payne-chris-r avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

capstone-project's Issues

Need Help Reading Error Message

I am getting an error when trying to register from my webapp and the error messages are something I have never seen before and hard to read.

Can you help me read what the messages are saying is wrong? Google was no help.

Terminal server log -

"[2015-12-15 10:18:56] ERROR bad URI u?R?$?3A??F?\x1F?4D?o'=??\x12ԍ?wd\x7F\x00\x00\x1E?+?/\x00??\x14?\x13?'. [2015-12-15 10:18:56] ERROR bad Request-Line\x16\x03\x01\x00?\x01\x00\x00?\x03\x028F?",YB/}?7??o???;??j???u??-z?^?\x00\x00\x14?'.
[2015-12-15 10:18:56] ERROR bad URI `?aſA\x048'."

Front end console -

"OPTIONS https://localhost:3000/register net::ERR_SSL_PROTOCOL_ERRORsend @ jquery-2.1.4.js:8630jQuery.extend.ajax @ jquery-2.1.4.js:8166api.ajax @ ajax.js:13register @ ajax.js:23(anonymous function) @ ajax.js:127jQuery.event.dispatch @ jquery-2.1.4.js:4435elemData.handle @ jquery-2.1.4.js:4121

ajax.js:114 Object {jqxhr: Object, status: "error", error: ""}callback @ ajax.js:114(anonymous function) @ ajax.js:16fire @ jquery-2.1.4.js:3099self.fireWith @ jquery-2.1.4.js:3211done @ jquery-2.1.4.js:8266(anonymous function) @ jquery-2.1.4.js:8599"

Cors error

So I've tested registration and login on the backend and they work fine.
I'm getting a "success" from the console.log on the ajax registration call, but....
I'm getting this error
XMLHttpRequest cannot load http://localhost:3000/register. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access. The response had HTTP status code 404.

I did check the backend again and checked the Network messages in the chrome console. Can I get some help?

Want to make sure I have my data associations right in Rails

I have three models
User (has_many :pets)

Pet (belongs_to :user)
(has_many :documents)

Document (belongs_to :pet)

I want to the User to be able to delete and upload the Document but make sure they are still only associated and brought up when I am referencing the Pet that it is attached to. I looked into the has_many_through and think that's the right option. Just wanted to confirm.

submit form isn't registering data

I'm trying to get create working on my front end and I've spent hours trying to figure out why my form isn't collected the inputs I give it. Looking for another set of eyes to see if you notice anything wrong:

HTML:

  <div id="createGuideContainer">
        <form id="createNewGuide">
          <!-- <div class="row">
            <div class="six columns"> -->
              <label for="guideTitle">Guide Title</label>
              <input class="u-full-width" type="text" placeholder="Guide..." id="guideTitle">
        <!--     </div>
            <div class="six columns"> -->
              <label for="playerRace">Player Race</label>
              <select class="u-full-width" id="playerRace">
                <option value="Terran">Terran</option>
                <option value="Protoss">Protoss</option>
                <option value="Zerg">Zerg</option>
              </select>
<!--             </div>
            <div class="six columns"> -->
              <label for="matchup">Matchup</label>
              <select class="u-full-width" id="matchup">
                <option value="TvT">TvT</option>
                <option value="TvP">TvP</option>
                <option value="TvZ">TvZ</option>
                <option value="PvT">PvT</option>
                <option value="PvP">PvP</option>
                <option value="PvZ">PvZ</option>
                <option value="ZvT">ZvT</option>
                <option value="ZvP">ZvP</option>
                <option value="ZvZ">ZvZ</option>
                <option value="TvT / TvP">TvT / TvP</option>
                <option value="TvT / TvZ">TvT / TvZ</option>
                <option value="TvP / TvZ">TvP / TvZ</option>
                <option value="PvP / PvT">PvP / PvT</option>
                <option value="PvP / PvZ">PvP / PvZ</option>
                <option value="PvT / PvZ">PvT / PvZ</option>
                <option value="ZvZ / ZvT">ZvZ / ZvT</option>
                <option value="ZvZ / ZvP">ZvZ / ZvP</option>
                <option value="ZvT / ZvP">ZvT / ZvP</option>
                <option value="TvT / TvP / TvZ">TvT / TvP / TvZ</option>
                <option value="PvP / PvT / PvZ">PvP / PvT / PvZ</option>
                <option value="ZvZ / ZvT / ZvP">ZvZ / ZvT / ZvP</option>
              </select>
       <!--      </div>
          </div> -->
          <label for="descriptionInput">Description</label>
          <textarea class="u-full-width" placeholder="Description..." id="descriptionInput"></textarea>
          <input name="createNewGuide" class="button-primary" type="submit" value="Submit">
        </form>
      </div>

Click Function:

 $('#createNewGuide').on('submit', function(e) {
    e.preventDefault();

    var data = form2object(this);
    console.log('the form will send ' + JSON.stringify(data, null, 4));

    guide_api.createGuide(data, createCb);
  });

Callback:

var createCb = function(error, data) {
  if (error) {
    console.error(error);
    $(".user-messages").html("<strong>Error! Poll create fail!</strong>");
    return;
  }
  console.log('successful create, data is ' + JSON.stringify(data, null, 4));

  guide.id = data["_id"];
  guide.playerRace = data.playerRace;
  guide.title = data.title;
  guide.matchup = data.matchup;
  guide.author = data.author;

};

Request to review my project scope

I changed my Proj 4 app concept on Friday and put together the new data model, relationships and all of the user stories. Before I get too deep in developing this, I would like an instructor to review it with me.

Ember - data won't load from localhost:3000

I have a games tables in a rails backend, sitting on localhost:3000. I am unable to hit this server with any requests from ember however. No idea why. Here is my games route in ember:

export default Ember.Route.extend({
    model: function(){
        return this.store.findAll('game');
    }
});

Games template:

<h1>Games</h1>
{{#each model as |game|}}
<p>{{game}}</p>
{{/each}}
{{outlet}}

Games model:

export default DS.Model.extend({
  home_team_id: DS.attr('number'),
  away_team_id: DS.attr('number'),
  home_team_goals: DS.attr('number'),
  away_team_goals: DS.attr('number')
});

Games adapter inherits from the application adapter. The application adapter looks like this:

export default DS.RESTAdapter.extend({
    host: 'http://localhost:3000',
    headers: {
    'Content-Type': 'application/json'
  }
});

Any help would be appreciated!

Help with third party api

I am trying to use third-party api, "Authy" to have 2-factor authentication. However, my smaller problem is making an xhr request within the back-end. I am using Rails as a backend.

creating a record is failing from broswer (500 error) & from curl (error output is below)

Cannot create a record in rails database. From the browser it appears the object (& token) being sent is good. Although the response has data listed is different & the keys are also different than the request being sent.

In curl it also fails (see curl request & error below the controller. Believe it is a problem in my participants_controller.rb which is below.

class ParticipantsController < OpenReadController
  before_action :set_participant, only: [:update, :destroy]

  # GET /participants
  def index
    @participants = Participant.all

    render json: @participants
  end

  # GET /participants/1
  def show
    @participant = Participant.find(params[:id])

    render json: @participant
  end

  57a2ff35786c6ee349462308bb87409a
  # PATCH /participants/1
  def update
    if @participant.update(participant_params)
      head :no_content
    else
      render json: @participant.errors, status: :unprocessable_entity
    end
  end

  # DELETE /participants/1
  def destroy
    @participant.destroy

    head :no_content
  end

  def set_participant
    @participant = current_user.participants.find(params[:id])
  end

  def participant_params
    params.require(:participant).permit(:name, :email, :phone, :role)
  end

  private :set_participant, :participant_params
end

Below is the request & error from chrome developer.

token
"57a2ff35786c6ee349462308bb87409a"
app.js:158 Object {participant: Object}participant: Objectboat_id: ""email: "[email protected]"name: "Davy Jones"phone: "777-888-9999"role: "captain"team_id: ""__proto__: Object__proto__: Object
:3000/participants:1 POST http://localhost:3000/participants 
localhost/:1 XMLHttpRequest cannot load http://localhost:3000/participants. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access. The response had HTTP status code 500.
----------

Below is the curl request.
----------
curl --request POST --header "Authorization: Token token=57a2ff35786c6ee349462308bb87409a" --header "Content-Type: application/json" -d '{
  "participant": {
    "name":"Davy Jones",
    "email":"[email protected]",
    "phone":"777-888-9999",
    "role":"captain"
  }
}'  http://localhost:3000/participants

Below is the error from the curl request.

class ParticipantsController < OpenReadController
  before_action :set_participant, only: [:update, :destroy]

  # GET /participants
  def index
    @participants = Participant.all

    render json: @participants
  end

  # GET /participants/1
  def show
    @participant = Participant.find(params[:id])

    render json: @participant
  end

  57a2ff35786c6ee349462308bb87409a
  # PATCH /participants/1
  def update
    if @participant.update(participant_params)
      head :no_content
    else
      render json: @participant.errors, status: :unprocessable_entity
    end
  end

  # DELETE /participants/1
  def destroy
    @participant.destroy

    head :no_content
  end

  def set_participant
    @participant = current_user.participants.find(params[:id])
  end

  def participant_params
    params.require(:participant).permit(:name, :email, :phone, :role)
  end

  private :set_participant, :participant_params
end
~/wdi/projects/project4/project4-backend (development)$ curl --request POST --header "Authorization: Token token=57a2ff35786c6ee349462308bb87409a" --header "Content-Type: application/json" -d '{
>   "participant": {
>     "name":"Davy Jones",
>     "email":"[email protected]",
>     "phone":"777-888-9999",
>     "role":"captain"
>   }
> }'  http://localhost:3000/participants

Scope/Reality Check re: Ember + Auth

Wouldn't mind getting a reality check on the scope of what I'm trying to do, re: Ember and Authentication.

Currently trying to build an Ember app. Doesn't seem like it's going too badly without authentication, but once I try to dive in to authentication, the complexity seems to get exponentially greater, and not sure how to prioritize my concerns as they relate to the requirements of the project.

Handlebars not displaying "future trip data" in an unordered list properly

I am trying to display a list of all the future trips belonging to a user. Upon clicking the Future Trips button, a GET request pulls the index of all future trips. This is working properly as Object: {future_trips: Array[35]} is logged on my Chrome console. I then use handlebars to populate an unordered list using each data element as every line item. I have played around with different templates, but cannot get any of them to work.

My index file;

<div id="my_profile" hidden>
        <h3>My Profile</h3>
          <p>Planning ahead?  View your <button id="future">Future Trip List</button></p>
            <ul id="futureList" style="list-style-type:none" hidden>
                  <li>Your Future Trips</li>
                  <script id="allFutureTrips" type="text/x-handlebars-template">
                    {{#each future_trips}}
                      <li>{{park_id}}</li>
                      <li>{{reason}}</li>
                      <li>{{date_end}}</li>
                      <li>{{date_begin}}</li>
                    {{/each}}
                </script>
            </ul>
          <p>Feeling reminiscent? View your <button id="past">Past Trips</button></p>
      </div>

I have an all Parks Template to populate a dropdown list. That works, but when I try to follow the same formula

  allParksTemplate: Handlebars.compile($('#allParks').html()),
  allFutureTripsTemplate: Handlebars.compile($('#future_trips').html()),

The Chrome console tells me
Uncaught Error: You must pass a string or Handlebars AST to Handlebars.compile. You passed undefined

So I tried;

var data = {future_trips}: park_id, date_end, date_begin, reason};
  var allFutureTripsScript = $("#futureList").html();


    var allFutureTripsTemplate = Handlebars.compile (allFutureTripsScript);
$(document.body).append (allFutureTripsTemplate (data));

But I couldn't get the syntax right. I have a feeling I need to use jquery on the the future_trips for "var data" but I can't get it to work.

I also tried playing with;

var future_trips = {future_trips: [
  park_id: future_trips.park_id,
  reason: future_trips.reason,
  date_begin: future_trips.date_begin,
  date_end: future_trips.date_end

Handlebars.registerHelper($('list'), function(futureTrips, options) {
  var out = "<ul>";

  for(var i=0, l=futureTrips.length; i<l; i++) {
    out = out + "<li>" + options.fn(futureTrips[i]) + "</li>";
  }

  return out + "</ul>";
  });
]};

and changed the respective index to;
*note: the handlebar tags had no spacing between them when I tested it, but have added them for legibility

{{#list future_trips}} {{park_id}}  {{date_begin}} {{date_end}} {{reason}} {{/list}}

But that got me nowhere.

rails c gives me the following error when I try to create entry

I'm getting this error when I try to add an entry with pry:
NoMethodError: undefined method password_digest' for #<Profile:0x007fe6c8caafb0> from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activemodel-4.2.4/lib/active_model/attribute_methods.rb:433:inmethod_missing'

I did try to look it up already.
Am I missing a gem that is not apparent to me? If not that, what is my issue?

Thanks!

Paperclip Image Not Loading

I have been working with Jeff that he had a similar issue with but his solution is not working for me.

I am able to upload a photo to AWS but I am not able to get the image file path to pass into my handlebars template for the item.

My handlebars template is

<script id="userItemsDashboard" type="text/x-handlebars-template">

  {{#each items}}
    <li class="card-dashboard">
      <article class="profile">
        <figure>
          <img src="https://s3.amazonaws.com/wdi-items/items/item_images/000/000/0{{id}}/item_feature/{{item_image_file_name}}">
          <figcaption id="item-{{id}}">{{title}}</figcaption>
          <h3>{{zipcode}}</h3>
          <p>{{description}}</p>
        </figure>
        <ul class="tags">
          <li>
            <a href="#" data-itemId='{{id}}'>Edit</a>
          </li>
          <li>
            <a href="#" data-itemId='{{id}}'>Delete</a>
          </li>
          <li>
            <a href="#">Mark as Borrowed</a>
          </li>
        </ul>
      </article>
    </li>
  {{/each}}

</script>

The error I am getting in my console is

"GET https://s3.amazonaws.com/wdi-items/items/item_images/000/000/030/item_feature/ 403 (Forbidden)"

It is not reading the {{item_image_file_name}} which is the correct name of how it is stored in my local database.

Register, Login, and create profile, all in one go.

I plan on having profiles set up in my express application, and I would like it if I could add to my register/signup controller to also log the user in and/or create a blank profile associated with that user so that I can remove a lot of specific error handling elsewhere in my code regarding interacting with a nonexistent profile.
I know where the code needs to be added to the register function in the controller...

signup : {
        post : function(req, res, next) {
            /* SNIP */
            pUser.then(function (user) {
                return user.setPassword(req.body.password);
            }).then(function() {
                // CODE GOES HERE!
                res.sendStatus(200);
            }).catch(function(err) {
                next(err);
            });
        }
    }

...but I'm not sure what I need to add there. I know that I can't use req.user immediately to create a profile because the user isn't logged in after they register, so that would be a bonus. Is this something I would handle in the front end by just making multiple ajax requests after registering or is there something I can do in the back end?

Login routing(?) error:

XMLHttpRequest cannot load http://localhost:3000/login. The request was redirected to 'http://localhost:3000/', which is disallowed for cross-origin requests that require preflight.

Frontend: clickhandler

 $('#login-form').on('submit', function(e) {
        e.preventDefault();
        var credentials = form2object(this);
        lounge_api.login(credentials, function(err, data) {
            handleError(err, data, function() {
                alert("Invalid credentials");
            });
        });
    });

Ajax:

    login: function login(credentials, callback) {
        this.ajax({
            method: 'POST',
            url: this.url + '/login',
            xhrFields: {
                withCredentials: true
            },
            contentType: 'application/json',
            data: JSON.stringify(credentials)

        }, callback);
    },

Backend route: Route--

router.route('/login').
    get(authCtrl.deny).
    post(authCtrl.login.post);

Backend controller:

    login : {
        post : passport.authenticate('local', {
            successRedirect : '/',
            failureRedirect : '/'
        })
    },

Register works, I've used this code before in project 3 and I'm getting a 302 from the server.
OPTIONS /login 204 0.403 ms - - POST /login 302 7354.613 ms - 23

xhr request in handlebars helper

I am trying to write a handlebars helper to take in user's location data and return the local weather, something like {{getWeather profile.location}}.

Here is my handlebar function:

Handlebars.registerHelper('getWeather', function(location) {
            function get_weather(){
              var xhr = new XMLHttpRequest();
              var userWeather;
              xhr.open("GET","http://query.yahooapis.com/v1/public/yql?q=select item from weather.forecast where woeid in (select woeid from geo.places(1) where text='" + location + "')&format=json",true);
              xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                  var weather = JSON.parse(xhr.responseText);
                  var item = weather.query.results.channel.item;
                  userWeather = item.condition.text;
                };
              };
              xhr.send();
              return userWeather;
            }
            return new Handlebars.SafeString(get_weather());
          });

There might be an asynchronous issue going on that won't set any value to userWeather variable, which gives me "undefined" as the return.

Any hint on this? Thanks!

Mongoose validation error

My server is giving a 500 error: "message": "ProjectZipFile validation failed"

ProjectZipFile schema:

var projectZipFileSchema = new mongoose.Schema({
  url: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  // user_id: {
  //   type: UserId,
  //   ref: "User"
  // },
  createdAt: {
    type: Date,
    required: Date.now
  }
});

controller:

var index = function index(req, res, next) {
  ProjectZipFile.find({}, {__v: 0}).exec().then(function(zipFiles) {
    res.json(zipFiles);
  }).catch(function(error) {
    next(error);
  });
};

var create = function create(req, res, next) {
  awsUpload(req.file.buffer, {
    title: req.body.name
    //user_id: req.user._id
  }).then(function(data){
    // req.user.userFiles.push(data._id);
    // req.user.save();
    res.json(data);
  }).catch(function(err){
    next(err);
  });
};

awsUpdate creation:

var awsUpload = function(buffer, options) {
  var fileType = getFileType(buffer);

  if (!fileType) {
    fileType = {
      ext: 'bin',
      mime: 'application/octet-stream'
    };
  }

  var key = util.format('%s/%s.%s',
    (new Date()).toISOString().split('T')[0],
    crypto.pseudoRandomBytes(16).toString('hex'),
    fileType.ext);

  var params = {
    ACL: 'public-read',
    Bucket: bucket,
    Key: key,
    ContentType: fileType.mime,
    Body: buffer
  };

  return new Promise(function(resolve, reject) {
    awsS3.upload(params, function(err, data) {
      if (err) {
        reject(err);
      }
      resolve(data);
    });
  }).then(function(data) {
    return ProjectZipFile.create({
      url: data.Location,
      title: fileType.title,
      // user_id: options.user_id
    });
  });
};

can't deploy to heroku

I got the following error message: I'm just feeling paranoid because last time I did not have to reinstall npm or node

2015-12-16T17:15:47.651803+00:00 heroku[web.1]: Starting process with command npm start
2015-12-16T17:15:50.318634+00:00 app[web.1]:
2015-12-16T17:15:50.318631+00:00 app[web.1]: > [email protected] start /app
2015-12-16T17:15:50.318622+00:00 app[web.1]:
2015-12-16T17:15:50.318633+00:00 app[web.1]: > node ./bin/www
2015-12-16T17:15:51.393229+00:00 app[web.1]: Error: connect ECONNREFUSED 127.0.0.1:27017
2015-12-16T17:15:51.393219+00:00 app[web.1]:
2015-12-16T17:15:51.413035+00:00 app[web.1]: npm ERR! Linux 3.13.0-71-generic
2015-12-16T17:15:51.393224+00:00 app[web.1]: process.nextTick(function() { throw err; })
2015-12-16T17:15:51.393230+00:00 app[web.1]: at Object.exports._errnoException (util.js:856:11)
2015-12-16T17:15:51.393231+00:00 app[web.1]: at exports._exceptionWithHostPort (util.js:879:20)
2015-12-16T17:15:51.393232+00:00 app[web.1]: at TCPConnectWrap.afterConnect as oncomplete
2015-12-16T17:15:51.406209+00:00 app[web.1]:
2015-12-16T17:15:51.413665+00:00 app[web.1]: npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
2015-12-16T17:15:51.414074+00:00 app[web.1]: npm ERR! node v5.1.1
2015-12-16T17:15:51.393223+00:00 app[web.1]: /app/node_modules/mongoose/node_modules/mongodb/lib/server.js:235
2015-12-16T17:15:51.415469+00:00 app[web.1]: npm ERR! npm v3.3.12
2015-12-16T17:15:51.415829+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2015-12-16T17:15:51.416139+00:00 app[web.1]: npm ERR! [email protected] start: node ./bin/www
2015-12-16T17:15:51.416423+00:00 app[web.1]: npm ERR! Exit status 1
2015-12-16T17:15:51.416697+00:00 app[web.1]: npm ERR!
2015-12-16T17:15:51.416980+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script 'node ./bin/www'.
2015-12-16T17:15:51.417278+00:00 app[web.1]: npm ERR! Make sure you have the latest version of node.js and npm installed.
2015-12-16T17:15:51.417528+00:00 app[web.1]: npm ERR! If you do, this is most likely a problem with the node-express-session package,
2015-12-16T17:15:51.393225+00:00 app[web.1]: ^
2015-12-16T17:15:51.417785+00:00 app[web.1]: npm ERR! not with npm itself.
2015-12-16T17:15:51.417977+00:00 app[web.1]: npm ERR! Tell the author that this fails on your system:
2015-12-16T17:15:51.418170+00:00 app[web.1]: npm ERR! node ./bin/www
2015-12-16T17:15:51.418362+00:00 app[web.1]: npm ERR! You can get their info via:
2015-12-16T17:15:51.418565+00:00 app[web.1]: npm ERR! npm owner ls node-express-session
2015-12-16T17:15:51.418757+00:00 app[web.1]: npm ERR! There is likely additional logging output above.

Form data not submitting correctly

I am trying to generate a new Future Trip list. The parameters for my future_trips_controller are

def future_trip_params
    params.require(:future_trip_params).permit(
                                        :park_id,
                                        :reason,
                                        :date_end,
                                        :date_begin
    )
  end

After logging in, I submit the form;

<form id="newFuture" hidden>
        <select class="dropdown" name="park_id">
          <script id="allParks" type="text/x-handlebars-template">
            {{#each park}}
              <option value={{id}}>{{name}}</option>
            {{/each}}
          </script>
        </select>
        <input name="reason" type="text" value="" size="30" placeholder="Why do you want to go here?">
        <input name="date_begin" type="text" size="30" value="" placeholder="When will your trip start?">
        <input name="date_end" type="text" size="30" value="" placeholder="When will your trip end?">
        <input id="futureList" type="submit" size="30" value="futureList">
      </form>

My api request is;

newFutureTrip: function newFutureList(future_trip_params, callback) {
    this.ajax({
      method: 'POST',
      // url: 'http://httpbin.org/post',
      url: this.url + '/future_trips',
      contentType: 'application/json; charset=utf-8',
      data: JSON.stringify(future_trip_params),
      dataType: 'json',
      headers: {
        Authorization: "Token token=" + token
      }
    }, callback);
  }

my callback is;

newFutureTripCB: function(err, data) {
    if (err) {
      console.log(err);
    } else {
      console.log('working',data);
    }
  },

My click handler;

$('#newFuture').on('submit', function(e){
    var future_trip_params = wrap('future_trip_params', form2object(this));
    api.newFutureTrip(future_trip_params, cb.newFutureTripCB);
    e.preventDefault();
  });

When I submit the form, I get this error message in the rails server;

ArgumentError (too few arguments):
app/controllers/future_trips_controller.rb:10:in format' app/controllers/future_trips_controller.rb:10:increate'

In the chrome console under the Request Payload I am seeing;
future_trip_params: {park_id: "8", reason: "It's nice", date_begin: "2015-12-23", date_end: "2015-12-24"}

So I would think that it is grabbing the information but for some reason it's not registering them.

Having trouble getting Web sockets to work when client and server are separated

I am using http://socket.io/ to implement chat in my project 4. The demo is working it is implemented by the server serving up the index.html back to the client:
app.get('/', function(req, res){
res.sendfile('index.html');
});

This is not the model I want to use. I've chaning the implementation of the index.html file so that will the client can be separate from the server:
var socket = io();

  socket.connect('http://localhost:3000');

I have status message printed when a client connects to the server. I don't see that and
I am getting error messages with client is polling:
GET http://file/socket.io/?EIO=3&transport=polling&t=1450194190760-3 net::ERR_NAME_NOT_RESOLVED

Login is hijacking my profiles model

Registration and login are still working fine, and I've been able to create profiles and requests for them on the backend. For reasons that I am not able to determine on my own or with internet searches, login and registration are now linking to the profiles model and returning this error POST http://localhost:3000/profiles 401 (Unauthorized). What I am unable to figure out if why the login or registration event handlers are even triggering profiles. Profiles is a separate form, in a separate div, in a separate section of the web page.

I'd like some assistance/advice on how to fix the issue, so that I can actually create a profile, with the profile form.

Paperclip upload error

I followed Matt's Repo, went to the thoughtbot Paperclip Github walk through, talked to Kayla about any changes from Matt's repo. Tried looking it up online and hit a reasonable time box on it.

I have my Pets Controller pointing at Application Controller so I can route everything through the Authentication. When trying to upload, I get a 401 Error.

This is what I get in the console
Object {credentials: Object} clickhandlers.js:83 Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.(anonymous function) @ clickhandlers.js:83m.event.dispatch @ jquery.js:3r.handle @ jquery.js:3 :3000/pets/undefined:1 PATCH http://localhost:3000/pets/undefined 401 (Unauthorized) clickhandlers.js:78 Whoops!(anonymous function) @ clickhandlers.js:78j @ jquery.js:2k.fireWith @ jquery.js:2x @ jquery.js:4b @ jquery.js:4

This is my Patch on PetsController

class PetsController < ApplicationController
  before_action :set_pet, only: [:update, :destroy]
# PATCH /pets/1
  def update
    if @pet.update(pet_params)
      head :no_content
    else
      render json: @pet.errors, status: :unprocessable_entity
    end
  end```

This is what I get from the Rails Console

Rendered text template (0.0ms)
Filter chain halted as :authenticate rendered or redirected
Completed 401 Unauthorized in 0ms (Views: 0.2ms | ActiveRecord: 0.0ms)

Started OPTIONS "/pets/undefined" for ::1 at 2015-12-14 13:48:56 -0500

Started PATCH "/pets/undefined" for ::1 at 2015-12-14 13:48:56 -0500
Processing by PetsController#update as /```

This is my click handler

$('#submit').on('click', function(e){
    e.preventDefault();
    var reader = new FileReader();
    var token = $('.token').val();
    var id = $('.id').val();

    reader.onload = function(event){
      $.ajax({
        url: 'http://localhost:3000/pets/' + id,
        method: 'PATCH',
        data: { pet: {
          dog_pic: event.target.result
        } }
      }).done(function(response){

      }).fail(function(response){
        console.error("Whoops!");
      });
    };

    $fileInput = $('#dog-pic');
    reader.readAsDataURL($fileInput[0].files[0]);
  });```

This is the HTML form
Poster Upload Picture ```

Shhhh! It's a secret

OK, so I want to keep my MapBox key a secret. I know how do this on the backend using a .env file, but my research into doing it in JavaScript is not coming up with much. I'd like to avoid doing this https://github.com/motdotla/dotenv, because it's not a node project, and I'm not sure how this would work deploying to gh-pages.
Help?

Not connecting my image uploads to aws-sdk

I am using paperclip and have installed the paperclip and aws gems needed. I followed Matt's repo to incorporate paperclip on the back-end and added the file reader in my js file.

When testing this out the image file is read and I can see it in my local database however the image is not being saved in the bucket in AWS S3.

There are no error messages that I am getting so I am not sure what I am missing.

Profile found by ID properly in one place, but not in another.

I'm testing the final functionality of my profile system in Postman and I'm running into a strange error.

While logged in as a user when you use a GET request to the route /profile, it uses the following line to find the current user's profile by id:
Profile.findOne({userID: req.user._id.toString()}).exec()
And it works as expected, if there is no profile, this...

.then(function (profile) {
          if(!profile) {
            var err = new Error("No Profile found");
            return next(err);
          }

...happens, and if there is a profile: res.json(profile);
Those lines of code all work as they are intended to.
Later on, with a GET request to /profile/trust I have identical code performing the same task, finding a profile by ID and throwing an error if it can't find anything,

Profile.findOne({userID: req.user._id.toString()}).exec()
        .then(function (profile) {
          if(!profile) {
            var err = new Error("Profile not created yet");
            return next(err);
          }

but when I tested this on a user of which I already created a profile for (and the profile does get returned properly when I use GET at /profile), when I use GET at /profile/trust, no profile is found, instead I receive null.

Is this a scope issue? The routing that I have seems fine and the intended function is firing, but using a search method identical to one I have elsewhere is yielding different results?

AWS routing error (Express-multer + AWS)

Jeff Meyers and I have been working together to push Antony's express-multer code into my backend. I believe I have things close(sending post request with route set up) but I'd really appreciate a bit of guidance in understanding the process from submit => upload complete.

I understand this is not a specific question, my apologies.

Got any more of those fancy controller fixes?

I'm getting a similar angry message relating to my update profile plans.

On the backend, I either get undefined method 'find' or 'profiles' depending on whether I have 'profiles' or 'profile'.
NoMethodError (undefined method find' for #<Profile:0x007ff63d878670>): app/controllers/profiles_controller.rb:49:inset_profile',

Here's the frontend error

PATCH http://localhost:3000/profiles/undefined 500 (Internal Server Error)
script.js:144 Object {jqxher: Object, status: "error", error: "Internal Server Error"}

Handlebars/click handler not working

I'm trying to use handlebars to display a user's profile. I am able to create/update/delete profiles on the front end. I'm getting nothing when I try the "My Profile" button. I put in a debugger, and it looks I'm not even getting to the click handler for showing the profiles. I've compared ajax/handlers/html to see if there's a spelling or naming error, but I don't see anything. I've asked other students to look for a naming error, but no luck.

I've included what I think might be useful code for you to look at. What would be the next course of action for me to take to figure out what's going on?

here's my ajax:
get_profile: function (token, callback) {
this.ajax({
method: 'GET',
url: this.url + '/profiles',
headers: {
Authorization: 'Token token=' + token
},
contentType: 'application/json; charset=utf-8'
}, callback);
},

script.js...here's my click handler

$("#jello").on('submit', function(e) {
debugger;
e.preventDefault();
var token = $('.token').val();
swap_api.get_profile(token, function(err, data) {
if (err) {
console.log(err);
return;
} else {
var templateTarget = $('#my-profile-template').html();
var template = Handlebars.compile(templateTarget);
var content = template(data);
$('#myProfile').html(content);
html:

<script id="my-profile-template" type="x-handolebars-template"> {{each profiles}} {{/each}}
username studio website profileid
{{username}} {{studio}} {{website}} Edit Delete
</script>

div and buttons for handlebars:

            <div id="myProfile" value="Profile"></div>

Issues with create

When clicking on create getting error, the token is being passed but the object is not.

('#create-credentials').on('click', function(e) {
var credentials = wrap('credential', form2object(this));
var credentials = form2object(e.target);
var token = PasswordApp.token;
e.preventDefault();
whatsMyPassword.createPasswords(token, credentials, callback); token = "d573a6666f82b476f0b99188fd2d6c03", credentials = Object {}
});

To ember or not to ember

I have my back end built and a kind of proof of concept for doing this as an ember project, but I'm not sure I can pull it of and I'm looking for some guidance.

Accidentally cloned a repo inside another repo

When I created my back-end repo for project 4, I accidentally cloned the Antony's api repo into mine and not sure how to fix this. Hopefully it is still early enough to fix this without being too damaging to my work so far.

Can this be fixed from either git or github or do I need to make a new back-end repo and start over?

Creating a User and Profile in sql with the submission of the same form

I have successfully created a user and I'm now trying to create a profile as well when I submit the registration form. The three fields are 'username', 'e-mail' and 'password'. Ideally I would like the profile to contain just the username for security purposes. Do I need the profile to contain a user id as well as a profile id? I tried to separate the form into a class (with username) and an id (without the username), thinking that it would submit 'email', 'password' and 'username' to Profile, and just 'email' and 'password' to User, but that broke everything.

My index.html file is;

<h3>Register</h3>
        <form id="register">
          <input name="username" type="text" value="" size="15" placeholder="username">
          <input name="email" type="text" value="" size="15" placeholder="e-mail">
          <input name="password" type="password" size="10" value="" placeholder="password">
          <input id="register" type="submit" value="Register">
        </form>

My click handler is;

var url = 'http://www.localhost:3000';

  var form2object = function(form) {
    var data = {};
    $(form).children().each(function(index, element) {
      var type = $(this).attr('type');
      if ($(this).attr('name') && type !== 'submit' && type !== 'hidden') {
        data[$(this).attr('name')] = $(this).val();
      }
    });
    return data;
  };

  var wrap = function wrap(root, formData) {
    var wrapper = {};
    wrapper[root] = formData;
    return wrapper;
  };

$(document).ready (function() {

  $('#register').on('submit', function(e) {
    var credentials = wrap('credentials', form2object(this));
    api.register(credentials, cb.registerCB);
    e.preventDefault();
  });

   $('#profile').on('click', function(e){
    var username = wrap('username', form2object(this));
    api.newProfile(username, cb.newProfileCB);
    e.preventDefault();
  });

My ajax api calls;

var api = {

url: 'http://www.localhost:3000',

url: 'http://httpbin.org/post',

  ajax: function(config, cb) {
    $.ajaxSetup({
      xhrFields: {
        withCredentials: true
      }
    });
  },

  ajax: function(config, cb) {
    $.ajax(config).done(function(data, textStatus, jqxhr) {
      cb(null, data);
    }).fail(function(jqxhr, status, error) {
      cb({jqxher: jqxhr, status: status, error: error});
    });
  },

 register: function register(credentials, callback) {
    this.ajax({
      method: 'POST',
      // url: ,
      url: this.url + '/register',
      contentType: 'application/json; charset=utf-8',
      data: JSON.stringify(credentials),
      dataType: 'json'
   }, callback);
 },

newProfile: function newProfile(username, callback) {
    this.ajax({
      method: 'POST',
      url: this.url + '/profile',
      contentType: 'application/json; charset=utf-8',
      // data: JSON.stringify({}),
      dataType: 'json'
    }, callback);
  },
};

and my callback;

var cb = {
registerCB: function(err, data){
    if (err) {
      console.log(err);
    } else {
      api.newProfile(cb.newProfileCB);
      console.log(data);
    }
  },

newProfileCB: function(err, data) {
    if (err) {
      console.error(err);
    } else {
      console.log("success:", data);
    }
  },
};

Planning files disappeared when creating express boilerplate

As the title suggests when I ran the command to set up my express boilerplate, all of my planing files disappeared. Here is what happened so far

On branch "development" just after merging my "planning" branch with all of the planning files in it, my repo contained:
README.txt
LICENSE
planning directory containing:
-I_Wonder_models.png
-model_planning.txt
-routes_planning.txt

I created and switched to the new branch "boilerplate"
I ran the following command in console: express --hbs --git --force
The boilerplate is there, the README and LICENSE are intact, and the planning folder is there, but the planning folder is empty.
I also seem to be able to switch branches even though the changes are unstaged.
git status shows this:

~/wdi/teopaolucci/projects/wonder/wonder-backend (boilerplate)$ git status
On branch boilerplate
Your branch is up-to-date with 'origin/boilerplate'.
Untracked files:
  (use "git add <file>..." to include in what will be committed)

    .gitignore
    app.js
    bin/
    package.json
    public/
    routes/
    views/

nothing added to commit but untracked files present (use "git add" to track)

Want to understand best Date format for ActiveRecord

My models are built, simple but built and are tested in Rails C, and the idea is that a User will have a Pet. In that Pet they will be able to say the date of the last rabies, heartworm and tick medicine application. Then this will reset a predetermined clock (saw a couple promising gems but they seem to involve views) and start a new countdown.

There are several options and I want to make sure I am utilizing the right type in order to accomplish the goals of the app.

I have looked into this for a couple hours and am just not finding the answers that click.

Thanks in advance.

my schema:
create_table "pets", force: :cascade do |t|
t.string "name"
t.string "dob"
t.date "last_rabies"
t.date "last_tick"
t.date "last_heartworm"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.integer "user_id"
end

creating a record is failing from browser (500 error) & from curl (error output is below). Now getting internal server error (500) on delete record requests.

Cannot create a record in rails database. From the browser it appears the object (& token) being sent is good. Although the response has data listed is different & the keys are also different than the request being sent.

In curl it also fails (see curl request & error below the controller. Believe it is a problem in my participants_controller.rb which is below.

class ParticipantsController < OpenReadController
  before_action :set_participant, only: [:update, :destroy]

  # GET /participants
  def index
    @participants = Participant.all

    render json: @participants
  end

  # GET /participants/1
  def show
    @participant = Participant.find(params[:id])

    render json: @participant
  end

  57a2ff35786c6ee349462308bb87409a
  # PATCH /participants/1
  def update
    if @participant.update(participant_params)
      head :no_content
    else
      render json: @participant.errors, status: :unprocessable_entity
    end
  end

  # DELETE /participants/1
  def destroy
    @participant.destroy

    head :no_content
  end

  def set_participant
    @participant = current_user.participants.find(params[:id])
  end

  def participant_params
    params.require(:participant).permit(:name, :email, :phone, :role)
  end

  private :set_participant, :participant_params
end

Below is the request & error from chrome developer.

token
"57a2ff35786c6ee349462308bb87409a"
app.js:158 Object {participant: Object}participant: Objectboat_id: ""email: "[email protected]"name: "Davy Jones"phone: "777-888-9999"role: "captain"team_id: ""__proto__: Object__proto__: Object
:3000/participants:1 POST http://localhost:3000/participants 
localhost/:1 XMLHttpRequest cannot load http://localhost:3000/participants. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5000' is therefore not allowed access. The response had HTTP status code 500.

Below is the curl request.

curl --request POST --header "Authorization: Token token=57a2ff35786c6ee349462308bb87409a" --header "Content-Type: application/json" -d '{
  "participant": {
    "name":"Davy Jones",
    "email":"[email protected]",
    "phone":"777-888-9999",
    "role":"captain"
  }
}'  http://localhost:3000/participants
~/wdi/projects/project4/project4-backend (development)$ curl --request POST --header "Authorization: Token token=57a2ff35786c6ee349462308bb87409a" --header "Content-Type: application/json" -d '{
>   "participant": {
>     "name":"Davy Jones",
>     "email":"[email protected]",
>     "phone":"777-888-9999",
>     "role":"captain"
>   }
> }'  http://localhost:3000/participants

OAuth2.0 Help

A sizable number of us are interested in implementing OAuth2.0 in our projects. Are there any instructors who are familiar with this who wouldn't mind taking some time this morning to offer some guidance?

deploying one page app and visual question on my views

Good morning,

I have an app that uses views. Since this will be one repository, where should I deploy to gh-pages or heroku?

I have some quick questions on views. I have the views working but trying to make sure I use the <% %> and <%= %> tags correctly with my bootstrap.

paper-clipped my will

This is a two person issue...Jeff and I are trying to send a patch request that includes a "paperclipped" parameter, whether we really want it to or not.

We've tried dividing the problem solving: I've been working on changing the appropriate controller's update: Here's what I changed my profile controller to
def update
@Profile = Profile.find(params[:id])
@profile.update_attributes(:username, :studio, :website)
end

and here's my terminal error:
ArgumentError (wrong number of arguments (3 for 2)):
app/controllers/profiles_controller.rb:39:in `update'

I don't understand what 3 for 2 means.

Jeff has been trying to work the problem from the frontend:
Here's his terminal response
ActionController::ParameterMissing (param is missing or the value is empty: pet):
app/controllers/pets_controller.rb:54:in pet_params' app/controllers/pets_controller.rb:35:inupdate'

Problem using rails console to create a new event

I generated a new model called Events with this command:
'rails g model event title:string descr:text location:string instructor:integer price:decimal start_time:datetime end_time:datetime'

Then I ran the migration.

When I bring up the ruby console and try to access the Event table by 'Event' to see the columns in the database, I get this error:

SyntaxError: /Users/laurisa/WDI/Proj_4/freshEX/app/models/event.rb:1: unterminated regexp meets end of file
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:457:in load' from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:457:inblock in load_file'
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:647:in new_constants_in' from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:456:inload_file'
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:354:in require_or_load' from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:494:inload_missing_constant'
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:184:in const_missing' from (irb):1 from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.2.4/lib/rails/commands/console.rb:110:instart'
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.2.4/lib/rails/commands/console.rb:9:in start' from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.2.4/lib/rails/commands/commands_tasks.rb:68:inconsole'
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.2.4/lib/rails/commands/commands_tasks.rb:39:in run_command!' from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/railties-4.2.4/lib/rails/commands.rb:17:in<top (required)>'
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:274:in require' from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:274:inblock in require'
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:240:in load_dependency' from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:274:inrequire'
from /Users/laurisa/WDI/Proj_4/freshEX/bin/rails:9:in <top (required)>' from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:268:inload'
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:268:in block in load' from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:240:inload_dependency'
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/gems/2.2.0/gems/activesupport-4.2.4/lib/active_support/dependencies.rb:268:in load' from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:inrequire'
from /usr/local/var/rbenv/versions/2.2.3/lib/ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in require' from -e:1:in

'irb(main):002:0>

Rendering Handlebars

I've been having trouble getting my handlebars to actually display in the html but the ajax call I'm using is console logging the correct data

HTML:

<!-- show guides table -->
      <div id = "show-all-guides">
        <table id="showAllGuidesTable" class = "table table-hover">
          <thead>
            <th> Player Race </th>
            <th> Guide </th>
            <th> Matchup </th>
            <th> Created On </th>
          </thead>
          <tbody id = "showAllGuides">
            <tr>
            </tr>
          </tbody>
        </table>

          <!-- show all guides hbs template -->
        <script id = "allGuidesHandlebars" type = "text/x-handlebars-template">
          {{#each guides}}
            <tr>
              <td>{{playerRace}}</td>
              <td>{{title}}</td>
              <td>{{matchup}}</td>
              <td>{{date}}</td>
              <td><button class="show-guide-button" data-id={{_id}}> Show Guide </button> </td>
            </tr>
          {{/each}}
        </script>
        <!-- end of show all guides hbs template -->

JS Logic:

var createCb = function(error, data) {
  if (error) {
    console.error(error);
    $(".user-messages").html("<strong>Error! Guide creation failed!</strong>");
    return;
  }
  console.log('successful create, data is ' + JSON.stringify(data, null, 4));
  guide_api.readAll(readAllCb);
};

var readAllCb = function(error, data) {
  if (error) {
    console.error(error);
    $(".user-messages").html("<strong>Error! Trouble loading table!</strong>");
    return;
  }
  $("#showAllGuides").empty();
  var template = Handlebars.compile($('#allGuidesHandlebars').html());
  console.log("result is " + JSON.stringify(data, null, 4));
  var newHTML = template({guides: data.guides});
  $('#showAllGuides').show;
  $('#showAllGuides').html(newHTML);

};
 // CREATE A GUIDE
  $('#createNewGuide').on('submit', function(e) {
    e.preventDefault();

    var target = e.target;
    var title = target.guideTitle.value;
    var playerRace = target.playerRace.value;
    var matchup = target.matchup.value;
    var description = target.descriptionInput.value;

    var data = {
      title: title,
      playerRace: playerRace,
      matchup: matchup,
      description: description
    }

    console.log('the form will send ' + JSON.stringify(data, null, 4));

    guide_api.createGuide(data, createCb);

  });

Ember: createRecord not adding hasMany/belongsTo association

Currently working with the following for my ember data create action:

actions: {
    createWorkout: function(workoutData, athleteID){
      var newWorkout = this.store.createRecord('workout', workoutData);
      this.store.findRecord('athlete', athleteID).then(function(athlete){
        athlete.get('workouts').pushObject(newWorkout);
        newWorkout.save();
      });
    } 

Bubbling up the action from 2 components down (nearly identical to how I refactored the Pokemon example to avoid Ember Views. Code is close to what Matt B came up with, but I'm using pushObject instead since I'm adding to an array). I can create workouts til the cows come home, but assigning the belongsTo relationship to the workout itself does not persist on the back end.

I've added a restriction on sequelize to not allow athlete_id to be null as a check to not inadvertently flood my DB with orphan workouts. On the back end, the parent entry, athlete, is not sideloading the workouts upon render, which November says is something that should be happening by default. Wondering if the two issues -- no sideloading and not assigning "belongsTo" IDs -- are related.

Ember Authentication

Any instructors have any insight in to Ember Authentication? I'm reading the documentation for Ember Simple Auth, but not sure where to start with implementation: https://github.com/simplabs/ember-simple-auth

Just going to build a simple, non-authenticated tracker in the mean time, but would be curious if any instructors have managed to get an authenticated Ember app working.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.