New db

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+#Electron-builder output
+/dist_electron

README.md

@@ -1,2 +1,47 @@
-# Tbinge
-Tbinge is a desktop application written in Electron/Node.js that will serve as a tracking mechanism for Movies and TV Shows that the user is either interested in viewing or has viewed and on which they would like to keep a database.
+# tbinge
+
+Tbinge is a desktop application written in Electron/Node.js that serves as a local tracking library for Movies and TV Shows that the user is either interested in viewing or has viewed and on which they would like to keep a database.
+
+## The features
+
+- Searching [TMDB](https://www.themoviedb.org/) for movies and TV shows
+- Rating a movie or TV show locally (contributes to TMDB rating system too)
+- Adding a movie or TV show to local database
+- Removing a movie or TV show from local database
+- Operating in an offline setting (no TMDB searching)
+
+## Project setup
+
+```bash
+yarn install
+```
+
+### Compiles and hot-reloads for development
+
+```bash
+yarn electron:serve
+```
+
+### Compiles and minifies for production (for the developers current Operating System)
+
+```bash
+yarn electron:build
+```
+
+### Compiles and minifies for production (Mac OS, Linux (snaps) and Windows 10 x64)
+
+```bash
+yarn electron:build-all
+```
+
+### Lints and fixes files
+
+```bash
+yarn run lint
+```
+
+### Customize configuration
+
+See [Configuration Reference](https://cli.vuejs.org/config/).
+See [Styling Reference](https://vuetifyjs.com/en/).
+See [Electron Reference](https://www.electron.build/).

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "tbinge",
+  "version": "0.1.0",
+  "author": "Lance Gunderse, Fatawa Lansah, Clifford Ramsey, Kyle McCain",
+  "description": "Tbinge is a desktop movie/tv library written in Electron/Node.js.",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "electron:build": "vue-cli-service electron:build",
+    "electron:build-all": "vue-cli-service electron:build -mwl",
+    "electron:serve": "vue-cli-service electron:serve",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
+  },
+  "dependencies": {
+    "vue": "^2.5.22",
+    "vue-router": "^3.0.1",
+    "vue-youtube-embed": "^2.2.1",
+    "vuetify": "^1.3.0",
+    "vuex": "^3.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.4.0",
+    "@vue/cli-plugin-eslint": "^3.4.0",
+    "@vue/cli-service": "^3.4.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "electron": "^3.0.0",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "fibers": "^3.1.1",
+    "sass": "^1.16.0",
+    "sass-loader": "^7.1.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.1",
+    "vue-cli-plugin-electron-builder": "^1.0.2",
+    "vue-cli-plugin-vuetify": "^0.4.6",
+    "vue-template-compiler": "^2.5.21",
+    "vuetify-loader": "^1.0.5"
+  },
+  "main": "background.js"
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>tbinge</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but tbinge doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,19 @@
+<template>
+  <Root/>
+</template>
+
+<script>
+import Root from './views/Root'
+
+export default {
+  name: 'App',
+  components: {
+    Root
+  },
+  data () {
+    return {
+      //
+    }
+  }
+}
+</script>

src/background.js

@@ -0,0 +1,80 @@
+'use strict'
+
+import { app, protocol, BrowserWindow } from 'electron'
+import {
+  createProtocol,
+  installVueDevtools
+} from 'vue-cli-plugin-electron-builder/lib'
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let win
+
+// Standard scheme must be registered before the app is ready
+protocol.registerStandardSchemes(['app'], { secure: true })
+function createWindow () {
+  // Create the browser window.
+  win = new BrowserWindow({ width: 1000, height: 800 })
+
+  if (process.env.WEBPACK_DEV_SERVER_URL) {
+    // Load the url of the dev server if in development mode
+    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+    if (!process.env.IS_TEST) win.webContents.openDevTools()
+  } else {
+    createProtocol('app')
+    // Load the index.html when not in development
+    win.loadURL('app://./index.html')
+  }
+
+  win.on('closed', () => {
+    win = null
+  })
+}
+
+// Quit when all windows are closed.
+app.on('window-all-closed', () => {
+  // On macOS it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (win === null) {
+    createWindow()
+  }
+})
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', async () => {
+  if (isDevelopment && !process.env.IS_TEST) {
+    // Install Vue Devtools
+    try {
+      await installVueDevtools()
+    } catch (e) {
+      console.error('Vue Devtools failed to install:', e.toString())
+    }
+  }
+  createWindow()
+})
+
+// Exit cleanly on request from parent process in development mode.
+if (isDevelopment) {
+  if (process.platform === 'win32') {
+    process.on('message', data => {
+      if (data === 'graceful-exit') {
+        app.quit()
+      }
+    })
+  } else {
+    process.on('SIGTERM', () => {
+      app.quit()
+    })
+  }
+}

src/components/DetailsDialog.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-card color="gray lighten-1">
+    <v-card-title class="headline blue-grey darken-1" primary-title>
+      <h1>{{title}}</h1>
+      <p> {{rating}}% ({{voteCount}})</p>
+    </v-card-title>
+
+    <v-card-text>
+      <p>{{description}}</p>
+    </v-card-text>
+    <youtube :video-id="trailer"></youtube>
+
+  </v-card>
+</template>
+
+<script>
+export default {
+  props: [
+    'title',
+    'isWatched',
+    'trailer',
+    'rating',
+    'voteCount',
+    'description'
+  ],
+  data: () => ({
+    dialog: false,
+    notifications: false,
+    sound: true,
+    widgets: false
+  }),
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="sass">
+
+</style>

src/components/Movies.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-app id="inspire">
+    <v-layout justify-center>
+      <v-flex xs12 md6 lg6>
+        <v-text-field
+          flat
+          solo-inverted
+          hide-details
+          prepend-inner-icon="search"
+          label="Search Local Movies"
+        ></v-text-field>
+      </v-flex>
+    </v-layout>
+    <v-container grid-list-md fluid>
+      <v-layout row wrap>
+        <v-flex v-for="movie in localMovies" :key="movie.movieId" xs4 md2 lg1 d-flex class="movie-img">
+          <v-card flat tile color="transparent">
+            <v-img :src="movie.poster" :aspect-ratio="2/3" @click.prevent="selectMovie(movie.movieId)"></v-img>
+            <v-card-actions>
+              <p class="body-1 mb-0">{{ movie.title }}</p>
+            </v-card-actions>
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
+    <v-dialog v-model="isDialogDisplayed" transition="dialog-bottom-transition">
+      <DetailsDialog @cancel="isDialogDisplayed = false" @delete="isDialogDisplayed = false" v-bind="this.$store.state.selectedDetail"/>
+    </v-dialog>
+  </v-app>
+</template>
+
+<script>
+import DetailsDialog from '@/components/DetailsDialog'
+
+export default {
+  components: {
+    DetailsDialog
+  },
+  data: () => ({
+    isDialogDisplayed: false,
+    localMovies: []
+  }),
+  created () {
+    // Retrieve list of local movies from the store
+    this.localMovies = this.$store.state.localData.movies
+  },
+  methods: {
+    selectMovie (id) {
+      // Fetch selected movie
+      this.populateStore(id)
+      // Open dialog display
+      this.isDialogDisplayed = true
+    },
+    populateStore (id) {
+      this.$store.state.selectedDetail = this.localMovies.filter(movie => movie.movieId === id)[0]
+    }
+  }
+}
+</script>
+
+<style lang="sass">
+.movie-img
+ cursor: pointer
+</style>