Coming to you after class for some help.

README.md

@@ -1,75 +1 @@
-# Instructions
-
-1. Set up your AWS Cloud9 environment first. Instructions are below. Video is on Canvas.
-2. Fork this repo to your own GitHub account. Otherwise you can't push.
-3. Clone your fork to Cloud9 and complete your homework in the main branch or a development branch.
-4. Push your homework changes back to your fork on GitHub, merging into main if necessary.
-5. Open a pull request to mverdicchio/421-reading-log to submit your homework
-6. Post the link to your PR on Canvas to submit.
-
-# AWS Cloud9 Setup
-
-Follow [the video of my setup](https://youtu.be/IwRPcyY891g). In the video you will see the following actions (with approximate time stamps).
-* (00:00) Create a new environment with t2.micro and Ubuntu Server 18.04
-* (00:35) Create and run the [resizing script from AWS](https://docs.aws.amazon.com/cloud9/latest/user-guide/move-environment.html#move-environment-resize). This will increase the amount of storage you have behind your C9 instance. Some of the libraries we install take up extra space and it can run out.
-* (01:53) Install postgres and a dependency. We will use this database instead of sqlite3. Here's the command:
-  * `sudo apt-get install postgresql postgresql-contrib libpq-dev`
-* (03:23) Clone your fork into C9 (do not clone my repo -- so you will use your own remote URL).
-  * Don't forget to change directories into the project root.
-* (03:36) Run `bundle install`, which will install all required gems listed in `Gemfile`.
-* (04:18) Install `figaro`, which will generate `config/application.yml` locally.
-* (04:47) Edit `config/appication.yml` with the environment variables (database username and password) EXACTLY as shown.
-
-```
-PG_USER: "pg-user"
-PG_PASS: "pg-pass123"
-```
-
-  * These must be consistent with `config/database.yml`.
-* (05:10) Set up the database user for your environment as shown in the next section.
-
-## postgres setup
-
-The postgres username and password is in `config/application.yml`, which is a file created by Figaro. This file is generated just for your development environment, but is never checked into version control. Otherwise outside people would have your credentials. The user we set is `pg-user`, so replace that in the commands below if you changed it.
-Now you must give that user permissions to create the db. This must be done on every local machine (dev environment).
-
-```
-$ sudo -u postgres createuser -s pg-user
-$ sudo -u postgres createdb pg-user
-```
-
-Now that user needs permission to migrate the database. Do this:
-```
-$ sudo su postgres
-postgres $ psql
-postgres=# ALTER USER "pg-user" WITH SUPERUSER;
-postgres=# \q
-exit
-```
-
-Finally, that user needs a password, and that password must be the same one you defined in `config/application.yml`. Set it like this:
-
-```
-$ sudo -u postgres psql
-postgres=# \password pg-user
-Enter new password: 
-Enter it again: 
-postgres=# \q
-$
-```
-
-# AWS Cloud9 Setup (continued)
-
-* (07:23) Now you can run `bin/rails db:create db:migrate` since your local dev environment has a user with permission to create the database.
-* (07:43) Install and run Yarn to avoid stupid problems with webpacker:
-```
-$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
-$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
-$ sudo apt update && sudo apt install yarn
-$ bin/yarn install
-$ bin/rails webpacker:install
-$ bin/rails webpacker:install:vue
-```
-
-* (09:14) Run the app: `bin/rails s -b 0.0.0.0` and preview.
-
+I am coming to you after class to figure out why I cant preview a blank page after following your instructions and video

app/controllers/entries_controller.rb

@@ -8,4 +8,13 @@ def show
         @entry = Entry.find(params[:id])
     end
 
+    def new
+        @entry = Entry.new
+    end
+
+    def create
+        @entry = Entry.create(params.require(:book_title).permit(:pages, :date))
+        redirect_to new_entry_path
+    end
+
 end

app/javascript/app.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="app">
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function () {
+    return {
+      message: "Hello Vue!"
+    }
+  }
+}
+</script>
+
+<style scoped>
+p {
+  font-size: 2em;
+  text-align: center;
+}
+</style>

app/javascript/packs/hello_vue.js

@@ -0,0 +1,72 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
+// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// All it does is render <div>Hello Vue</div> at the bottom of the page.
+
+import Vue from 'vue'
+import App from '../app.vue'
+
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new Vue({
+    render: h => h(App)
+  }).$mount()
+  document.body.appendChild(app.$el)
+
+  console.log(app)
+})
+
+
+// The above code uses Vue without the compiler, which means you cannot
+// use Vue to target elements in your existing html templates. You would
+// need to always use single file components.
+// To be able to target elements in your existing html/erb templates,
+// comment out the above code and uncomment the below
+// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
+// Then add this markup to your html template:
+//
+// <div id='hello'>
+//   {{message}}
+//   <app></app>
+// </div>
+
+
+// import Vue from 'vue/dist/vue.esm'
+// import App from '../app.vue'
+//
+// document.addEventListener('DOMContentLoaded', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: {
+//       message: "Can you say hello?"
+//     },
+//     components: { App }
+//   })
+// })
+//
+//
+//
+// If the project is using turbolinks, install 'vue-turbolinks':
+//
+// yarn add vue-turbolinks
+//
+// Then uncomment the code block below:
+//
+// import TurbolinksAdapter from 'vue-turbolinks'
+// import Vue from 'vue/dist/vue.esm'
+// import App from '../app.vue'
+//
+// Vue.use(TurbolinksAdapter)
+//
+// document.addEventListener('turbolinks:load', () => {
+//   const app = new Vue({
+//     el: '#hello',
+//     data: () => {
+//       return {
+//         message: "Can you say hello?"
+//       }
+//     },
+//     components: { App }
+//   })
+// })

