WIP
This commit is contained in:
parent
f01c007ad6
commit
90d2d79978
25
app/app.js
25
app/app.js
|
|
@ -99,7 +99,7 @@ var app = new Vue({
|
|||
|
||||
mounted()
|
||||
{
|
||||
//this.loadFromStorage();
|
||||
this.loadFromStorage();
|
||||
|
||||
// Set the "current" main navigation item based on the current route.
|
||||
this.selectMenuItemForCurrentUrl();
|
||||
|
|
@ -184,6 +184,16 @@ var app = new Vue({
|
|||
},
|
||||
|
||||
|
||||
saveResume: function()
|
||||
{
|
||||
var response = confirm("Resume saved");
|
||||
|
||||
helpers.setLocalStorage("sections", this.$root.sections);
|
||||
|
||||
alert("Resume saved");
|
||||
return false;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Open the sidebar on smaller screens.
|
||||
|
|
@ -508,12 +518,13 @@ var app = new Vue({
|
|||
$data: {
|
||||
handler: function(val, oldVal)
|
||||
{
|
||||
// Save the data to localStorage
|
||||
//NOTE: I'm initially not concerned about performance here.
|
||||
if (val.status == "loaded")
|
||||
{
|
||||
helpers.setLocalStorage("sections", val.sections);
|
||||
}
|
||||
//TODO: Disbled
|
||||
// // Save the data to localStorage
|
||||
// //NOTE: I'm initially not concerned about performance here.
|
||||
// if (val.status == "loaded")
|
||||
// {
|
||||
// helpers.setLocalStorage("sections", val.sections);
|
||||
// }
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@ var importComponent = {
|
|||
var data = JSON.parse(this.json);
|
||||
|
||||
this.$root.populateSections(data);
|
||||
|
||||
helpers.setLocalStorage("sections", this.$root.sections);
|
||||
},
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Vue.component("preview-field", {
|
|||
|
||||
mounted: function()
|
||||
{
|
||||
|
||||
this.displayFormat = (this.format ? this.format : "");
|
||||
},
|
||||
|
||||
|
||||
|
|
@ -29,6 +29,7 @@ Vue.component("preview-field", {
|
|||
data: function()
|
||||
{
|
||||
return {
|
||||
displayFormat: "", // Refine the "format" so we don't mutate the prop.
|
||||
item: {}
|
||||
};
|
||||
},
|
||||
|
|
@ -36,21 +37,41 @@ Vue.component("preview-field", {
|
|||
|
||||
|
||||
methods: {
|
||||
getLabel: function()
|
||||
{
|
||||
return (this.label ? this.label : " ");
|
||||
},
|
||||
|
||||
getValue: function()
|
||||
{
|
||||
// Return the value formatted.
|
||||
|
||||
if (this.format == "url")
|
||||
if (this.displayFormat == "url")
|
||||
{
|
||||
return "<a href='" + this.value + "' target='_blank'>" + this.value + "</a>";
|
||||
}
|
||||
|
||||
if (this.format == "multi-line")
|
||||
if (this.displayFormat == "email")
|
||||
{
|
||||
return "<a href='mailto:" + this.value + "' target='_blank'>" + this.value + "</a>";
|
||||
}
|
||||
|
||||
if (this.displayFormat == "phone")
|
||||
{
|
||||
return "<a href='tel:" + this.value + "' target='_blank'>" + this.value + "</a>";
|
||||
}
|
||||
|
||||
if (this.displayFormat == "multi-line")
|
||||
{
|
||||
return this.replaceLineBreaks(this.value);
|
||||
}
|
||||
|
||||
return this.value;
|
||||
if (this.displayFormat == "image")
|
||||
{
|
||||
return "<img src='" + this.value + "' style='max-width: 100px;'></img>";
|
||||
}
|
||||
|
||||
return (this.value ? this.value : " ");
|
||||
},
|
||||
|
||||
|
||||
|
|
|
|||
30
index.html
30
index.html
|
|
@ -55,9 +55,13 @@
|
|||
</div>
|
||||
<hr>
|
||||
<div class="w3-bar-block">
|
||||
<a href="#/preview" class="w3-bar-item w3-button w3-padding"><i class="fas fa-print"></i> Preview</a>
|
||||
<a href="#/preview" class="w3-bar-item w3-button w3-padding"><i class="fas fa-print"></i> Preview</a>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="w3-bar-block">
|
||||
<a href="#/import" class="w3-bar-item w3-button w3-padding"><i class="fas fa-file-upload"></i> Import</a>
|
||||
<a href="#/export" class="w3-bar-item w3-button w3-padding"><i class="fas fa-file-download"></i> Export</a>
|
||||
<span class="w3-bar-item w3-button w3-padding" v-on:click="saveResume"><i class="fas fa-sync-alt"></i> Save</span>
|
||||
<span class="w3-bar-item w3-button w3-padding" v-on:click="resetResume"><i class="fas fa-sync-alt"></i> Reset Resume</span>
|
||||
</div>
|
||||
<hr>
|
||||
|
|
@ -238,10 +242,11 @@
|
|||
<preview-field label="Full Name" v-bind:value="$root.sections.basics.name"></preview-field>
|
||||
<preview-field label="Label" v-bind:value="$root.sections.basics.label"></preview-field>
|
||||
<preview-field label="Picture" v-bind:value="$root.sections.basics.picture" format="url"></preview-field>
|
||||
<preview-field label="" v-bind:value="$root.sections.basics.picture" format="image"></preview-field>
|
||||
|
||||
<preview-field label="Email" v-bind:value="$root.sections.basics.email"></preview-field>
|
||||
<preview-field label="Phone" v-bind:value="$root.sections.basics.phone"></preview-field>
|
||||
<preview-field label="Website" v-bind:value="$root.sections.basics.website"></preview-field>
|
||||
<preview-field label="Email" v-bind:value="$root.sections.basics.email" format="email"></preview-field>
|
||||
<preview-field label="Phone" v-bind:value="$root.sections.basics.phone" format="phone"></preview-field>
|
||||
<preview-field label="Website" v-bind:value="$root.sections.basics.website" format="url"></preview-field>
|
||||
|
||||
<preview-field label="Summary" v-bind:value="$root.sections.basics.summary" format="multi-line"></preview-field>
|
||||
|
||||
|
|
@ -258,7 +263,7 @@
|
|||
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left w3-margin-top" v-for="profile in $root.sections.basics.profiles">
|
||||
<preview-field label="Network" v-bind:value="profile.network"></preview-field>
|
||||
<preview-field label="Username" v-bind:value="profile.username"></preview-field>
|
||||
<preview-field label="URL" v-bind:value="profile.url"></preview-field>
|
||||
<preview-field label="URL" v-bind:value="profile.url" format="url"></preview-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -885,18 +890,27 @@
|
|||
|
||||
<template type="text/x-template" id="preview-single-field-template" lang="html">
|
||||
<div id="preview-single-field-root">
|
||||
<div class="w3-row w3-margin-bottom" v-if="format != 'list-item'">
|
||||
<div class="w3-row w3-margin-bottom" v-if="displayFormat == '' || displayFormat == 'url' || displayFormat == 'email' || displayFormat == 'phone'">
|
||||
<div class="w3-col m3">
|
||||
<span>{{label}}</span>
|
||||
<span v-html="getLabel()"></span>
|
||||
</div>
|
||||
<div class="w3-col m9">
|
||||
<span v-html="getValue()"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span v-if="format == 'list-item'">
|
||||
<span class="w3-margin-bottom" v-if="displayFormat == 'list-item'">
|
||||
<span v-html="getValue()"></span>
|
||||
</span>
|
||||
|
||||
<span class="w3-row w3-margin-bottom" v-if="displayFormat == 'image'">
|
||||
<div class="w3-col m3">
|
||||
<span v-html="getLabel()"></span>
|
||||
</div>
|
||||
<div class="w3-col m9">
|
||||
<span v-html="getValue()"></span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue