initial commit

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = tabs
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

README.md

@@ -0,0 +1,20 @@
+# Restaurant application using NuxtJS, Vuex, Vuetify and Tailwindcss
+
+## Build Setup
+
+Clone this repository and run:
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```

assets/README.md

@@ -0,0 +1,7 @@
+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

assets/css/tailwind.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

assets/variables.scss

@@ -0,0 +1,4 @@
+// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
+//
+// The variables you want to modify
+// $font-size-root: 20px;

components/Beverages.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="px-2">
+        <span class="inline-block bg-green-200 rounded-full px-3 py-1 text-md font-semibold text-green-700 mr-2">Beverages (sold by the gallon, serves approximately 15 people)</span>
+        <div class="flex flex-wrap justify-start items-center -mx-4">
+            <div v-for="beverage in beverages" :key="beverage.id" class="w-full md:w-1/3 px-2">
+                <v-card :loading="loading" class="mx-auto my-3">
+                    <v-img height="100"
+                    :src="beverage.image"
+                    ></v-img>
+
+                    <v-card-title>
+                        {{ beverage.text }}
+                        <v-spacer></v-spacer>
+                        <span class="inline-block bg-red-200 rounded-full px-3 py-1 text-sm font-semibold text-red-700 mr-2">$ {{ beverage.price }}</span>
+                    </v-card-title>
+
+                    <v-card-text>
+                        <div>{{ beverage.description }}</div>
+                    </v-card-text>
+
+                    <v-card-actions>
+                        <v-btn color="green lighten-2" text @click="addItemToCart(beverage)">
+                            Add to Cart
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </div>
+        </div>
+        <v-snackbar v-model="snackbar" :timeout="2000">
+            {{ snacktext }}
+            <template v-slot:action="{ attrs }">
+                <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
+                    Close
+                </v-btn>
+            </template>
+        </v-snackbar>
+    </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex';
+
+export default {
+    data() {
+        return {
+            loading: false,
+            selection: 1,
+            snackbar: false,
+            snacktext: '',
+        }
+    },
+    props: {
+        beverages: {
+            type: Array,
+            required: true
+        }
+    },
+    methods: {
+        addItemToCart(beverage) {
+            setTimeout(() => {
+                this.$store.dispatch('cart/addProductToCart', beverage)
+            }, 200);
+            this.snackbar = true;
+            this.snacktext = 'Item Added to cart successfully!';
+        }
+    },
+}
+</script>
+
+<style>
+
+</style>

components/Specials.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="px-2">
+        <span class="inline-block bg-green-200 rounded-full px-3 py-1 text-md font-semibold text-green-700 mr-2">Today's Special</span>
+        <div class="flex flex-wrap justify-start items-center -mx-4">
+            <div v-for="special in specials" :key="special.id" class="w-full md:w-1/3 px-2">
+                <v-card :loading="loading" class="mx-auto my-3">
+                    <v-img height="100"
+                    :src="special.image"
+                    ></v-img>
+
+                    <v-card-title>
+                        {{ special.text }}
+                        <v-spacer></v-spacer>
+                        <span class="inline-block bg-red-200 rounded-full px-3 py-1 text-sm font-semibold text-red-700 mr-2">$ {{ special.price }}</span>
+                    </v-card-title>
+
+                    <v-card-text>
+                        <div>{{ special.description}}</div>
+                    </v-card-text>
+
+                    <v-card-actions>
+                        <v-btn color="green lighten-2" text @click="addItemToCart(special)">
+                            Add to Cart
+                        </v-btn>
+                    </v-card-actions>
+                </v-card>
+            </div>
+        </div>
+        <v-snackbar v-model="snackbar" :timeout="2000">
+            {{ snacktext }}
+            <template v-slot:action="{ attrs }">
+                <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
+                    Close
+                </v-btn>
+            </template>
+        </v-snackbar>
+    </div>
+</template>
+
+<script>
+import { mapMutations } from 'vuex';
+
+export default {
+    data() {
+        return {
+            loading: false,
+            selection: 1,
+            snackbar: false,
+            snacktext: '',
+        }
+    },
+    props: {
+        specials: {
+            type: Array,
+            required: true
+        }
+    },
+    methods: {
+        addItemToCart(special) {
+            setTimeout(() => {
+                this.$store.dispatch('cart/addProductToCart', special)
+            }, 200);
+            this.snackbar = true;
+            this.snacktext = 'Item Added to cart successfully!';
+        }
+    },
+}
+</script>
+
+<style>
+
+</style>

layouts/README.md

@@ -0,0 +1,7 @@
+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

layouts/default.vue

@@ -0,0 +1,77 @@
+<template>
+	<v-app>
+		<v-app-bar color="#6C63FF" app absolute elevate-on-scroll>
+			<v-btn to="/" icon>
+				<v-avatar>
+					<img src="../static/app.svg" alt="UIS Food Services">
+				</v-avatar>
+			</v-btn>
+
+			<v-toolbar-title class="white--text text-center">Food Services</v-toolbar-title>
+
+			<v-spacer />
+
+			<v-badge color="pink" :content="cartItemsCount" :value="cartItemsCount" overlap>
+				<v-btn to="/cart" icon>
+					<v-icon>shopping_cart</v-icon>
+				</v-btn>
+			</v-badge>
+			<v-btn v-if="!$vuetify.theme.isDark" @click="changeTheme()" icon>
+				<v-icon>brightness_2</v-icon>
+			</v-btn>
+
+			<v-btn v-if="$vuetify.theme.isDark" @click="changeTheme()" icon>
+				<v-icon>wb_sunny</v-icon>
+			</v-btn>
+		</v-app-bar>
+		<v-main class="bg-fixed" style="background-image: url('/chef.svg')">
+			<v-container>
+				<nuxt />
+			</v-container>
+		</v-main>
+		<v-footer dark padless>
+			<v-card color="#6C63FF" flat class="w-full white--text text-center">
+			<v-card-text>
+					<v-btn v-for="platform in socialIcons" :key="platform.icon"
+						class="mx-4 white--text" icon
+						:href="platform.url" rel="noopener"
+					>
+						<v-icon size="24px">{{ platform.icon }}</v-icon>
+					</v-btn>
+				</v-card-text>
+
+				<v-card-text class="white--text">
+					{{ new Date().getFullYear() }} — <strong>UIS Food Services</strong>
+				</v-card-text>
+			</v-card>
+		</v-footer>
+	</v-app>
+</template>
+
+<script>
+import { mapMutations } from 'vuex';
+
+export default {
+	data () {
+		return {
+			socialIcons: [
+				{ icon: 'mdi-twitter', url: '#' },
+				{ icon: 'mdi-linkedin', url: '#' },
+				{ icon: 'mdi-instagram', url: '#' },
+				{ icon: 'mdi-email', url: '#' },
+			],
+		}
+	},
+	computed: {
+		cartItemsCount() {
+			return this.$store.state.cart.cartProducts.length;
+		}
+	},
+	methods: {
+		changeTheme() {
+			if (!this.$vuetify) return
+			this.$vuetify.theme.isDark = !this.$vuetify.theme.isDark;
+		}
+	}
+}
+</script>