gitadmin
/
profile-studio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP

This commit is contained in:
Jason Snelders 2019-11-16 13:36:25 +11:00
parent f01c007ad6
commit 90d2d79978
4 changed files with 67 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
app/app.js
View File

@ -99,7 +99,7 @@ var app = new Vue({
mounted() mounted()
{ {
//this.loadFromStorage(); this.loadFromStorage();
// Set the "current" main navigation item based on the current route. // Set the "current" main navigation item based on the current route.
this.selectMenuItemForCurrentUrl(); 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. * Open the sidebar on smaller screens.
@ -508,12 +518,13 @@ var app = new Vue({
$data: { $data: {
handler: function(val, oldVal) handler: function(val, oldVal)
{ {
// Save the data to localStorage //TODO: Disbled
//NOTE: I'm initially not concerned about performance here. // // Save the data to localStorage
if (val.status == "loaded") // //NOTE: I'm initially not concerned about performance here.
{ // if (val.status == "loaded")
helpers.setLocalStorage("sections", val.sections); // {
} // helpers.setLocalStorage("sections", val.sections);
// }
}, },
deep: true deep: true
} }

2
components/import.js
View File

@ -34,6 +34,8 @@ var importComponent = {
var data = JSON.parse(this.json); var data = JSON.parse(this.json);
this.$root.populateSections(data); this.$root.populateSections(data);
helpers.setLocalStorage("sections", this.$root.sections);
}, },

29
components/preview_single_field.js
View File

@ -14,7 +14,7 @@ Vue.component("preview-field", {
mounted: function() mounted: function()
{ {
this.displayFormat = (this.format ? this.format : "");
}, },
@ -29,6 +29,7 @@ Vue.component("preview-field", {
data: function() data: function()
{ {
return { return {
displayFormat: "", // Refine the "format" so we don't mutate the prop.
item: {} item: {}
}; };
}, },
@ -36,21 +37,41 @@ Vue.component("preview-field", {
methods: { methods: {
getLabel: function()
{
return (this.label ? this.label : " ");
},
getValue: function() getValue: function()
{ {
// Return the value formatted. // Return the value formatted.
if (this.format == "url") if (this.displayFormat == "url")
{ {
return "<a href='" + this.value + "' target='_blank'>" + this.value + "</a>"; 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.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 : "&nbsp;");
}, },

30
index.html
View File

@ -55,9 +55,13 @@
</div> </div>
<hr> <hr>
<div class="w3-bar-block"> <div class="w3-bar-block">
<a href="#/preview" class="w3-bar-item w3-button w3-padding"><i class="fas fa-print"></i>&nbsp; Preview</a> <a href="#/preview" class="w3-bar-item w3-button w3-padding"><i class="fas fa-print"></i>&nbsp; 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>&nbsp; Import</a> <a href="#/import" class="w3-bar-item w3-button w3-padding"><i class="fas fa-file-upload"></i>&nbsp; Import</a>
<a href="#/export" class="w3-bar-item w3-button w3-padding"><i class="fas fa-file-download"></i>&nbsp; Export</a> <a href="#/export" class="w3-bar-item w3-button w3-padding"><i class="fas fa-file-download"></i>&nbsp; Export</a>
<span class="w3-bar-item w3-button w3-padding" v-on:click="saveResume"><i class="fas fa-sync-alt"></i>&nbsp; Save</span>
<span class="w3-bar-item w3-button w3-padding" v-on:click="resetResume"><i class="fas fa-sync-alt"></i>&nbsp; Reset Resume</span> <span class="w3-bar-item w3-button w3-padding" v-on:click="resetResume"><i class="fas fa-sync-alt"></i>&nbsp; Reset Resume</span>
</div> </div>
<hr> <hr>
@ -238,10 +242,11 @@
<preview-field label="Full Name" v-bind:value="$root.sections.basics.name"></preview-field> <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="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="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="Email" v-bind:value="$root.sections.basics.email" format="email"></preview-field>
<preview-field label="Phone" v-bind:value="$root.sections.basics.phone"></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"></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> <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"> <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="Network" v-bind:value="profile.network"></preview-field>
<preview-field label="Username" v-bind:value="profile.username"></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> </div>
</div> </div>
@ -885,18 +890,27 @@
<template type="text/x-template" id="preview-single-field-template" lang="html"> <template type="text/x-template" id="preview-single-field-template" lang="html">
<div id="preview-single-field-root"> <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"> <div class="w3-col m3">
<span>{{label}}</span> <span v-html="getLabel()"></span>
</div> </div>
<div class="w3-col m9"> <div class="w3-col m9">
<span v-html="getValue()"></span> <span v-html="getValue()"></span>
</div> </div>
</div> </div>
<span v-if="format == 'list-item'"> <span class="w3-margin-bottom" v-if="displayFormat == 'list-item'">
<span v-html="getValue()"></span> <span v-html="getValue()"></span>
</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> </div>
</template> </template>