Commit 0351bb0e authored by NickVerbeet's avatar NickVerbeet

Fix frontend

parent dbc244aa
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/VueJS Front-end.iml" filepath="$PROJECT_DIR$/.idea/VueJS Front-end.iml" />
</modules>
</component>
</project>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
</component>
</project>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="93dba9ad-9057-4ed5-a9ea-f76c8655fc58" name="Default Changelist" comment="" />
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
<ignored path="$PROJECT_DIR$/tmp/" />
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FUSProjectUsageTrigger">
<session id="-2022796165">
<usages-collector id="statistics.lifecycle.project">
<counts>
<entry key="project.closed" value="1" />
<entry key="project.open.time.1" value="1" />
<entry key="project.opened" value="1" />
</counts>
</usages-collector>
</session>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
</component>
<component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsGulpfileManager">
<detection-done>true</detection-done>
<sorting>DEFINITION_ORDER</sorting>
</component>
<component name="NodePackageJsonFileManager">
<packageJsonPaths>
<path value="$PROJECT_DIR$/notia/package.json" />
</packageJsonPaths>
</component>
<component name="ProjectFrameBounds" extendedState="6">
<option name="x" value="-14" />
<option name="y" value="-14" />
<option name="width" value="3028" />
<option name="height" value="2029" />
</component>
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectView">
<navigator proportions="" version="1">
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="Scope" />
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="VueJS Front-end" type="b2602c69:ProjectViewProjectNode" />
<item name="VueJS Front-end" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="VueJS Front-end" type="b2602c69:ProjectViewProjectNode" />
<item name="VueJS Front-end" type="462c0819:PsiDirectoryNode" />
<item name="notia" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
</panes>
</component>
<component name="PropertiesComponent">
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/notia" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" />
<property name="settings.editor.selected.configurable" value="Errors" />
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
</list>
</option>
</component>
<component name="SvnConfiguration">
<configuration />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="93dba9ad-9057-4ed5-a9ea-f76c8655fc58" name="Default Changelist" comment="" />
<created>1540114689400</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1540114689400</updated>
<workItem from="1540114690856" duration="59000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="59000" />
</component>
<component name="ToolWindowManager">
<frame x="-7" y="-7" width="1728" height="1117" extended-state="6" />
<layout>
<window_info id="Favorites" side_tool="true" />
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info anchor="bottom" id="Docker" show_stripe_button="false" />
<window_info anchor="bottom" id="Version Control" show_stripe_button="false" />
<window_info anchor="bottom" id="Statistic" />
<window_info anchor="bottom" id="Terminal" />
<window_info anchor="bottom" id="Event Log" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="bottom" id="Run" order="2" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
</layout>
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="1" />
</component>
<component name="VcsContentAnnotationSettings">
<option name="myLimit" value="2678400000" />
</component>
</project>
\ No newline at end of file
......@@ -12038,6 +12038,11 @@
"integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
"dev": true
},
"vuex": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
"integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
......
......@@ -15,7 +15,8 @@
"vue": "^2.5.2",
"vue-moment": "^4.0.0",
"vue-router": "^3.0.1",
"vue-swipe-actions": "^1.0.6"
"vue-swipe-actions": "^1.0.6",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
......
......@@ -8,8 +8,11 @@
<img src="./assets/menu.png" class="icon-menu">
</span>
</div>
<div class="list-item" v-for="call in callList">
<div class="title">{{ call.name }} ({{ call.actionList.length }}) <span>{{ call.date | moment("from", "now") }}</span></div>
<div class="empty-state">
</div>
<div class="list-item" v-for="(call, i) in callList" :key="i">
<div class="title">{{ call.name }} ({{ call.actionList.length }}) <span>{{ call.date }}</span></div>
<swipe-list class="card" :disabled="!enabled" :items="call.actionList" transition-key="id" @swipeout:contentclick="contentClick" @swipeout:click="itemClick" @swipeout:doubleclick="itemDblClick">
<template slot-scope="{ item, index, revealLeft, revealRight, close }">
<!-- item is the corresponding object from the array -->
......@@ -46,9 +49,13 @@
</div>
</div>
</template>
<style lang="scss" scoped>
.empty-state {
}
</style>
<script>
/* eslint-disable */
/* eslint-disable */
import { SwipeList, SwipeOut } from './components/index';
export default {
name: 'app',
......@@ -59,83 +66,38 @@
data() {
return {
enabled: true,
callList: [{
id:0,
name:'Lauren Ludwig',
phone:'+316 13 23 42 232',
date:'2018-10-20 15:00:00',
actionList:[
{
id: 0,
description: 'Here\'s some input from our last call about an e-mail. We discusses something about an appoi..',
type: 'mail',
read: false,
},
{
id: 1,
description: 'Here\'s some input from our last call about an e-mail. We discusses something about an appoi..',
type: 'call',
read: true,
},
{
id: 2,
description: 'Here\'s some input from our last call about an e-mail. We discusses something about an appoi..',
type: 'agenda',
read: true,
},
{
id: 2,
description: 'Here\'s some input from our last call about an e-mail. We discusses something about an appoi..',
type: 'other',
read: true,
},
],
},
{
id:1,
name:'Pietje Puk',
phone:'+316 13 23 42 232',
date:'2018-10-19 12:00:00',
actionList:[
{
id: 0,
description: 'meet to-do!',
type: 'mail',
read: true,
},
{
id: 1,
description: 'hallo',
type: 'call',
read: true,
},
{
id: 2,
description: 'Some title',
type: 'agenda',
read: true,
},
{
id: 2,
description: 'Some title',
type: 'other',
read: true,
},
{
id: 1,
description: 'Some title',
type: 'call',
read: true,
},
],
}],
callList: [],
}
},
mounted() {
// ideally should be in some global handler/store
window.addEventListener('keydown', this.onKeyDown);
window.addEventListener('keyup', this.onKeyUp);
console.log(Moment);
const socket = new WebSocket('ws://35.204.192.41:8088');
socket.onerror = console.error;
socket.onopen = console.log;
socket.onmessage = ({data}) => {
console.log(data);
const {action, queryText} = JSON.parse(data);
const callAction = {
id: Math.floor(Math.random() * 10000),
description: queryText,
type: action,
read: false,
};
if (this.callList.length === 0) {
this.callList.push({
id: 0,
name: 'Nick Verbeet',
phone: '+316 25 03 26 38',
date: `10/21/2018 ${('0' + new Date().getHours()).slice(-2)}:${('0' + new Date().getMinutes()).slice(-2)}`,
actionList: [callAction],
});
} else {
this.callList[0].actionList.push(callAction);
}
}
},
beforeDestroy() {
window.removeEventListener('keydown', this.onKeyDown);
......
......@@ -26,25 +26,25 @@
</template>
<script>
export default {
name: 'detail',
data () {
return {
name: 'Lauren Ludwig',
company: 'Dutch Coding Company',
date:'2018-10-21 10:00:00',
type:'mail',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
}
export default {
name: 'detail',
data () {
return {
name: 'Lauren Ludwig',
company: 'Dutch Coding Company',
date: '2018-10-21 10:00:00',
type: 'mail',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
}
},
methods: {
getPic (index) {
var images = require.context('./assets/type/', false, /\.png$/)
return images('./' + index + '.png')
},
methods:{
getPic(index) {
var images = require.context('./assets/type/', false, /\.png$/)
return images('./' + index + '.png');
},
navigate() {
this.$router.push('/');
}
navigate () {
this.$router.push('/')
}
}
</script>
\ No newline at end of file
}
</script>
......@@ -5,9 +5,9 @@
</template>
<script>
export default {
name: 'Main'
}
export default {
name: 'Main'
}
</script>
<style lang="scss">
......@@ -35,35 +35,35 @@ body{
font-weight:300;
// https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
&.blue {
color: white;
color: white;
background-color: rgb(0,122,255);
&:hover {
background-color: darken(rgb(0,122,255), 5%);
}
}
&.purple {
color: white;
color: white;
background-color: rgb(88,86,214);
&:hover {
background-color: darken(rgb(88,86,214), 5%);
}
}
&.red {
color: white;
color: white;
background-color: rgb(255,59,48);
&:hover {
background-color: darken(rgb(255,59,48), 5%);
}
}
&.green {
color: white;
color: white;
background-color: #7ED321;
&:hover {
background-color: darken(#7ED321, 5%);
}
}
&.orange {
color: white;
color: white;
background-color: #F5A623;
&:hover {
background-color: darken(#F5A623, 5%);
......@@ -79,7 +79,7 @@ body{
&:last-of-type {
border-bottom: none;
}
}
.title{
padding:15px;
......@@ -205,4 +205,4 @@ body{
color: #fff;
}
}
</style>
\ No newline at end of file
</style>
<template>
<div class="swipeout-list"
:class="{'swipeout--disabled': disabled}">
<swipe-out
v-for="(item, index) in items"
:key="item[transitionKey] || index"
:ref="`list-item-${index}`"
:disabled="disabled"
:threshold="threshold"
class="swipeout-list-item"
@swipeout:click="_emitClick($event, item, index)"
@swipeout:dobuleclick="_emitDblClick($event, item)"
@swipeout:contentclick="_contentClick($event, item)"
>
<template slot="left">
<slot name="left" :item="item"></slot>
</template>
<template slot-scope="{ close, revealRight, revealLeft }">
<slot :item="item" :index="index" :close="close" :revealRight="revealRight" :revealLeft="revealLeft"></slot>
</template>
<template slot="right">
<slot name="right" :item="item"></slot>
</template>
</swipe-out>
<template v-if="!items.length">
<slot name="empty">No results !</slot>
</template>
</div>
<div class="swipeout-list" :class="{'swipeout--disabled': disabled}">
<swipe-out
v-for="(item, index) in items"
:key="item[transitionKey] || index"
:ref="`list-item-${index}`"
:disabled="disabled"
:threshold="threshold"
class="swipeout-list-item"
@swipeout:click="_emitClick($event, item, index)"
@swipeout:dobuleclick="_emitDblClick($event, item)"
@swipeout:contentclick="_contentClick($event, item)"
>
<template slot="left">
<slot name="left" :item="item"></slot>
</template>
<template slot-scope="{ close, revealRight, revealLeft }">
<slot :item="item" :index="index" :close="close" :revealRight="revealRight" :revealLeft="revealLeft"></slot>
</template>
<template slot="right">
<slot name="right" :item="item"></slot>
</template>
</swipe-out>
<template v-if="!items.length">
<slot name="empty">No results !</slot>
</template>
</div>
</template>
<script>
/* eslint-disable */
import SwipeOut from './SwipeOut.vue';
/* eslint-disable */
import SwipeOut from "./SwipeOut.vue";
export default {
name: 'vue-swipe-list',
props: {
items: {
type: Array,
required: true,
},
transitionKey: {
type: String,
default: 'id',
},
threshold: {
type: Number,
default: 45,
},
disabled: {
type: Boolean,
default: false,
},
},
methods: {
_emitClick(event, item) {
this.$emit('swipeout:click', { event, item });
},
_emitDblClick(event, item) {
this.$emit('swipeout:doubleclick', { event, item });
},
_contentClick(event, item) {
this.$emit('swipeout:contentclick', { event, item });
},
},
components: {
SwipeOut,
},
};
</script>
\ No newline at end of file
export default {
name: "vue-swipe-list",
props: {
items: {
type: Array,
required: true
},
transitionKey: {
type: String,
default: "id"
},
threshold: {
type: Number,
default: 45
},
disabled: {
type: Boolean,
default: false
}
},
methods: {
_emitClick(event, item) {
this.$emit("swipeout:click", { event, item });
},
_emitDblClick(event, item) {
this.$emit("swipeout:doubleclick", { event, item });
},
_contentClick(event, item) {
this.$emit("swipeout:contentclick", { event, item });
}
},
components: {
SwipeOut
}
};
</script>
import SwipeOut from '../components/SwipeOut';
import SwipeList from '../components/SwipeList';
import SwipeOut from '../components/SwipeOut'
import SwipeList from '../components/SwipeList'
export {
SwipeOut,
SwipeList,
};
SwipeList
}
......@@ -4,16 +4,16 @@ import Detail from './Detail.vue'
import Main from './Main.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
Vue.use(VueRouter)
const routes = [
{path: '/', component: App},
{path: '/detail', component: Detail},
];
{path: '/', component: App},
{path: '/detail', component: Detail}
]
const router = new VueRouter({routes});
const router = new VueRouter({routes})
Vue.use(require('vue-moment'));
Vue.use(require('vue-moment'))
Vue.config.productionTip = false
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment