Merge pull request #309 from specklesystems/frontend/onboarding
Frontend/onboarding
This commit is contained in:
Matteo Cominetti
Generated
+20
@@ -1863,6 +1863,16 @@
|
||||
"integrity": "sha512-9GvTek+7cVw7r+L7TNGOG1astZJWXz2h5q4BqMXl28KN+24iSCm1xo+RhZOZvwdT3bzNe9hD7riJc/lBoO7mgg==",
|
||||
"dev": true
|
||||
},
|
||||
"@speckle/viewer": {
|
||||
"version": "2.0.12",
|
||||
"resolved": "https://registry.npmjs.org/@speckle/viewer/-/viewer-2.0.12.tgz",
|
||||
"integrity": "sha512-R5NL2/ECacW4GFni/Cri2mUbwRPkSu5EaOybQL/Vhp1QdNPA2wwotAdfxGr84KzQV0+A1J0lypZchVafLUZpDg==",
|
||||
"requires": {
|
||||
"camera-controls": "^1.28.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"three": "0.124.0"
|
||||
}
|
||||
},
|
||||
"@types/accepts": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/accepts/-/accepts-1.3.5.tgz",
|
||||
@@ -4462,6 +4472,11 @@
|
||||
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
|
||||
"dev": true
|
||||
},
|
||||
"camera-controls": {
|
||||
"version": "1.28.4",
|
||||
"resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-1.28.4.tgz",
|
||||
"integrity": "sha512-Y5B5I0cnMwyZKbd6Chcr0hdSpY4B39jqFP/HXH3NqtL91JpPKy9tec+S7+OTpCPrQBIUMsBkQWloXwd9hIlB1Q=="
|
||||
},
|
||||
"caniuse-api": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
|
||||
@@ -13723,6 +13738,11 @@
|
||||
"neo-async": "^2.6.0"
|
||||
}
|
||||
},
|
||||
"three": {
|
||||
"version": "0.124.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.124.0.tgz",
|
||||
"integrity": "sha512-ROXp1Ly7YyF+jC910DQyAWj++Qlw2lQv0qwYLNQwdDbjk4bsOXAfGO92wYTMPNei1GMJUmCxSxc3MjGBTS09Rg=="
|
||||
},
|
||||
"throttle-debounce": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 557 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@@ -1,142 +1,319 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-card class="elevation-10 rounded-lg">
|
||||
<v-img class="white--text align-end" height="200px" src="@/assets/onboardingsplash.png">
|
||||
<v-card-title class="">Speckle Onboarding {{ onboarding + 1 }} / 4</v-card-title>
|
||||
</v-img>
|
||||
<v-window v-model="onboarding" class="py-3">
|
||||
<v-btn
|
||||
v-if="onboarding < 3"
|
||||
small
|
||||
text
|
||||
class="white--grey"
|
||||
style="position: absolute; top: 5px; right: 5px; z-index: 1002"
|
||||
@click="skip"
|
||||
>
|
||||
Skip
|
||||
</v-btn>
|
||||
|
||||
<v-window v-model="onboarding" class="pb-3">
|
||||
<v-window-item>
|
||||
<v-card class="transparent elevation-0" color="transparent">
|
||||
<v-card-title>Welcome!</v-card-title>
|
||||
<v-card-text class="body-1">
|
||||
<v-card class="transparent elevation-0 text-center" color="transparent">
|
||||
<v-img
|
||||
class="white--text align-end mb-3"
|
||||
height="200px"
|
||||
src="@/assets/onboardingsplash.png"
|
||||
></v-img>
|
||||
<v-card-title class="display-1 justify-center mb-5">
|
||||
👋 Welcome to Speckle!
|
||||
</v-card-title>
|
||||
<v-card-subtitle class="subtitle-1 justify-center mb-5">
|
||||
The Open Data Infrastructure for the Built Environment.
|
||||
</v-card-subtitle>
|
||||
<v-card-text class="body-1 text--primary">
|
||||
<p>
|
||||
Next, we will guide you through setting up Speckle on your computer. If you've done
|
||||
this before, feel free to skip this wizard!
|
||||
Engineers, designers, hackers and entire organizations rely on us for
|
||||
interoperability, automation and collaboration to deliver better buildings, faster.
|
||||
<br />
|
||||
Please select your role:
|
||||
</p>
|
||||
<p>The next steps in a nutshell:</p>
|
||||
<ul>
|
||||
<li>Installing the Speckle Manager</li>
|
||||
<li>Setting up your account</li>
|
||||
<li>Creating your first stream</li>
|
||||
</ul>
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn block color="primary" @click="next">
|
||||
Let's go
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
<v-window-item>
|
||||
<v-card class="transparent elevation-0" color="transparent">
|
||||
<v-card-title>Speckle Manager Installation</v-card-title>
|
||||
<v-card-text class="body-1">
|
||||
<p>
|
||||
Speckle Manager is a desktop application that handles accounts and connectors
|
||||
(Rhino, Revit, etc.) on your machine. Once you have downloaded Speckle Manager, go
|
||||
ahead and install it. Once you're done, go to the next step!
|
||||
</p>
|
||||
<p>Note: Currently, we only support Windows.</p>
|
||||
<v-btn
|
||||
block
|
||||
:x-large="!hasClickedDownload"
|
||||
elevation="10"
|
||||
class="mb-4"
|
||||
:color="hasClickedDownload ? '' : 'primary'"
|
||||
@click="downloadManager"
|
||||
>
|
||||
<v-icon small class="mr-4">mdi-download</v-icon>
|
||||
Download Speckle Manager (WIN)
|
||||
</v-btn>
|
||||
<p>If you already have installed Speckle Manager, proceed to the next step.</p>
|
||||
</v-card-text>
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn block :color="hasClickedDownload ? 'primary' : ''" @click="next">
|
||||
Next Step: Accounts
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
<v-container fluid>
|
||||
<v-row dense>
|
||||
<v-col cols="5" offset="1">
|
||||
<v-hover>
|
||||
<v-card
|
||||
slot-scope="{ hover }"
|
||||
height="100%"
|
||||
:class="`pa-5 elevation-${hover ? 10 : 10}`"
|
||||
@click="nextUser"
|
||||
>
|
||||
<h1>👷♀️</h1>
|
||||
<v-card-title class="justify-center">AEC Person</v-card-title>
|
||||
<v-card-subtitle class="justify-center">
|
||||
Architect, engineer, BIM/project manager...
|
||||
</v-card-subtitle>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
<v-col cols="5" offset="0">
|
||||
<v-hover>
|
||||
<v-card
|
||||
slot-scope="{ hover }"
|
||||
height="100%"
|
||||
:class="`pa-5 elevation-${hover ? 10 : 10}`"
|
||||
@click="nextDev"
|
||||
>
|
||||
<h1>👩💻</h1>
|
||||
<v-card-title class="justify-center">AEC Developer</v-card-title>
|
||||
<v-card-subtitle class="justify-center">
|
||||
Software engineer, computational designer, hacker
|
||||
</v-card-subtitle>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<p class="my-7"><strong>Let us give you a quick tour! 🙋♂️</strong></p>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
|
||||
<v-window-item>
|
||||
<v-card class="transparent elevation-0" color="transparent">
|
||||
<v-card-title>Account Linking</v-card-title>
|
||||
<v-card-text class="body-1">
|
||||
<v-window-item v-if="isDev">
|
||||
<v-card class="transparent elevation-0 text-center" color="transparent">
|
||||
<v-img
|
||||
class="white--text align-end mb-3"
|
||||
height="200px"
|
||||
src="@/assets/onboarding_connectors_dev.png"
|
||||
></v-img>
|
||||
<v-card-title class="display-1 justify-center mb-5">🧰 Our toolkit</v-card-title>
|
||||
<v-card-subtitle class="subtitle-1 justify-center mb-5">
|
||||
From AEC developers, for AEC developers
|
||||
</v-card-subtitle>
|
||||
<v-card-text class="body-1 text--primary">
|
||||
<p>
|
||||
In order to use the desktop connectors with Speckle, you need to add this account to
|
||||
the Speckle Manager. Click the button below to do so. NOTE: You need to have Speckle
|
||||
Manager installed first!
|
||||
Use our
|
||||
<b>connectors, SDKs, APIs and tools</b>
|
||||
to get in control of
|
||||
<i>your data.</i>
|
||||
</p>
|
||||
<p>
|
||||
The authentication process will open several annoying windows, but at the end of the
|
||||
process your account should be safely stored on your computer - and usable from
|
||||
within all the connectors.
|
||||
Whether you are
|
||||
<b>writing new integrations, custom workflows or creating brand new apps</b>
|
||||
on top of Speckle, our toolkit is here to take care of the low level stuff, so that
|
||||
you can focus on the fun bits.
|
||||
</p>
|
||||
<p>
|
||||
From user permission management, data extraction or 3d model online visualization,
|
||||
we've got you covered!
|
||||
</p>
|
||||
<v-btn
|
||||
block
|
||||
:x-large="hasClickedAddAccount === 0"
|
||||
class="mb-4"
|
||||
elevation="10"
|
||||
:color="hasClickedAddAccount !== 0 ? '' : 'primary'"
|
||||
@click="addAccount"
|
||||
>
|
||||
<v-icon small class="mr-4">mdi-account-plus</v-icon>
|
||||
Add Account Speckle Manager
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
<v-alert type="info" color="blue" text class="mx-4" v-show="hasClickedAddAccount >= 2">
|
||||
Having trouble adding your account to the Speckle Manager? Read a
|
||||
<a
|
||||
_target="_blank"
|
||||
href="http://speckle.guide/user/FAQs.html#i-cannot-add-an-account-in-speckle-manager"
|
||||
>
|
||||
quick help article on this
|
||||
</a>
|
||||
!
|
||||
</v-alert>
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn block :color="hasClickedAddAccount !== 0 ? 'primary' : ''" @click="next">
|
||||
Your first stream
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
|
||||
<v-window-item>
|
||||
<v-card class="transparent elevation-0" color="transparent">
|
||||
<v-card-title>Your First Stream</v-card-title>
|
||||
<v-card-text class="body-1">
|
||||
<v-window-item v-else>
|
||||
<v-card class="transparent elevation-0 text-center" color="transparent">
|
||||
<v-img
|
||||
class="white--text align-end mb-3"
|
||||
height="200px"
|
||||
src="@/assets/onboarding_connectors.png"
|
||||
></v-img>
|
||||
<v-card-title class="display-1 justify-center mb-5">🔌 Connectors</v-card-title>
|
||||
<v-card-subtitle class="subtitle-1 justify-center mb-5">
|
||||
Say goodbye to files!
|
||||
</v-card-subtitle>
|
||||
<v-card-text class="body-1 text--primary">
|
||||
<p></p>
|
||||
<p>
|
||||
Streams are the primary way Speckle organizes data. You can see them as a file, a
|
||||
part of a file, or a repository. Ultimately, a stream is simply a collection of
|
||||
objects with some helpful additional information to manage and retrieve them.
|
||||
<b>Connectors</b>
|
||||
are plugins for design and analysis software, they let you
|
||||
<b>exchange</b>
|
||||
geometry and BIM data dirctly from the tools you use.
|
||||
</p>
|
||||
<p>
|
||||
A stream also lets you manage permissions: it has a list of collaborators including
|
||||
an owner and additional reviewers and contributors which the owner has chosen to
|
||||
share the stream with.
|
||||
Install our connectors and you'll instantly be able to
|
||||
<b>share your models and data</b>
|
||||
with others or
|
||||
<b>access it from the web,</b>
|
||||
or
|
||||
<b>load it into other supported software</b>
|
||||
.
|
||||
</p>
|
||||
<v-btn block depressed color="primary" class="mb-2" @click="newStreamDialog = true">
|
||||
Create Your First Stream
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
|
||||
<v-window-item v-if="isDev">
|
||||
<v-card class="transparent elevation-0 text-center" color="transparent">
|
||||
<v-img
|
||||
class="white--text align-end mb-3"
|
||||
height="200px"
|
||||
src="@/assets/onboarding_streams.png"
|
||||
></v-img>
|
||||
<v-card-title class="display-1 justify-center mb-5">
|
||||
🐙 Git & DevOps for AEC
|
||||
</v-card-title>
|
||||
<v-card-subtitle class="subtitle-1 justify-center mb-5">
|
||||
Welcome to the future of the AEC industry!
|
||||
</v-card-subtitle>
|
||||
<v-card-text class="body-1 text--primary">
|
||||
<p>
|
||||
Speckle ships with a
|
||||
<b>version control system,</b>
|
||||
we're bringing the tech industry best practices to AEC. You'll soon also be able to
|
||||
<b>trigger custom workflows and pipelines</b>
|
||||
directly from Speckle!
|
||||
</p>
|
||||
<p>
|
||||
Also, Speckle talks
|
||||
<i>data, not files!</i>
|
||||
<br />
|
||||
Store it where you want, and access it when you need 🔓
|
||||
</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
<v-window-item v-else>
|
||||
<v-card class="transparent elevation-0 text-center" color="transparent">
|
||||
<v-img
|
||||
class="white--text align-end mb-3"
|
||||
height="200px"
|
||||
src="@/assets/onboarding_streams.png"
|
||||
></v-img>
|
||||
<v-card-title class="display-1 justify-center mb-5">🌊 Streams</v-card-title>
|
||||
<v-card-subtitle class="subtitle-1 justify-center mb-5">
|
||||
A new way of working together
|
||||
</v-card-subtitle>
|
||||
<v-card-text class="body-1 text--primary">
|
||||
<p>
|
||||
<b>Streams</b>
|
||||
are collections of data inside Speckle. You can see a stream as a folder, a project
|
||||
or a repository.
|
||||
</p>
|
||||
<p>
|
||||
Data in a stream is stored in
|
||||
<b>commits,</b>
|
||||
which are snapshots of data in time. Every time you send to Speckle from a
|
||||
connector, a commit is created.
|
||||
</p>
|
||||
<p>
|
||||
Commits can also be organized in
|
||||
<b>branches,</b>
|
||||
for instace, to have multiple design options or to store data by discipline. The
|
||||
dafault branch is called
|
||||
<i>main</i>
|
||||
.
|
||||
</p>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
<v-window-item v-if="isDev">
|
||||
<v-card class="transparent elevation-0 text-center" color="transparent">
|
||||
<v-card-title class="display-1 justify-center my-5">🏃♀️ Start Hacking!</v-card-title>
|
||||
<v-card-subtitle class="subtitle-1 justify-center mb-5">
|
||||
Time to make the most of
|
||||
<b>your</b>
|
||||
data!
|
||||
</v-card-subtitle>
|
||||
<v-card-text class="body-1 text--primary">
|
||||
<p>
|
||||
You can now start developing with Speckle and create your connectors, apps or custom
|
||||
workflows.
|
||||
</p>
|
||||
<p>We have put together a series of resources that you might find useful:</p>
|
||||
</v-card-text>
|
||||
<v-container fluid>
|
||||
<v-row dense>
|
||||
<v-col v-for="(tutorial, i) in tutorialsDev" :key="i" cols="6">
|
||||
<v-hover>
|
||||
<v-card
|
||||
slot-scope="{ hover }"
|
||||
:class="`elevation-${hover ? 10 : 0}`"
|
||||
:href="tutorial.link"
|
||||
target="_blank"
|
||||
>
|
||||
<v-img
|
||||
class="white--text align-end"
|
||||
height="150"
|
||||
gradient="to bottom, rgba(36,100,235,.2), rgba(36,100,235,.7)"
|
||||
:src="require('@/assets/' + tutorial.image)"
|
||||
>
|
||||
<v-card-title class="justify-center">
|
||||
{{ tutorial.title }}
|
||||
</v-card-title>
|
||||
</v-img>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-btn elevation="10" class="my-4" rounded color="primary" @click="finish">
|
||||
<!-- <v-icon small class="mr-4">mdi-download</v-icon> -->
|
||||
Finish & go to the web app
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
<v-window-item v-else>
|
||||
<v-card class="transparent elevation-0 text-center" color="transparent">
|
||||
<v-card-title class="display-1 justify-center my-5">🏃♀️ Get Started!</v-card-title>
|
||||
<v-card-subtitle class="subtitle-1 justify-center mb-5">
|
||||
Time to make the most of
|
||||
<b>your</b>
|
||||
data!
|
||||
</v-card-subtitle>
|
||||
<v-card-text class="body-1 text--primary">
|
||||
<p>
|
||||
You can now start creating your own workflows for automation, interoperaility or
|
||||
collaboration using Speckle!
|
||||
</p>
|
||||
<p>We have put together a series of tutorials that you might find useful:</p>
|
||||
</v-card-text>
|
||||
<v-container fluid>
|
||||
<v-row dense>
|
||||
<v-col v-for="(tutorial, i) in tutorials" :key="i" cols="6">
|
||||
<v-hover>
|
||||
<v-card
|
||||
slot-scope="{ hover }"
|
||||
:class="`elevation-${hover ? 10 : 0}`"
|
||||
:href="tutorial.link"
|
||||
target="_blank"
|
||||
>
|
||||
<v-img
|
||||
class="white--text align-end"
|
||||
height="150"
|
||||
gradient="to bottom, rgba(36,100,235,.2), rgba(36,100,235,.7)"
|
||||
:src="require('@/assets/' + tutorial.image)"
|
||||
>
|
||||
<v-card-title class="justify-center">
|
||||
{{ tutorial.title }}
|
||||
</v-card-title>
|
||||
</v-img>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-btn elevation="10" class="my-4" rounded color="primary" @click="finish">
|
||||
<!-- <v-icon small class="mr-4">mdi-download</v-icon> -->
|
||||
Finish & go to the web app
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
<v-card-actions v-if="onboarding > 0" class="justify-space-between pb-7">
|
||||
<v-btn text @click="prev">
|
||||
<v-icon>mdi-chevron-left</v-icon>
|
||||
</v-btn>
|
||||
<v-item-group v-model="onboarding" class="text-center" mandatory>
|
||||
<v-item v-for="n in length" :key="`btn-${n}`" v-slot="{ active, toggle }">
|
||||
<v-btn :input-value="active" icon @click="toggle">
|
||||
<v-icon small>mdi-record</v-icon>
|
||||
</v-btn>
|
||||
</v-item>
|
||||
</v-item-group>
|
||||
<v-btn :disabled="onboarding == 3" text @click="next">
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
<div class="text-center py-4">
|
||||
<v-btn v-show="onboarding !== 0" small text color="grey" @click="prev">
|
||||
<v-icon small>mdi-chevron-left</v-icon>
|
||||
</v-btn>
|
||||
<v-btn small text @click="skip">
|
||||
Skip Onboarding
|
||||
<v-icon small style="opacity: 0.5" class="ml-1">mdi-fast-forward</v-icon>
|
||||
<!-- <v-icon small>mdi-chevron-right</v-icon> -->
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-dialog v-model="newStreamDialog" max-width="500">
|
||||
<stream-new-dialog @created="finish" />
|
||||
</v-dialog>
|
||||
@@ -148,17 +325,58 @@ import StreamNewDialog from '../components/dialogs/StreamNewDialog'
|
||||
export default {
|
||||
components: { StreamNewDialog },
|
||||
data: () => ({
|
||||
length: 3,
|
||||
length: 4,
|
||||
onboarding: 0,
|
||||
newStreamDialog: false,
|
||||
hasClickedDownload: false,
|
||||
hasClickedAddAccount: 0
|
||||
hasClickedAddAccount: 0,
|
||||
isDev: false,
|
||||
tutorials: [
|
||||
{
|
||||
title: 'Create Revit models from Rhino',
|
||||
image: 'rhino-revit-tutorial.png',
|
||||
link: 'https://speckle.guide/user/interop-rhino-revit.html'
|
||||
},
|
||||
{
|
||||
title: 'View 3d models online',
|
||||
image: 'viewer-tutorial.png',
|
||||
link: 'https://speckle.guide/user/web.html#_3d-viewer'
|
||||
},
|
||||
{
|
||||
title: 'Analyse Revit models in Grasshopper',
|
||||
image: 'revit-gh-tutorial.png',
|
||||
link: 'https://speckle.guide/user/interop-revit-gh.html'
|
||||
},
|
||||
{
|
||||
title: 'See more in our tutorials portal!',
|
||||
image: 'tutorials.png',
|
||||
link: 'https://speckle.guide/user/tutorials.html'
|
||||
}
|
||||
],
|
||||
tutorialsDev: [
|
||||
{
|
||||
title: 'Writing your own connector',
|
||||
image: 'connector-tutorial.png',
|
||||
link: 'https://speckle.guide/dev/connectors-dev.html'
|
||||
},
|
||||
{
|
||||
title: 'Writing your own app',
|
||||
image: 'app-tutorial.png',
|
||||
link: 'https://speckle.guide/dev/apps.html'
|
||||
},
|
||||
{
|
||||
title: 'Using the GraphQL API',
|
||||
image: 'api-tutorial.png',
|
||||
link: 'https://speckle.guide/dev/server-graphql-api.html'
|
||||
},
|
||||
{
|
||||
title: 'See more content and resources in our dev docs!',
|
||||
image: 'tutorials.png',
|
||||
link: 'https://speckle.guide/dev/'
|
||||
}
|
||||
]
|
||||
}),
|
||||
computed: {
|
||||
rootUrl() {
|
||||
return window.location.origin
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
mounted() {
|
||||
this.$matomo && this.$matomo.trackEvent('onboarding', 'start')
|
||||
},
|
||||
@@ -171,6 +389,7 @@ export default {
|
||||
finish() {
|
||||
this.$matomo && this.$matomo.trackPageView(`onboarding/done`)
|
||||
localStorage.setItem('onboarding', 'complete')
|
||||
this.$router.push('/')
|
||||
},
|
||||
prev() {
|
||||
this.onboarding--
|
||||
@@ -180,17 +399,13 @@ export default {
|
||||
this.onboarding++
|
||||
this.$matomo && this.$matomo.trackPageView(`onboarding/step-${this.onboarding}`)
|
||||
},
|
||||
downloadManager() {
|
||||
this.hasClickedDownload = true
|
||||
this.$matomo && this.$matomo.trackPageView(`onboarding/managerdownload`)
|
||||
this.$matomo && this.$matomo.trackEvent('onboarding', 'managerdownload')
|
||||
window.open('https://releases.speckle.dev/manager/SpeckleManager%20Setup.exe', '_blank')
|
||||
nextUser() {
|
||||
this.isDev = false
|
||||
this.next()
|
||||
},
|
||||
addAccount() {
|
||||
this.hasClickedAddAccount++
|
||||
this.$matomo && this.$matomo.trackPageView(`onboarding/accountadd`)
|
||||
this.$matomo && this.$matomo.trackEvent('onboarding', 'accountadd')
|
||||
window.open(`speckle://accounts?add_server_account=${this.rootUrl}`, '_blank')
|
||||
nextDev() {
|
||||
this.isDev = true
|
||||
this.next()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,48 +83,178 @@
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="8" lg="9" xl="10">
|
||||
<div v-if="!$apollo.loading && streams.totalCount === 0" class="pa-4">
|
||||
<no-data-placeholder
|
||||
:message="`Hello there! It seems like you don't have any streams yet. Here's a handful of useful links to help you get started:`"
|
||||
/>
|
||||
</div>
|
||||
<v-card v-if="user && user.streams.totalCount > 0" class="my-5" flat>
|
||||
<v-card-text class="body-1">
|
||||
<span>
|
||||
You have
|
||||
<v-icon small>mdi-compare-vertical</v-icon>
|
||||
<b>{{ user.streams.totalCount }}</b>
|
||||
streams and
|
||||
<v-icon small>mdi-source-commit</v-icon>
|
||||
<b>{{ user.commits.totalCount }}</b>
|
||||
commits.
|
||||
</span>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-card elevation="0" color="transparent">
|
||||
<div v-if="$apollo.loading" class="my-5">
|
||||
<v-skeleton-loader type="list-item-three-line"></v-skeleton-loader>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-row v-if="streams && streams.items">
|
||||
<v-col
|
||||
v-for="(stream, i) in streams.items"
|
||||
:key="i"
|
||||
cols="12"
|
||||
sm="12"
|
||||
md="12"
|
||||
lg="6"
|
||||
xl="4"
|
||||
>
|
||||
<list-item-stream :stream="stream"></list-item-stream>
|
||||
<v-row>
|
||||
<v-col v-if="$apollo.loading">
|
||||
<v-card elevation="0" color="transparent">
|
||||
<div v-if="$apollo.loading" class="my-5">
|
||||
<v-skeleton-loader type="list-item-three-line"></v-skeleton-loader>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col v-else-if="streams && streams.items && streams.items.length > 0">
|
||||
<!-- <div v-if="!$apollo.loading && streams.totalCount === 0" class="pa-4">
|
||||
<no-data-placeholder
|
||||
:message="`Hello there! It seems like you don't have any streams yet. Here's a handful of useful links to help you get started:`"
|
||||
/>
|
||||
</div> -->
|
||||
<v-card v-if="user" class="my-5" flat>
|
||||
<v-card-text class="body-1">
|
||||
<span>
|
||||
You have
|
||||
<v-icon small>mdi-compare-vertical</v-icon>
|
||||
<b>{{ user.streams.totalCount }}</b>
|
||||
streams and
|
||||
<v-icon small>mdi-source-commit</v-icon>
|
||||
<b>{{ user.commits.totalCount }}</b>
|
||||
commits.
|
||||
</span>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(stream, i) in streams.items"
|
||||
:key="i"
|
||||
cols="12"
|
||||
sm="12"
|
||||
md="12"
|
||||
lg="6"
|
||||
xl="4"
|
||||
>
|
||||
<list-item-stream :stream="stream"></list-item-stream>
|
||||
</v-col>
|
||||
<infinite-loading
|
||||
v-if="streams.items.length < streams.totalCount"
|
||||
@infinite="infiniteHandler"
|
||||
>
|
||||
<div slot="no-more">These are all your streams!</div>
|
||||
<div slot="no-results">There are no streams to load</div>
|
||||
</infinite-loading>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col v-if="quickstart > 0">
|
||||
<div v-if="quickstart === 1" class="ma-5 headline">
|
||||
Hello 👋
|
||||
<br />
|
||||
It seems you're new here, let's get you set up:
|
||||
</div>
|
||||
<v-stepper
|
||||
v-model="quickstart"
|
||||
flat
|
||||
shaped
|
||||
vertical
|
||||
class="rounded-lg quickstart-stepper mt-5"
|
||||
>
|
||||
<v-stepper-step :complete="quickstart > 1" step="1">
|
||||
Create your first stream
|
||||
</v-stepper-step>
|
||||
|
||||
<v-stepper-content step="1" class="body-2">
|
||||
<p>
|
||||
Streams are the
|
||||
<b>primary way Speckle organizes data</b>
|
||||
. You can see them as a folder, a project or a repository.
|
||||
</p>
|
||||
<p>
|
||||
Streams
|
||||
<b>can be shared with others</b>
|
||||
and can be made publicly visible on the web. Only the owner of a stream can manage
|
||||
its permissions and visibility.
|
||||
</p>
|
||||
<p>
|
||||
In order to use Speckle you first need to create a stream, so
|
||||
<b>go ahead and create your first one</b>
|
||||
!
|
||||
</p>
|
||||
</v-stepper-content>
|
||||
|
||||
<v-stepper-step :complete="quickstart > 2" step="2">
|
||||
Install Speckle Manager
|
||||
</v-stepper-step>
|
||||
|
||||
<v-stepper-content step="2" class="body-2">
|
||||
<p>
|
||||
Speckle Manager is a free
|
||||
<b>desktop application</b>
|
||||
that lets you install connectors for some of the most popular design and analysis
|
||||
software.
|
||||
</p>
|
||||
<p>
|
||||
The connectors
|
||||
<b>exchange</b>
|
||||
geometry and BIM data with Speckle, so that you can access it wherever you want!
|
||||
</p>
|
||||
<v-btn elevation="10" class="my-5" rounded color="primary" @click="downloadManager">
|
||||
<v-icon small class="mr-4">mdi-download</v-icon>
|
||||
Download Manager
|
||||
</v-btn>
|
||||
</v-stepper-content>
|
||||
|
||||
<v-stepper-step :complete="quickstart > 3" step="3">
|
||||
Set up Speckle Manager
|
||||
</v-stepper-step>
|
||||
|
||||
<v-stepper-content step="3">
|
||||
<p>
|
||||
With Speckle Manager installed,
|
||||
<b>log into your account</b>
|
||||
and then
|
||||
<b>install the connectors</b>
|
||||
for the software that you use.
|
||||
</p>
|
||||
<p>
|
||||
<v-btn
|
||||
elevation="10"
|
||||
rounded
|
||||
color="primary"
|
||||
target="_blank"
|
||||
@click="refreshApplications"
|
||||
>
|
||||
Done
|
||||
</v-btn>
|
||||
</p>
|
||||
|
||||
<p v-if="refreshFailied" class="red--text caption">
|
||||
Please install Manager and log into your account to continue.
|
||||
</p>
|
||||
|
||||
<p class="caption">Having issues logging in Manager? Try with the button below:</p>
|
||||
<v-btn small text rounded color="primary" @click="addAccount">
|
||||
<v-icon small class="mr-4">mdi-account-plus</v-icon>
|
||||
Add account to manager
|
||||
</v-btn>
|
||||
</v-stepper-content>
|
||||
|
||||
<v-stepper-step step="4">Send data to Speckle</v-stepper-step>
|
||||
<v-stepper-content step="4">
|
||||
<p>Great progress 🥳!</p>
|
||||
<p>
|
||||
We're almost done here, and just need to send your first set of data to Speckle.
|
||||
By doing so you will also be creating your first
|
||||
<b>commit.</b>
|
||||
</p>
|
||||
<p>
|
||||
Commits are
|
||||
<b>snapshots or versions of your data in time.</b>
|
||||
Every time you send to Speckle, a new commit is created for you.
|
||||
</p>
|
||||
<p>Send data to Speckle now by using one of our connetors!</p>
|
||||
<p>
|
||||
<v-btn
|
||||
elevation="10"
|
||||
class="my-5"
|
||||
rounded
|
||||
color="primary"
|
||||
href="https://speckle.guide/user/connectors.html"
|
||||
target="_blank"
|
||||
>
|
||||
How to use connectors
|
||||
</v-btn>
|
||||
</p>
|
||||
</v-stepper-content>
|
||||
</v-stepper>
|
||||
</v-col>
|
||||
<infinite-loading
|
||||
v-if="streams.items.length < streams.totalCount"
|
||||
@infinite="infiniteHandler"
|
||||
>
|
||||
<div slot="no-more">These are all your streams!</div>
|
||||
<div slot="no-results">There are no streams to load</div>
|
||||
</infinite-loading>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@@ -133,7 +263,6 @@
|
||||
<script>
|
||||
import ListItemStream from '../components/ListItemStream'
|
||||
import StreamNewDialog from '../components/dialogs/StreamNewDialog'
|
||||
import NoDataPlaceholder from '../components/NoDataPlaceholder'
|
||||
import UserAvatar from '../components/UserAvatar'
|
||||
import streamsQuery from '../graphql/streams.gql'
|
||||
import userQuery from '../graphql/user.gql'
|
||||
@@ -148,7 +277,6 @@ export default {
|
||||
StreamNewDialog,
|
||||
InfiniteLoading,
|
||||
UserAvatar,
|
||||
NoDataPlaceholder,
|
||||
ServerInviteDialog
|
||||
},
|
||||
apollo: {
|
||||
@@ -190,13 +318,42 @@ export default {
|
||||
return !this.loggedIn
|
||||
}
|
||||
}
|
||||
},
|
||||
authorizedApps: {
|
||||
query: gql`
|
||||
query {
|
||||
user {
|
||||
id
|
||||
authorizedApps {
|
||||
id
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
update: (data) => data.user.authorizedApps
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
streams: [],
|
||||
newStreamDialog: false
|
||||
newStreamDialog: false,
|
||||
hasClickedDownload: false,
|
||||
refreshFailied: false
|
||||
}),
|
||||
computed: {
|
||||
quickstart() {
|
||||
if (!this.user) return 0
|
||||
if (this.streams.totalCount === 0) return 1
|
||||
if (this.streams.totalCount > 0 && !this.hasManager && !this.hasClickedDownload) return 2
|
||||
if (this.streams.totalCount > 0 && !this.hasManager && this.hasClickedDownload) return 3
|
||||
if (this.hasManager && this.user.commits.totalCount === 0) return 4
|
||||
if (this.user.commits.totalCount > 0) return 0
|
||||
|
||||
return 0
|
||||
},
|
||||
hasManager() {
|
||||
if (!this.authorizedApps) return false
|
||||
return this.authorizedApps.findIndex((a) => a.id === 'sdm') !== -1
|
||||
},
|
||||
recentActivity() {
|
||||
let activity = []
|
||||
|
||||
@@ -216,6 +373,9 @@ export default {
|
||||
},
|
||||
loggedIn() {
|
||||
return localStorage.getItem('uuid') !== null
|
||||
},
|
||||
rootUrl() {
|
||||
return window.location.origin
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@@ -226,6 +386,23 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadManager() {
|
||||
this.hasClickedDownload = true
|
||||
this.$matomo && this.$matomo.trackPageView(`onboarding/managerdownload`)
|
||||
this.$matomo && this.$matomo.trackEvent('onboarding', 'managerdownload')
|
||||
window.open('https://releases.speckle.dev/manager/SpeckleManager%20Setup.exe', '_blank')
|
||||
},
|
||||
addAccount() {
|
||||
this.$matomo && this.$matomo.trackPageView(`onboarding/accountadd`)
|
||||
this.$matomo && this.$matomo.trackEvent('onboarding', 'accountadd')
|
||||
window.open(`speckle://accounts?add_server_account=${this.rootUrl}`, '_blank')
|
||||
},
|
||||
async refreshApplications() {
|
||||
await this.$apollo.queries.authorizedApps.refetch()
|
||||
if (!this.hasManager) {
|
||||
this.refreshFailied = true
|
||||
} else this.refreshFailied = false
|
||||
},
|
||||
infiniteHandler($state) {
|
||||
this.$apollo.queries.streams.fetchMore({
|
||||
variables: {
|
||||
@@ -277,3 +454,8 @@ export default {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.quickstart-stepper {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user