2 years ago · a03c79dc5b
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -1,3 +1,26 @@
 
				 # aman-web
			
 
				 
			
 
				-Contains the Web-UI for AMAN
			
 
				+Contains the Web-UI for AMAN
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+npm run lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,43 @@
 
				+{
			
 
				+  "name": "aman-web",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "luxon": "^2.0.2",
			
 
				+    "vue": "^2.6.11"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.0",
			
 
				+    "@vue/cli-plugin-eslint": "~4.5.0",
			
 
				+    "@vue/cli-service": "~4.5.0",
			
 
				+    "babel-eslint": "^10.1.0",
			
 
				+    "eslint": "^6.7.2",
			
 
				+    "eslint-plugin-vue": "^6.2.2",
			
 
				+    "vue-template-compiler": "^2.6.11"
			
 
				+  },
			
 
				+  "eslintConfig": {
			
 
				+    "root": true,
			
 
				+    "env": {
			
 
				+      "node": true
			
 
				+    },
			
 
				+    "extends": [
			
 
				+      "plugin:vue/essential",
			
 
				+      "eslint:recommended"
			
 
				+    ],
			
 
				+    "parserOptions": {
			
 
				+      "parser": "babel-eslint"
			
 
				+    },
			
 
				+    "rules": {}
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ]
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <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><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,80 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <nav id="sidebar">
			
 
				+      <h1>AMAN</h1>
			
 
				+      Settings here or something.
			
 
				+    </nav>
			
 
				+    <div id="content">
			
 
				+      <div class="grid">
			
 
				+        <div class="stack left-stack">
			
 
				+          <h3>EDDB 25L</h3>
			
 
				+          <airplane  v-for="i in slots[0].length" :key="i" v-bind:name="slots[0][i -1]"></airplane>
			
 
				+        </div>
			
 
				+        <div class="stack">
			
 
				+          <h3>Time</h3>
			
 
				+          <time-slot v-for="i in (slots[0].length > slots[1].length ? slots[0].length : slots[1].length )" :key="i" :id="i"></time-slot>
			
 
				+        </div>
			
 
				+        <div class="stack right-stack">
			
 
				+          <h3>EDDB 25R</h3>
			
 
				+          <airplane  v-for="i in slots[1].length" :key="i" v-bind:name="slots[1][i -1]"></airplane>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import Airplane from './components/Airplane.vue';
			
 
				+import TimeSlot from './components/TimeSlot.vue';
			
 
				+
			
 
				+export default {
			
 
				+  name: 'App',
			
 
				+  components: {
			
 
				+    TimeSlot,
			
 
				+    Airplane
			
 
				+  },
			
 
				+  data: function() {
			
 
				+    return {
			
 
				+      slots: [[], []],
			
 
				+    }
			
 
				+  },
			
 
				+  created: function() {
			
 
				+    this.slots[0][15] = "Test Airplane";
			
 
				+    this.slots[1][40] = "Test Airplane";
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+body {
			
 
				+  background-color: black;
			
 
				+  color: white;
			
 
				+}
			
 
				+
			
 
				+#content {
			
 
				+ position: absolute;
			
 
				+ overflow-y: scroll;
			
 
				+ bottom: 0px;
			
 
				+ top: 0px;
			
 
				+}
			
 
				+
			
 
				+.grid {
			
 
				+  display: grid;
			
 
				+  grid-template-columns: [left-start] auto [left-end] 80px [right-start] auto [right-end];
			
 
				+  grid-template-rows: 100%;
			
 
				+}
			
 
				+
			
 
				+#sidebar{
			
 
				+  float: right;
			
 
				+  width: 30%;
			
 
				+}
			
 
				+
			
 
				+.stack {
			
 
				+  display: flex;
			
 
				+  flex-direction: column-reverse;
			
 
				+}
			
 
				+
			
 
				+.stack-left {
			
 
				+  text-align: right;
			
 
				+}
			
 
				+</style>
			
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/Airplane.vue
+++ b/src/components/Airplane.vue
@@ -0,0 +1,46 @@
 
				+<template>
			
 
				+    <div :class="{'airplane': isUsed, 'airplane-empty': !isUsed}">
			
 
				+        {{ name }}
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'Airplane',
			
 
				+  props: {
			
 
				+    name: String
			
 
				+  },
			
 
				+  computed: {
			
 
				+      isUsed: function () {
			
 
				+          return typeof this.name !== 'undefined'
			
 
				+      }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+.airplane {
			
 
				+  padding: 2px;
			
 
				+  margin: 2px;
			
 
				+  border: 1px solid #fff;
			
 
				+}
			
 
				+
			
 
				+.left-stack .airplane {
			
 
				+  padding-right: 15px;
			
 
				+  border-top-right-radius: 15px;
			
 
				+  border-bottom-right-radius: 15px;
			
 
				+}
			
 
				+
			
 
				+.right-stack .airplane {
			
 
				+  padding-left: 15px;
			
 
				+  border-top-left-radius: 15px;
			
 
				+  border-bottom-left-radius: 15px;
			
 
				+}
			
 
				+
			
 
				+.airplane-empty {
			
 
				+    padding: 3px 0 4px 0;
			
 
				+    margin: 2px;
			
 
				+    border: 1px solid transparent;
			
 
				+    height: 1em;
			
 
				+}
			
 
				+</style>
			
--- a/src/components/TimeSlot.vue
+++ b/src/components/TimeSlot.vue
@@ -0,0 +1,30 @@
 
				+<template>
			
 
				+    <div class="timeslot">
			
 
				+        {{ time.toFormat("HH:mm") }}
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import { DateTime } from "luxon";
			
 
				+export default {
			
 
				+  name: 'TimeSlot',
			
 
				+  props: {
			
 
				+    id: Number
			
 
				+  },
			
 
				+  computed: {
			
 
				+      time: function() {
			
 
				+          let now = DateTime.utc();
			
 
				+          return now.plus({minutes: 3 * this.id})
			
 
				+      }
			
 
				+  },  
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style scoped>
			
 
				+.timeslot {
			
 
				+  text-align: center;
			
 
				+  padding: 2px;
			
 
				+
			
 
				+  margin: 3px;
			
 
				+}
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,8 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+
			
 
				+Vue.config.productionTip = false
			
 
				+
			
 
				+new Vue({
			
 
				+  render: h => h(App),
			
 
				+}).$mount('#app')