app/views/entries/index.html.erb

@@ -1,6 +1,6 @@
-<h1>Future index page!</h1>
-
+<h1>All The Books Belong To Us</h1>
 
+<%= button_to "Add New Book", new_entry_path, method: :get %>
 
 
 <ul>
@@ -9,6 +9,12 @@
       <a href="/entries/<%= entry.id %>">
         <%= entry.book_title %>
       </a>
+      <a href="/entries/<%= entry.id %>">
+        <%= entry.pages %>
+      </a>
+      <a href="/entries/<%= entry.id %>">
+        <%= entry.date %>
+      </a>
     </li>
   <% end %>
 </ul>

app/views/entries/new.html.erb

@@ -0,0 +1,12 @@
+<h1>New Books</h1>
+
+<%= form_for @entry do |f|%>
+    <%= f.label :book_title%>
+    <%= f.text_field :book_title%>
+    <%= f.label :pages%>
+    <%= f.text_field :pages%>
+    <%= f.label :date%>
+    <%= f.text_field :date%>
+
+    <%= f.submit%>
+<%end%>

config/routes.rb

@@ -4,7 +4,7 @@
 
   root "entries#index"
 
-  resources :entries
+  resources :entries, only: [:new, :create, :destroy ] 
 
 
 end

config/webpack/environment.js

@@ -1,3 +1,7 @@
 const { environment } = require('@rails/webpacker')
+const { VueLoaderPlugin } = require('vue-loader')
+const vue = require('./loaders/vue')
 
+environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
+environment.loaders.prepend('vue', vue)
 module.exports = environment

config/webpack/loaders/vue.js

@@ -0,0 +1,6 @@
+module.exports = {
+  test: /\.vue(\.erb)?$/,
+  use: [{
+    loader: 'vue-loader'
+  }]
+}

config/webpacker.yml

@@ -33,6 +33,7 @@ default: &default
     - .woff2
 
   extensions:
+    - .vue
     - .mjs
     - .js
     - .sass

package.json

@@ -6,7 +6,10 @@
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "5.2.1",
-    "turbolinks": "^5.2.0"
+    "turbolinks": "^5.2.0",
+    "vue": "^2.6.12",
+    "vue-loader": "^15.9.6",
+    "vue-template-compiler": "^2.6.12"
   },
   "version": "0.1.0",
   "devDependencies": {