Merge branch 'guided-tour' into 'master'
Guided tour See merge request openflexure/openflexure-microscope-jsclient!46
This commit is contained in:
Joel Collins
commit
30fc1c499d
9 changed files with 222 additions and 200 deletions
24
package-lock.json
generated
24
package-lock.json
generated
|
|
@ -10514,6 +10514,12 @@
|
|||
"verror": "1.10.0"
|
||||
}
|
||||
},
|
||||
"jump.js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/jump.js/-/jump.js-1.0.2.tgz",
|
||||
"integrity": "sha1-4GQbR/QKOPITnCX9oFAL8o5DAVo=",
|
||||
"dev": true
|
||||
},
|
||||
"kew": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",
|
||||
|
|
@ -12314,6 +12320,12 @@
|
|||
"ts-pnp": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"popper.js": {
|
||||
"version": "1.16.1",
|
||||
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
|
||||
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
|
||||
"dev": true
|
||||
},
|
||||
"portfinder": {
|
||||
"version": "1.0.25",
|
||||
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
|
||||
|
|
@ -16064,6 +16076,18 @@
|
|||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-tour": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-tour/-/vue-tour-1.3.0.tgz",
|
||||
"integrity": "sha512-hLXA8vCCWNNjvXwEbfOagcZfJMz1a9Xi7LTN5nb/Nqpuv8RKT25dS5/HJBvHEEh1EoYQNOwohx1YA6x+2KTQbQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"hash-sum": "^2.0.0",
|
||||
"jump.js": "^1.0.2",
|
||||
"popper.js": "^1.16.0",
|
||||
"vue": "^2.6.10"
|
||||
}
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@
|
|||
"vue": "^2.6.11",
|
||||
"vue-plugin-load-script": "^1.2.0",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vue-tour": "^1.3.0",
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
|
|
|
|||
156
src/App.vue
156
src/App.vue
|
|
@ -4,13 +4,20 @@
|
|||
class="uk-height-1-1 uk-margin-remove uk-padding-remove"
|
||||
:class="handleTheme"
|
||||
>
|
||||
<panelLeft />
|
||||
<div id="tour-header"></div>
|
||||
<appContent />
|
||||
<v-tour
|
||||
name="guidedTour"
|
||||
:steps="tourSteps"
|
||||
:callbacks="tourCallbacks"
|
||||
:options="{ highlight: true }"
|
||||
></v-tour>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Import components
|
||||
import panelLeft from "./components/panelLeft.vue";
|
||||
import appContent from "./components/appContent.vue";
|
||||
|
||||
// Key Codes
|
||||
const keyCodes = {
|
||||
|
|
@ -22,7 +29,8 @@ const keyCodes = {
|
|||
down: 40,
|
||||
enter: 13,
|
||||
esc: 27,
|
||||
shift: 16
|
||||
shift: 16,
|
||||
t: 84
|
||||
};
|
||||
|
||||
// Export main app
|
||||
|
|
@ -30,14 +38,87 @@ export default {
|
|||
name: "App",
|
||||
|
||||
components: {
|
||||
panelLeft
|
||||
appContent
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
keysDown: {},
|
||||
systemDark: undefined,
|
||||
themeObserver: undefined
|
||||
themeObserver: undefined,
|
||||
tourSteps: [
|
||||
{
|
||||
target: "#tour-header", // We're using document.querySelector() under the hood
|
||||
header: {
|
||||
title: "Welcome to OpenFlexure eV"
|
||||
},
|
||||
content: `Click Next to learn how to use OpenFlexure eV`,
|
||||
params: {
|
||||
placement: "bottom"
|
||||
}
|
||||
},
|
||||
{
|
||||
target: "#saved-connections-grid",
|
||||
header: {
|
||||
title: "Saved microscopes"
|
||||
},
|
||||
content: `Connect to your saved microscopes for faster access`
|
||||
},
|
||||
{
|
||||
target: "#nearby-connections-grid",
|
||||
header: {
|
||||
title: "Nearby microscopes"
|
||||
},
|
||||
content: `Connect to microscopes found on your network`
|
||||
},
|
||||
{
|
||||
target: "#new-connection-card",
|
||||
header: {
|
||||
title: "New connection"
|
||||
},
|
||||
content: `Connect locally if you're running on a microscope, \nor open a new remote connection to a microscope`
|
||||
},
|
||||
{
|
||||
target: "#gallery-tab-icon",
|
||||
header: {
|
||||
title: "Capture gallery"
|
||||
},
|
||||
content: `View and download your microscope images from the gallery tab`
|
||||
},
|
||||
{
|
||||
target: "#navigate-tab-icon",
|
||||
header: {
|
||||
title: "Navigate around your sample"
|
||||
},
|
||||
content: `Move your microscope stage and perform autofocus from the navigate tab`
|
||||
},
|
||||
{
|
||||
target: "#capture-tab-icon",
|
||||
header: {
|
||||
title: "Capture microscope images"
|
||||
},
|
||||
content: `Take images and simple tile scans from the capture tab`
|
||||
},
|
||||
{
|
||||
target: "#settings-tab-icon",
|
||||
header: {
|
||||
title: "Change settings"
|
||||
},
|
||||
content: `Change app and microscope settings, including microscope calibration, from the settings tab`
|
||||
},
|
||||
{
|
||||
target: "#extension-tab-divider",
|
||||
header: {
|
||||
title: "Microscope extensions"
|
||||
},
|
||||
content: `Extensions installed on your microscope will appear below this line`
|
||||
}
|
||||
],
|
||||
tourCallbacks: {
|
||||
onStop: () => {
|
||||
this.setLocalStorageObj("completedTour", true);
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -86,6 +167,12 @@ export default {
|
|||
this.systemDark = false;
|
||||
}
|
||||
});
|
||||
// Handle guided tour
|
||||
// If the user has already completed or skipped the guided tour
|
||||
var completedTour = this.getLocalStorageObj("completedTour") || false;
|
||||
if (!completedTour) {
|
||||
this.$tours["guidedTour"].start();
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
|
|
@ -144,6 +231,7 @@ export default {
|
|||
) {
|
||||
this.navigateKeyHandler(keyCodes);
|
||||
this.captureKeyHandler(keyCodes);
|
||||
this.letterKeyHandler(keyCodes);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -197,6 +285,12 @@ export default {
|
|||
console.log("Capturing");
|
||||
this.$root.$emit("globalCaptureEvent");
|
||||
}
|
||||
},
|
||||
|
||||
letterKeyHandler: function(keyCodes) {
|
||||
if (keyCodes.shift in this.keysDown && keyCodes.t in this.keysDown) {
|
||||
this.$tours["guidedTour"].start();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -252,4 +346,56 @@ html {
|
|||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Style tour
|
||||
.v-tour__target--highlighted {
|
||||
box-shadow: 0px 0px 180px 40px rgba(0, 0, 0, 0.4) !important;
|
||||
border-radius: 5px;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.v-step {
|
||||
background: @global-primary-background !important;
|
||||
}
|
||||
|
||||
.v-step__header {
|
||||
background-color: darken(@global-primary-background, 15%) !important;
|
||||
}
|
||||
|
||||
.v-step__button {
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
// Change step arrow colour
|
||||
// This is awful and hacky and makes me sad, but needs must
|
||||
.v-step .v-step__arrow {
|
||||
border-color: darken(@global-primary-background, 15%) !important;
|
||||
&--dark {
|
||||
border-color: darken(@global-primary-background, 15%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-step[x-placement^="top"] .v-step__arrow {
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
|
||||
.v-step[x-placement^="bottom"] .v-step__arrow {
|
||||
border-left-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
}
|
||||
|
||||
.v-step[x-placement^="right"] .v-step__arrow {
|
||||
border-left-color: transparent !important;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
|
||||
.v-step[x-placement^="left"] .v-step__arrow {
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
id="panel-left"
|
||||
id="app-content"
|
||||
class="uk-margin-remove uk-padding-remove uk-height-1-1"
|
||||
uk-grid
|
||||
>
|
||||
|
|
@ -11,7 +11,8 @@
|
|||
>
|
||||
<tabIcon
|
||||
v-show="!liteMode"
|
||||
id="connect"
|
||||
id="connect-tab-icon"
|
||||
tab-i-d="connect"
|
||||
:require-connection="false"
|
||||
:current-tab="currentTab"
|
||||
@set-tab="setTab"
|
||||
|
|
@ -19,7 +20,8 @@
|
|||
<i class="material-icons">bug_report</i>
|
||||
</tabIcon>
|
||||
<tabIcon
|
||||
id="gallery"
|
||||
id="gallery-tab-icon"
|
||||
tab-i-d="gallery"
|
||||
:require-connection="true"
|
||||
:current-tab="currentTab"
|
||||
@set-tab="setTab"
|
||||
|
|
@ -30,7 +32,8 @@
|
|||
<hr />
|
||||
|
||||
<tabIcon
|
||||
id="navigate"
|
||||
id="navigate-tab-icon"
|
||||
tab-i-d="navigate"
|
||||
:require-connection="true"
|
||||
:current-tab="currentTab"
|
||||
@set-tab="setTab"
|
||||
|
|
@ -38,7 +41,8 @@
|
|||
<i class="material-icons">gamepad</i>
|
||||
</tabIcon>
|
||||
<tabIcon
|
||||
id="capture"
|
||||
id="capture-tab-icon"
|
||||
tab-i-d="capture"
|
||||
:require-connection="true"
|
||||
:current-tab="currentTab"
|
||||
@set-tab="setTab"
|
||||
|
|
@ -46,7 +50,8 @@
|
|||
<i class="material-icons">camera_alt</i>
|
||||
</tabIcon>
|
||||
<tabIcon
|
||||
id="settings"
|
||||
id="settings-tab-icon"
|
||||
tab-i-d="settings"
|
||||
:require-connection="false"
|
||||
:current-tab="currentTab"
|
||||
@set-tab="setTab"
|
||||
|
|
@ -54,12 +59,12 @@
|
|||
<i class="material-icons">settings</i>
|
||||
</tabIcon>
|
||||
|
||||
<hr />
|
||||
<hr id="extension-tab-divider" />
|
||||
|
||||
<tabIcon
|
||||
v-for="plugin in pluginsGuiList"
|
||||
:id="plugin.id"
|
||||
:key="plugin.id"
|
||||
:tab-i-d="plugin.id"
|
||||
:title="plugin.title"
|
||||
:require-connection="plugin.requiresConnection"
|
||||
:current-tab="currentTab"
|
||||
|
|
@ -76,35 +81,35 @@
|
|||
class="uk-padding-remove uk-height-1-1 uk-width-expand"
|
||||
>
|
||||
<tabContent
|
||||
id="connect"
|
||||
tab-i-d="connect"
|
||||
:require-connection="false"
|
||||
:current-tab="currentTab"
|
||||
>
|
||||
<connectContent />
|
||||
</tabContent>
|
||||
<tabContent
|
||||
id="gallery"
|
||||
tab-i-d="gallery"
|
||||
:require-connection="false"
|
||||
:current-tab="currentTab"
|
||||
>
|
||||
<galleryContent />
|
||||
</tabContent>
|
||||
<tabContent
|
||||
id="navigate"
|
||||
tab-i-d="navigate"
|
||||
:require-connection="true"
|
||||
:current-tab="currentTab"
|
||||
>
|
||||
<navigateContent />
|
||||
</tabContent>
|
||||
<tabContent
|
||||
id="capture"
|
||||
tab-i-d="capture"
|
||||
:require-connection="true"
|
||||
:current-tab="currentTab"
|
||||
>
|
||||
<captureContent />
|
||||
</tabContent>
|
||||
<tabContent
|
||||
id="settings"
|
||||
tab-i-d="settings"
|
||||
:require-connection="false"
|
||||
:current-tab="currentTab"
|
||||
>
|
||||
|
|
@ -113,8 +118,8 @@
|
|||
|
||||
<tabContent
|
||||
v-for="plugin in pluginsGuiList"
|
||||
:id="plugin.id"
|
||||
:key="plugin.id"
|
||||
:tab-i-d="plugin.id"
|
||||
:require-connection="plugin.requiresConnection"
|
||||
:current-tab="currentTab"
|
||||
>
|
||||
|
|
@ -204,6 +209,8 @@ export default {
|
|||
);
|
||||
},
|
||||
|
||||
mounted: function() {},
|
||||
|
||||
beforeDestroy() {
|
||||
// Then we call that function here to unwatch
|
||||
if (this.unwatchStoreFunction) {
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="!(requireConnection && !$store.getters.ready)"
|
||||
:hidden="currentTab != id"
|
||||
:hidden="currentTab != tabID"
|
||||
class="uk-width-expand uk-height-1-1"
|
||||
>
|
||||
<div class="section-content"><slot></slot></div>
|
||||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
name: "TabContent",
|
||||
|
||||
props: {
|
||||
id: {
|
||||
tabID: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export default {
|
|||
name: "TabIcon",
|
||||
|
||||
props: {
|
||||
id: {
|
||||
tabID: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
return this.title;
|
||||
} else {
|
||||
// Get the last section of a fully qualified name
|
||||
var topName = this.id.split(".").pop();
|
||||
var topName = this.tabID.split(".").pop();
|
||||
// Make first character uppercase, then add the rest of the string
|
||||
return topName.charAt(0).toUpperCase() + topName.slice(1);
|
||||
}
|
||||
|
|
@ -57,7 +57,7 @@ export default {
|
|||
|
||||
classObject: function() {
|
||||
return {
|
||||
"tabicon-active": this.currentTab == this.id,
|
||||
"tabicon-active": this.currentTab == this.tabID,
|
||||
"uk-disabled": this.requireConnection && !this.$store.getters.ready
|
||||
};
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@ export default {
|
|||
|
||||
methods: {
|
||||
setThisTab(event) {
|
||||
this.$emit("set-tab", event, this.id);
|
||||
this.$emit("set-tab", event, this.tabID);
|
||||
if (this.clickCallback) {
|
||||
this.clickCallback();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,170 +0,0 @@
|
|||
<template>
|
||||
<!-- Tabbed panel for gallery and live views -->
|
||||
<div
|
||||
id="panel-right"
|
||||
class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1"
|
||||
>
|
||||
<ul
|
||||
id="tabContainer"
|
||||
class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center"
|
||||
uk-tab="swiping: false"
|
||||
>
|
||||
<!-- Connect tab button -->
|
||||
<li
|
||||
v-show="!liteMode"
|
||||
:class="[{ 'uk-active': currentTab == 'connect' }]"
|
||||
>
|
||||
<a href="#" uk-switcher-item="connect" @click="currentTab = 'connect'"
|
||||
>Connect</a
|
||||
>
|
||||
</li>
|
||||
<!-- Preview tab button -->
|
||||
<li
|
||||
:class="[
|
||||
{ 'uk-disabled': !$store.getters.ready },
|
||||
{ 'uk-active': currentTab == 'preview' }
|
||||
]"
|
||||
>
|
||||
<a href="#" uk-switcher-item="preview" @click="currentTab = 'preview'"
|
||||
>Live</a
|
||||
>
|
||||
</li>
|
||||
<!-- Gallery tab button -->
|
||||
<li
|
||||
:class="[
|
||||
{ 'uk-disabled': !$store.getters.ready },
|
||||
{ 'uk-active': currentTab == 'gallery' }
|
||||
]"
|
||||
>
|
||||
<a href="#" uk-switcher-item="gallery" @click="currentTab = 'gallery'"
|
||||
>Gallery</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
class="uk-flex uk-flex-1 uk-overflow-auto uk-margin-remove uk-padding-remove"
|
||||
>
|
||||
<!-- Connect tab -->
|
||||
<div
|
||||
v-show="currentTab == 'connect'"
|
||||
id="connectDisplayTab"
|
||||
class="uk-height-1-1 uk-width-1-1"
|
||||
>
|
||||
<connectDisplayLite v-if="liteMode" />
|
||||
<connectDisplay v-else />
|
||||
</div>
|
||||
<!-- Preview tab -->
|
||||
<div
|
||||
v-if="$store.getters.ready"
|
||||
v-show="currentTab == 'preview'"
|
||||
id="streamDisplayTab"
|
||||
class="uk-height-1-1 uk-width-1-1"
|
||||
>
|
||||
<streamDisplay />
|
||||
</div>
|
||||
<!-- Gallery tab -->
|
||||
<div
|
||||
v-if="$store.getters.ready"
|
||||
v-show="currentTab == 'gallery'"
|
||||
id="galleryDisplayTab"
|
||||
class="uk-height-1-1 uk-width-1-1"
|
||||
>
|
||||
<galleryDisplay />
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Import basic UIkit
|
||||
import UIkit from "uikit";
|
||||
|
||||
// Import components
|
||||
import connectDisplay from "./viewComponents/connectDisplay.vue";
|
||||
import connectDisplayLite from "./viewComponents/connectDisplayLite.vue";
|
||||
import streamDisplay from "./viewComponents/streamDisplay.vue";
|
||||
import galleryDisplay from "./viewComponents/galleryDisplay.vue";
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: "PanelRight",
|
||||
|
||||
components: {
|
||||
connectDisplay,
|
||||
connectDisplayLite,
|
||||
streamDisplay,
|
||||
galleryDisplay
|
||||
},
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
currentTab: "connect",
|
||||
unwatchStoreFunction: null,
|
||||
liteMode: process.env.VUE_APP_LITEMODE == "true" ? true : false
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentTab: function(index) {
|
||||
// If entering the gallery
|
||||
if (index == "gallery") {
|
||||
console.log("Gallery tab entered");
|
||||
this.$root.$emit("globalUpdateCaptures");
|
||||
}
|
||||
// If entering the stream
|
||||
if (index == "preview") {
|
||||
console.log("Preview tab entered");
|
||||
this.$root.$emit("globalTogglePreview", true);
|
||||
}
|
||||
// If leaving the stream
|
||||
else {
|
||||
console.log("Preview tab hidden");
|
||||
this.$root.$emit("globalTogglePreview", false);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created: function() {
|
||||
// Watch for host 'ready', then update status
|
||||
this.unwatchStoreFunction = this.$store.watch(
|
||||
(state, getters) => {
|
||||
return getters.ready;
|
||||
},
|
||||
ready => {
|
||||
if (ready) {
|
||||
console.log("Right panel now ready");
|
||||
this.currentTab = "preview";
|
||||
} else {
|
||||
console.log("Right panel now disabled");
|
||||
this.currentTab = "connect";
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
// Then we call that function here to unwatch
|
||||
if (this.unwatchStoreFunction) {
|
||||
this.unwatchStoreFunction();
|
||||
this.unwatchStoreFunction = null;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
switchTab: function(index) {
|
||||
var switcherObj = UIkit.switcher("#tabContainer");
|
||||
console.log(switcherObj);
|
||||
console.log(switcherObj.toggles);
|
||||
console.log(`Switching to ${index}`);
|
||||
var a = switcherObj.show(index);
|
||||
console.log(a);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.uk-tab {
|
||||
padding-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
>
|
||||
<div class="uk-width-auto">
|
||||
<div
|
||||
id="new-connection-card"
|
||||
class="uk-card uk-card-default uk-padding-remove uk-width-medium connect-card-align-top"
|
||||
>
|
||||
<div class="uk-card-body uk-padding-small">
|
||||
|
|
@ -97,7 +98,11 @@
|
|||
<li class="uk-open">
|
||||
<a class="uk-accordion-title" href="#">Saved devices</a>
|
||||
<div class="uk-accordion-content">
|
||||
<div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
|
||||
<div
|
||||
id="saved-connections-grid"
|
||||
class="uk-grid-medium uk-grid-match uk-margin-top"
|
||||
uk-grid
|
||||
>
|
||||
<div v-for="host in savedHosts" :key="host.name">
|
||||
<hostCard
|
||||
:name="host.name"
|
||||
|
|
@ -114,7 +119,11 @@
|
|||
<li class="uk-open">
|
||||
<a class="uk-accordion-title" href="#">Nearby devices</a>
|
||||
<div class="uk-accordion-content">
|
||||
<div class="uk-grid-medium uk-grid-match uk-margin-top" uk-grid>
|
||||
<div
|
||||
id="nearby-connections-grid"
|
||||
class="uk-grid-medium uk-grid-match uk-margin-top"
|
||||
uk-grid
|
||||
>
|
||||
<div v-for="host in foundHostArray" :key="host.name">
|
||||
<hostCard
|
||||
:name="host.name"
|
||||
|
|
|
|||
11
src/main.js
11
src/main.js
|
|
@ -1,16 +1,21 @@
|
|||
import Vue from "vue";
|
||||
import App from "./App.vue";
|
||||
import store from "./store";
|
||||
|
||||
import UIkit from "uikit";
|
||||
import VueTour from "vue-tour";
|
||||
import LoadScript from "vue-plugin-load-script";
|
||||
|
||||
require("vue-tour/dist/vue-tour.css");
|
||||
|
||||
// Import MD icons
|
||||
import "material-design-icons/iconfont/material-icons.css";
|
||||
|
||||
// Import load-script module
|
||||
import LoadScript from "vue-plugin-load-script";
|
||||
// Use load-script module
|
||||
Vue.use(LoadScript);
|
||||
|
||||
// Use vue-tour module
|
||||
Vue.use(VueTour);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
Vue.mixin({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue