Skip to content

Commit

Permalink
Implement shorter URL on save
Browse files Browse the repository at this point in the history
- Remove save bar in favour of save button
- Create share button
- Try to load short URL data
- Modify header layout
  • Loading branch information
Relequestual committed Dec 18, 2019
1 parent 11193d8 commit a998bf3
Showing 5 changed files with 105 additions and 211 deletions.
50 changes: 34 additions & 16 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,19 +1,25 @@
<template>
<div id="app">
<navigation :ajv-validation-success="ajvValidationSuccess" />
<navigation :ajv-validation-success="ajvValidationSuccess">
<template v-slot:save-button>
<save-button
:schema="primarySchemaText"
:instance="instanceText"
/>
</template>
</navigation>
<b-container fluid>
<b-row>
<b-col>
<p class="mt-3">
The home of JSON Schema validation right in your browser - 🚧Alpha
🚧 - draft-7 only
The home of JSON Schema validation right in your browser 🚧 Alpha 🚧 draft-7 only
</p>
</b-col>
</b-row>

<b-row v-if="errorMessage !== null" align-h="center">
<b-col>
<error-message error-message="errorMessage" />
<error-message :error-message="errorMessage" />
</b-col>
</b-row>
<b-collapse id="features" v-model="showFeatures">
@@ -27,12 +33,7 @@
/>
</b-collapse>

<share-bar
:schema="primarySchemaText"
:instance="instanceText"
:is-default="isDefault"
/>
<b-row class="mb-3">
<b-row class="mb-3 no-gutters">
<b-col md="6">
<h2>JSON Schema</h2>
<json-editor
@@ -72,14 +73,16 @@ import _ from 'lodash';
import LZ from 'lz-string';
import JSONEditor from './components/JSONEditor.vue';
import ShareBar from './components/ShareBar.vue';
import SaveButton from './components/SaveButton.vue';
import Navigation from './components/Navigation.vue';
import Features from './components/Features.vue';
import Settings from './components/Settings.vue';
import ErrorMessage from './components/ErrorMessage.vue';
import Results from './components/Results.vue';
import Footer from './components/Footer.vue';
import shortner from './utilities/shortner.js';
const Ajv = require('ajv');
// require('ajv-async')(Ajv);
@@ -98,7 +101,7 @@ export default {
name: 'App',
components: {
'json-editor': JSONEditor,
'share-bar': ShareBar,
'save-button': SaveButton,
navigation: Navigation,
features: Features,
settings: Settings,
@@ -188,15 +191,30 @@ export default {
dismissError() {
Vue.set(this, 'errorMessage', null);
},
loadFromUrl(data) {
const { i, s } = tryParse(data) || { i: null, s: null };
loadFromUrl: async function (data) {
let json = tryParse(data);
if (!s && !i) {
if(!json) {
// Load from remote URL and try again...
const decodedData = await shortner.retrieveDataFromURL(data).catch((reason) =>{
Vue.set(this, 'errorMessage', reason.message);
});
if(!decodedData) {
return;
}
json = tryParse(decodedData);
}
if (!json) {
this.$ga.exception(`URL decode error\n\nData: "${data}"`);
Vue.set(this, 'errorMessage', 'Failed to load data from URL. Sorry.');
this.$router.replace('/');
return;
}
const {i, s} = json;
if (i) {
Vue.set(this, 'instanceText', i);
this.$ga.event('Share Link', 'loaded instance');
@@ -207,7 +225,7 @@ export default {
this.$ga.event('Share Link', 'loaded schema');
}
this.$router.replace('/');
// this.$router.replace('/');
},
loadFromLocalStorage() {
if (localStorage.getItem('primarySchemaText')) {
62 changes: 34 additions & 28 deletions src/components/Navigation.vue
Original file line number Diff line number Diff line change
@@ -1,51 +1,59 @@
<template>
<b-navbar variant="light" class="border" toggleable="md">
<b-navbar
variant="light"
class="border"
toggleable="md"
fixed="top"
:sticky="true"
>
<b-container>
<b-navbar-brand href="/">
<span class="text-success">
{<icon :icon="['fas', 'check-double']" />}
</span>
JSONSchema.dev -
</b-navbar-brand>
<b-navbar-brand href="#results">
{
<icon
:icon="['fas', 'check-double']"
:class="ajvValidationSuccess === true ? 'text-success' : ''"
/>
/
<icon
:icon="['fas', 'times']"
:class="ajvValidationSuccess === false ? 'text-danger' : ''"
/>
}
<span
id="nav-site-name"
class="d-none d-lg-block float-left mr-2"
>
JSONSchema.dev
</span>
</b-navbar-brand>
<b-navbar-nav>
<slot name="save-button" />
</b-navbar-nav>
<b-navbar-toggle target="nav-collapse" />
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item v-b-toggle.features>
<icon :icon="['fas', 'hand-holding-heart']" class="mr-1" />Features
</b-nav-item>
<b-nav-item v-b-toggle.settings>
<icon :icon="['fas', 'cogs']" class="mr-1" />Settings
</b-nav-item>
<b-nav-item v-b-toggle.features>
<icon :icon="['fas', 'hand-holding-heart']" class="mr-1" />Features
</b-nav-item>
<b-nav-item
href="https://json-schema.org/specification.html"
target="_blank"
>
<icon :icon="['fas', 'file-alt']" class="mr-1" />Specification
</b-nav-item>
<b-nav-item href="https://json-schema.org" target="_blank">
<b-nav-item
href="https://json-schema.org"
target="_blank"
class="mt-auto mb-auto"
style="white-space:nowrap;"
>
JSON-Schema.org
</b-nav-item>
<a href="https://ko-fi.com/F1F3TKJK" target="_blank">
<a
href="https://ko-fi.com/F1F3TKJK"
target="_blank"
class="mt-auto mb-auto"
>
<img
height="36"
style="border:0px;height:36px;"
src="https://az743702.vo.msecnd.net/cdn/kofi3.png?v=2"
border="0"
alt="Buy Me a Coffee at ko-fi.com"
/>
>
</a>
</b-navbar-nav>
</b-collapse>
@@ -54,12 +62,10 @@
</template>

<script>
import _ from 'lodash';
export default {
name: 'Navigation',
props: {
ajvValidationSuccess: {
type: Boolean,
},
},
};
</script>
34 changes: 34 additions & 0 deletions src/components/SaveButton.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<template>
<b-btn variant="outline-dark" @click="saveURLClick()">
<icon
:icon="['fas', 'cloud-upload-alt']"
class=""
size="sm"
/> Save
</b-btn>
</template>

<script>
import shorter from '../utilities/shortner';
export default {
name: 'SaveButton',
props: {
schema: {
type: String,
required: true,
},
instance: {
type: String,
required: true,
},
},
methods: {
saveURLClick: async function() {
const url = await shorter.genSaveURL({ sharedSchema: this.schema, sharedInstance: this.instance});
const shortURL = await shorter.shortenURL(url);
this.$router.replace(`s/${shortURL}`);
}
},
}
</script>
Loading

0 comments on commit a998bf3

Please sign in to comment.