[LastFM] Prep for user recommendations

build.gradle.kts

@@ -202,7 +202,7 @@ frontend {
 tasks.register<Copy>("processFrontendResources") {
     // Directory containing the artifacts produced by the frontend project
     val frontendBuildDir = project.layout.projectDirectory.dir("src/main/frontend/dist/spa")
-    val frontendResourcesDir = project.layout.buildDirectory.dir("resources/main/public")
+    val frontendResourcesDir = project.layout.buildDirectory.dir("resources/main/static")
 
     dependsOn(":assembleFrontend")
     from(frontendBuildDir)

src/main/frontend/package.json

@@ -8,6 +8,7 @@
   "private": true,
   "scripts": {
     "lint": "eslint --ext .js,.ts,.vue ./",
+    "lint:fix": "eslint --ext .js,.ts,.vue ./ --fix",
     "clean": "echo \"No clean specified\" && exit 0",
     "format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
     "test": "echo \"No test specified\" && exit 0",

src/main/frontend/src/components/ContactDetailItem.vue

@@ -0,0 +1,26 @@
+<template>
+  <q-item clickable v-ripple>
+    <q-item-section avatar top>
+      <q-avatar :icon="icon" color="grey-2" :text-color="text_color"/>
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label lines="1">{{ value }}</q-item-label>
+      <q-item-label caption class="text-grey-8">{{ label }}</q-item-label>
+    </q-item-section>
+
+  </q-item>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+
+export default defineComponent({
+  name: 'ContactDetailItem',
+  props: ['icon', 'text_color', 'value', 'label']
+})
+</script>
+
+<style scoped>
+
+</style>

src/main/frontend/src/components/ContactItem.vue

@@ -0,0 +1,29 @@
+<template>
+  <q-item clickable>
+    <q-item-section avatar>
+      <q-avatar>
+        <img :src="avatar">
+      </q-avatar>
+    </q-item-section>
+
+    <q-item-section>
+      <q-item-label lines="1">{{ name }}</q-item-label>
+      <q-item-label caption lines="2">
+        <span class="text-weight-bold">{{ position }}</span>
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+
+export default defineComponent({
+  name: 'ContactItem',
+  props: ['avatar', 'name', 'position']
+})
+</script>
+
+<style scoped>
+
+</style>

src/main/frontend/src/components/cards/CardBasic.vue

@@ -0,0 +1,33 @@
+<template>
+  <q-card class="no-shadow" bordered>
+    <q-card-section>
+      <div class="text-h6 text-grey-8">
+        Our Changing Planet
+      </div>
+    </q-card-section>
+    <q-separator/>
+    <q-card-section>
+      {{ text }}
+    </q-card-section>
+    <q-card-actions align="left">
+      <q-btn label="Go Somewhere" class="text-capitalize q-ma-sm" color="indigo-7"/>
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+
+export default defineComponent({
+  name: 'BasicCard',
+  setup() {
+    return {
+      text: '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.'
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

src/main/frontend/src/components/cards/CardCafe.vue

@@ -0,0 +1,41 @@
+<template>
+  <q-card class="no-shadow" bordered>
+    <q-img src="https://cdn.quasar.dev/img/chicken-salad.jpg"/>
+
+    <q-card-section class="absolute absolute-center text-center">
+      <q-avatar size="100px" class="shadow-10">
+        <img src="https://cdn.quasar.dev/img/avatar6.jpg">
+      </q-avatar>
+    </q-card-section>
+
+    <q-card-section class="q-pt-none q-mt-xl">
+      <div class="text-subtitle1">
+        $・Italian, Cafe
+      </div>
+      <div class="text-caption text-grey">
+        Small plates, salads & sandwiches in an intimate setting.
+      </div>
+    </q-card-section>
+
+    <q-separator/>
+
+    <q-card-actions>
+      <q-btn flat round icon="event"/>
+      <q-btn flat color="primary">
+        Reserve
+      </q-btn>
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script>
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: 'CardCafe'
+})
+</script>
+
+<style scoped>
+
+</style>

src/main/frontend/src/components/cards/CardCharts.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="row q-col-gutter-sm  q-py-sm">
+    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
+      <q-card class="q-ma-xs no-shadow" bordered style="background-color: #38b1c5">
+        <q-card-section class="text-h6 text-white">
+          Today's View
+        </q-card-section>
+        <q-card-section class="q-pa-none">
+          <ECharts :option="LineChart2"
+                   class="q-mt-md"
+                   :resizable="true"
+                   autoresize style="height: 250px;"
+          />
+        </q-card-section>
+      </q-card>
+    </div>
+    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
+      <q-card class="q-ma-xs no-shadow" bordered style="background-color: #ea4b64">
+        <q-card-section class="text-h6 text-white">
+          Daily Sales
+        </q-card-section>
+        <q-card-section class="q-pa-none">
+          <ECharts :option="BarChart"
+                   class="q-mt-md"
+                   :resizable="true"
+                   autoresize style="height: 250px;"
+          />
+        </q-card-section>
+      </q-card>
+    </div>
+    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
+      <q-card class="q-ma-xs no-shadow" bordered style="background-color: #1e88e5">
+        <q-card-section class="text-h6 text-white">
+          Today's User Visit
+        </q-card-section>
+        <q-card-section class="q-pa-none">
+          <ECharts :option="LineChart"
+                   class="q-mt-md"
+                   :resizable="true"
+                   autoresize style="height: 250px;"
+          />
+        </q-card-section>
+      </q-card>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {defineComponent} from 'vue';
+import ECharts from 'vue-echarts';
+
+export default defineComponent({
+  name: 'CardCharts',
+  components:{
+    ECharts
+  },
+  setup () {
+    return {
+      BarChart: {
+        'tooltip': {'show': true},
+        'title': {'show': true, 'textStyle': {'color': 'rgba(0, 0, 0 , .87)', 'fontFamily': 'sans-serif'}},
+        'grid': {'containLabel': true, 'bottom': '10%', 'top': '5%'},
+        'xAxis': {
+            'show': false,
+            'type': 'category',
+            'axisLine': {'lineStyle': {'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}},
+            'axisTick': {
+                'show': true,
+                'alignWithLabel': true,
+                'lineStyle': {'show': true, 'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}
+            },
+            'axisLabel': {'show': false}
+        },
+        'yAxis': {
+            'show': false,
+            'type': 'value',
+            'axisLine': {'lineStyle': {'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}},
+            'axisLabel': {'show': false},
+            'splitLine': {'lineStyle': {'type': 'dashed'}},
+            'axisTick': {
+                'show': true,
+                'lineStyle': {'show': true, 'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}
+            }
+        },
+        'series': [{
+            'type': 'bar',
+            'barGap': '-100%',
+            'itemStyle': {'normal': {'color': 'rgba(0,0,0,0.1)'}},
+            'barWidth': '50%'
+        }, {'barWidth': '50%', 'type': 'bar', 'itemStyle': {'normal': {'color': '#ffffff'}}}],
+        'dataset': {
+            'source': [{'label': '0D', 'max': 500, 'sales': 220}, {
+                'label': '1D',
+                'max': 500,
+                'sales': 182
+            }, {'label': '2D', 'max': 500, 'sales': 191}, {
+                'label': '3D',
+                'max': 500,
+                'sales': 234
+            }, {'label': '4D', 'max': 500, 'sales': 290}, {
+                'label': '5D',
+                'max': 500,
+                'sales': 330
+            }, {'label': '6D', 'max': 500, 'sales': 310}, {
+                'label': '7D',
+                'max': 500,
+                'sales': 123
+            }, {'label': '8D', 'max': 500, 'sales': 442}, {
+                'label': '9D',
+                'max': 500,
+                'sales': 321
+            }, {'label': '10D', 'max': 500, 'sales': 90}, {
+                'label': '11D',
+                'max': 500,
+                'sales': 149
+            }, {'label': '12D', 'max': 500, 'sales': 210}, {
+                'label': '13D',
+                'max': 500,
+                'sales': 122
+            }, {'label': '14D', 'max': 500, 'sales': 133}, {
+                'label': '15D',
+                'max': 500,
+                'sales': 334
+            }, {'label': '16D', 'max': 500, 'sales': 198}, {
+                'label': '17D',
+                'max': 500,
+                'sales': 123
+            }, {'label': '18D', 'max': 500, 'sales': 125}, {'label': '19D', 'max': 500, 'sales': 220}]
+        }
+    },
+      LineChart: {
+        'tooltip': {'show': true},
+        'title': {'show': true, 'textStyle': {'color': 'rgba(0, 0, 0 , .87)', 'fontFamily': 'sans-serif'}},
+        'grid': {'containLabel': true, 'left': '0', 'bottom': '0', 'right': '0'},
+        'xAxis': {
+            'show': false,
+            'type': 'category',
+            'axisLine': {'lineStyle': {'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}},
+            'axisTick': {
+                'show': true,
+                'alignWithLabel': true,
+                'lineStyle': {'show': true, 'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}
+            },
+            'axisLabel': {'show': false},
+            'boundaryGap': false
+        },
+        'yAxis': {
+            'show': false,
+            'type': 'value',
+            'axisLine': {'lineStyle': {'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}},
+            'axisLabel': {'show': false},
+            'splitLine': {'lineStyle': {'type': 'dashed'}},
+            'axisTick': {
+                'show': true,
+                'lineStyle': {'show': true, 'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}
+            }
+        },
+        'series': [{'type': 'line', 'areaStyle': {}, 'smooth': true}],
+        'dataset': {
+            'source': [{'month': 'Jan', 'Unique Visit': 296, 'Page View': 548}, {
+                'month': 'Feb',
+                'Unique Visit': 1181,
+                'Page View': 714
+            }, {'month': 'Mar', 'Unique Visit': 235, 'Page View': 961}, {
+                'month': 'Apr',
+                'Unique Visit': 294,
+                'Page View': 580
+            }, {'month': 'May', 'Unique Visit': 765, 'Page View': 730}, {
+                'month': 'Jun',
+                'Unique Visit': 412,
+                'Page View': 1249
+            }, {'month': 'Jul', 'Unique Visit': 1125, 'Page View': 267}, {
+                'month': 'Aug',
+                'Unique Visit': 800,
+                'Page View': 251
+            }, {'month': 'Sep', 'Unique Visit': 948, 'Page View': 1043}, {
+                'month': 'Oct',
+                'Unique Visit': 1046,
+                'Page View': 1118
+            }, {'month': 'Nov', 'Unique Visit': 363, 'Page View': 573}, {
+                'month': 'Dec',
+                'Unique Visit': 909,
+                'Page View': 283
+            }]
+        },
+        'color': ['#2196f3']
+    },
+      LineChart2: {
+        'tooltip': {'show': true},
+        'title': {'show': true, 'textStyle': {'color': 'rgba(0, 0, 0 , .87)', 'fontFamily': 'sans-serif'}},
+        'grid': {'containLabel': true, 'left': '0', 'bottom': '0', 'right': '0'},
+        'xAxis': {
+            'show': false,
+            'type': 'category',
+            'axisLine': {'lineStyle': {'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}},
+            'axisTick': {
+                'show': true,
+                'alignWithLabel': true,
+                'lineStyle': {'show': true, 'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}
+            },
+            'axisLabel': {'show': false},
+            'boundaryGap': false
+        },
+        'yAxis': {
+            'show': false,
+            'type': 'value',
+            'axisLine': {'lineStyle': {'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}},
+            'axisLabel': {'show': false},
+            'splitLine': {'lineStyle': {'type': 'dashed'}},
+            'axisTick': {
+                'show': true,
+                'lineStyle': {'show': true, 'color': 'rgba(0, 0, 0 , .54)', 'type': 'dashed'}
+            }
+        },
+        'series': [{'type': 'line', 'areaStyle': {}, 'smooth': false}],
+        'dataset': {
+            'source': [{'month': 'Jan', 'Unique Visit': 296, 'Page View': 548}, {
+                'month': 'Feb',
+                'Unique Visit': 1181,
+                'Page View': 714
+            }, {'month': 'Mar', 'Unique Visit': 235, 'Page View': 961}, {
+                'month': 'Apr',
+                'Unique Visit': 294,
+                'Page View': 580
+            }, {'month': 'May', 'Unique Visit': 765, 'Page View': 730}, {
+                'month': 'Jun',
+                'Unique Visit': 412,
+                'Page View': 1249
+            }, {'month': 'Jul', 'Unique Visit': 1125, 'Page View': 267}, {
+                'month': 'Aug',
+                'Unique Visit': 800,
+                'Page View': 251
+            }, {'month': 'Sep', 'Unique Visit': 948, 'Page View': 1043}, {
+                'month': 'Oct',
+                'Unique Visit': 1046,
+                'Page View': 1118
+            }, {'month': 'Nov', 'Unique Visit': 363, 'Page View': 573}, {
+                'month': 'Dec',
+                'Unique Visit': 909,
+                'Page View': 283
+            }]
+        },
+        'color': ['#45c2c5']
+    },
+    }
+  },
+})
+</script>