<repo_name>tundesalisu/SMASHBRO<file_sep>/smashbro-firstdraft/app/public/js/add.js
// Code here handles what happens when a user submits a new character on the form.
// Effectively it takes the form inputs then sends it to the server to save in the DB.

// When user clicks add-btn
$("#chirp-submit").on("click", function(event) {
  event.preventDefault();

  // Make a newChirp object
  var newChirp = {
    TITLE: $("#TITLE-box").val().trim(),
    ADDRESS: $("#ADDRESS-box").val().trim(),
    LOCATION: $("#LOCATION-box").val().trim(),
    VENUE: $("#VENUE-box").val().trim(),
    TIME: $("#INFO-box").val().trim(),
    INFO: $("#CATEGORY-box").val().trim(),
    CATEGORY: $("#LINK-box").val().trim(),
    LINK: $("#IMAGE-box").val().trim(),
    VIDEO: $("#VIDEO-box").val().trim()
   
  };

  console.log(newChirp);

  // Send an AJAX POST-request with jQuery
  $.post("/api/new", newChirp)
    // On success, run the following code
    .then(function() {

      var row = $("<div>");
      row.addClass("chirp");

      row.append("<p>" + newChirp.TITLE + " NEWLY ENTERED </p>");
      row.append("<p>" + newChirp.ADDRESS + " NEWLY ENTERED </p>");
      row.append("<p>" + newChirp.LOCATION + " NEWLY ENTERED </p>");
      row.append("<p>" + newChirp.VENUE + " NEWLY ENTERED </p>");
      row.append("<p>" + newChirp.TIME + " NEWLY ENTERED </p>");
      row.append("<p>" + newChirp.INFO + " NEWLY ENTERED </p>");
      row.append("<p>" + newChirp.CATEGORY + " NEWLY ENTERED </p>");
      row.append("<p>" + newChirp.LINK + " NEWLY ENTERED </p>");
      row.append("<p>" + newChirp.IMAGE + " NEWLY ENTERED </p>");
      row.append("<p>" + newChirp.VIDEO + " NEWLY ENTERED </p>");
      

      $("#chirp-area").prepend(row);

    });

  // Empty each input box by replacing the value with an empty string
  $("#TITLE-box").val("")
  $("#ADDRESS-box").val("")
  $("#LOCATION-box").val("")
  $("#VENUE-box").val("")
  $("#INFO-box").val("")
  $("#CATEGORY-box").val("")
  $("#LINK-box").val("")
  $("#IMAGE-box").val("")
  $("#VIDEO-box").val("")




});<file_sep>/smashbro-firstdraft/app/public/js/view.js
// Code here handles queries for specific characters in the database
// In this case, the user submits a character's name... we then pass that character's name as a
// URL parameter. Our server then performs the search to grab that character from the Database.

// when user hits the search-btn
$("#search-btn").on("click", function() {
  // save the character they typed into the character-search input
  var searchedCharacter = $("#character-search")
    .val()
    .trim();

  // Using a RegEx Pattern to remove spaces from searchedCharacter
  // You can read more about RegEx Patterns later https://www.regexbuddy.com/regex.html
  searchedCharacter = searchedCharacter.replace(/\s+/g, "").toLowerCase();

  // run an AJAX GET-request for our servers api,
  // including the user's character in the url
  $.get("/api/" + searchedCharacter, function(data) {
    // log the data to our console
    console.log(data);
    // empty to well-section before adding new content
    $("#well-section").empty();
    // if the data is not there, then return an error message
    if (!data) {
      $("#well-section").append("<h2> No event found!!!!!!!!!!!! </h2>");
    }
    else {
      // otherwise
      // append the character name
      //  for (var i = 1; i < data.length; i++) {

      // var row = $("<div>");
      // row.addClass("chirp");

      // row.append("<p>" + data[i].TITLE + " chirped.. </p>");
      // row.append("<p>" + data[i].TITLE + "</p>");

      for (var i = 1; i < data.length; i++) {
        // // create a parent div for the oncoming elements
        // var wellSection = $("<div>");
        // // add a class to this div: 'well'
        // wellSection.addClass("well");
        // // add an id to the well to mark which well it is
        // wellSection.attr("id", "character-well-" + i);
        // // append the well to the well section
        // $("#well-section").append(wellSection);
    
        // // Now add all of our character data to the well we just placed on the page
    
        // // make the name an h2,
        // $("#character-well-" + i).append("<h2>" + data[i].TITLE + "</h2>");
        // // the role an h3,
        // $("#character-well-" + i).append("<h3>Role: " + data[i].TITLE + "</h4>");
        // // the age an h3,
        // $("#character-well-" + i).append("<h3>Age: " + data[i].TITLE + "</h4>");
    
    
        var row =  
             
        '<div class="card-columns">' +
         '<div class="card cdbg">' +
           '<img class="card-img-top" src=' +'"'+  data[i].IMAGE +'"'  +   'alt="">' +
           '<div class="card-body">' +
             '<h5 class="card-title">' + data[i].TITLE + '</h5>' +
             '<p class="card-text">INFORMATIOM OF THE AREA PLAACED HERE</p>' +
           '</div>' +
         '</div>' +
         '<div class="card p-3 cdbg">'+
           '<blockquote class="blockquote mb-0 card-body">' +
            '<p>' + data[i].ADDRESS + '</p> ' +            
           '</blockquote>' +
         '</div>' +
    
         
           '<div class="card p-3 cdbg">' +
             '<blockquote class="blockquote mb-0 card-body">' +
               '<p>' + data[i].VENUE + '</p>' +               
             '</blockquote>' +
           '</div>' +
        
         
        
         '<div class="card p-3 text-center cdbg">' +
           '<blockquote class="blockquote mb-0">' +
             '<p>' + data[i].TIME + '</p>' +              
           '</blockquote>' +
    
         '</div>' +
         '<div class="card cdbg">' +
           '<div class="card-body">' +           
             '<p class="card-text"><a href="' + data[i].LINK + '">Tournament Page</a></p>' +             
           '</div>' +
         '</div>' +
         '<div class="card p-3 cdbg">' +
             '<blockquote class="blockquote mb-0 card-body">' +
               '<p><iframe width="300" height="360" src="https://www.youtube.com/embed/P-kQWJrjRV4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>' +                  
             '</blockquote>' +
           '</div>' +          
           '<div class="card p-3 cdbg">' +
               '<blockquote class="blockquote mb-0 card-body">' +
                 '<p>map map map map amp map map</p>' +                  
               '</blockquote>' +
             '</div>' +
    
             
           
       '</div>' 
    
    
    
    
    
    
    
       
        
        
    
    
      // $("#chirp-area").append(row);
     

      $("#well-section").prepend(row);

    }
    }





  });
});
<file_sep>/smashbro-firstdraft/app/routes/api-routes.js
// *********************************************************************************
// api-routes.js - this file offers a set of routes for displaying and saving data to the db
// *********************************************************************************

// Dependencies
// =============================================================
var Chirp = require("../models/chirp.js");


// Routes
// =============================================================
module.exports = function(app) {

  // Get all chirps
  app.get("/api/:LOCAL?", function(req, res) {

      // If the user provides a specific character in the URL...
      if (req.params.LOCAL) {
        // Then display the JSON for ONLY that character.
        // (Note how we're using the ORM here to run our searches)
        Chirp.findAll({
          where: {
            LOCATION: req.params.LOCAL
          }
        }).then(function(result) {
          return res.json(result);
        });
      }
      else {
        // Otherwise...
        // Otherwise display the data for all of the characters.
        // (Note how we're using Sequelize here to run our searches)
        Chirp.findAll({}).then(function(result) {
          return res.json(result);
        });
      }
    });

  //"/api/:state"

  // Add a chirp
  app.post("/api/new", function(req, res) {
    var smashtables = req.body;
    console.log("Chirp Data:");
    console.log(req.body);

    var routeName = smashtables.LOCATION.replace(/\s+/g, "").toLowerCase();

    Chirp.create({
     //routeName: routeName,
      TITLE: ChirpTITLE,
      ADDRESS: ChirpADDRESS,
      LOCATION: ChirpLOCATION,
      VENUE: ChirpVENUE,
      TIME: ChirpTIME,
      INFO: ChirpINFO,
      CATEGORY: ChirpCATEGORY,
      LINK: ChirpLINK,
      IMAGE: ChirpIMAGE,
      VIDEO: Chirp.VIDEO
      
    });

  });

};<file_sep>/smashbro-firstdraft/app/models/chirp.js
// Dependencies
// =============================================================

// This may be confusing but here Sequelize (capital) references the standard library
var Sequelize = require("sequelize");
// sequelize (lowercase) references our connection to the DB.
var sequelize = require("../config/connection.js");

// Creates a "Chirp" model that matches up with DB
var Chirp = sequelize.define("smashtables", {
 // routeName: Sequelize.STRING,
  TITLE: Sequelize.STRING,
  ADDRESS: Sequelize.STRING,
  LOCATION: Sequelize.STRING,
  VENUE: Sequelize.STRING,
  TIME: Sequelize.STRING,
  INFO: Sequelize.STRING,
  CATEGORY: Sequelize.STRING,
  LINK: Sequelize.STRING,
  IMAGE: Sequelize.STRING,
  VIDEO: Sequelize.STRING
});

// Syncs with DB
Chirp.sync();

// Makes the Chirp Model available for other files (will also create a table)
module.exports = Chirp;
