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-12 17:28:56 +11:00
parent ff7eff653c
commit 85bd67acc3
4 changed files with 196 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

295
app/app.js
View File

@ -52,89 +52,10 @@ var app = new Vue({
data: data:
{ {
sections: { status: "laading",
basics: {
name: "", sections: {},
label: "",
picture: "",
email: "",
phone: "",
website: "",
summary: "",
location: {
address: "",
postalCode: "",
city: "",
countryCode: "",
region: "",
},
profiles: [
{
network: "",
username: "",
url: "",
}
]
},
work: [{
company: "",
position: "",
website: "",
startDate: "",
endDate: "",
summary: "",
highlights: [""]
}],
volunteer: [{
organization: "",
position: "",
website: "",
startDate: "",
endDate: "",
summary: "",
highlights: []
}],
education: [{
institution: "",
area: "",
studyType: "",
startDate: "",
endDate: "",
gpa: "",
courses: []
}],
awards: [{
title: "",
date: "",
awarder: "",
summary: ""
}],
publications: [{
name: "",
publisher: "",
releaseDate: "",
website: "",
summary: ""
}],
skills: [{
name: "",
level: "",
keywords: []
}],
languages: [{
language: "",
fluency: ""
}],
interests: [{
name: "",
keywords: [
]
}],
references: [{
name: "",
reference: ""
}]
},
/** /**
@ -153,6 +74,8 @@ var app = new Vue({
created() created()
{ {
this.sections = this.getDefaultSections();
//-- Register all components //-- Register all components
components.registerComponents(); components.registerComponents();
@ -176,52 +99,15 @@ var app = new Vue({
mounted() mounted()
{ {
// var savedData = helpers.getLocalStorage("sections.basics"); this.loadFromStorage();
// console.log("savedData=", savedData);
// if (savedData)
// {
// // Data previously saved.
// //this.sections = savedData;
// for (var key in savedData)
// {
// if (savedData.hasOwnProperty(key))
// {
// console.log(key + " > " + savedData[key]);
// this.sections.basics[key] = savedData[key];
// }
// }
// }
//var savedData = helpers.getLocalStorage("sections").sections;
var savedData = helpers.getLocalStorage("sections");
console.log("get saved data[sections]=", savedData);
if (savedData)
{
// Data previously saved.
//this.sections = savedData;
for (var key in savedData)
{
if (savedData.hasOwnProperty(key))
{
console.log(key + " > ", savedData[key]);
this.sections[key] = savedData[key];
}
}
}
// Set the "current" main navigation item based on the current route. // Set the "current" main navigation item based on the current route.
helpers.selectMenuItemForCurrentUrl(); helpers.selectMenuItemForCurrentUrl();
// Once the app is fully displayed, hide the overlay. // Once the app is fully displayed, hide the overlay.
helpers.hideFullPageOverlay(); helpers.hideFullPageOverlay();
this.status = "loaded"; // Now we can start watching for changes in 'sections' data.
}, },
@ -255,39 +141,142 @@ var app = new Vue({
// /** getDefaultSections: function()
// * When a component is activated (loaded) it will pass data back to this app (ID, title, icons, etc). {
// * return {
// * @param object eventValue basics: {
// */ name: "",
// componentActivated: function(eventValue) label: "",
// { picture: "",
// //alert("Hello was clicked" + "\n" + "Who=" + eventValue.whoWasIt + "\n" + "What=" + eventValue.whatWasIt); email: "",
// console.log("componentActivated(): eventValue.component=", eventValue.component); phone: "",
// } website: "",
summary: "",
location: {
address: "",
postalCode: "",
city: "",
countryCode: "",
region: "",
},
profiles: [
{
network: "",
username: "",
url: "",
}
]
},
work: [{
company: "",
position: "",
website: "",
startDate: "",
endDate: "",
summary: "",
highlights: [""]
}],
volunteer: [{
organization: "",
position: "",
website: "",
startDate: "",
endDate: "",
summary: "",
highlights: []
}],
education: [{
institution: "",
area: "",
studyType: "",
startDate: "",
endDate: "",
gpa: "",
courses: []
}],
awards: [{
title: "",
date: "",
awarder: "",
summary: ""
}],
publications: [{
name: "",
publisher: "",
releaseDate: "",
website: "",
summary: ""
}],
skills: [{
name: "",
level: "",
keywords: []
}],
languages: [{
language: "",
fluency: ""
}],
interests: [{
name: "",
keywords: [
]
}],
references: [{
name: "",
reference: ""
}]
};
},
loadFromStorage: function()
{
var savedData = helpers.getLocalStorage("sections");
this.populateSections(savedData);
},
populateSections: function(data)
{
if (data)
{
// Data previously saved.
for (var key in data)
{
if (data.hasOwnProperty(key))
{
this.sections[key] = data[key];
}
}
}
},
/**
* Clear save data and reset the sections structure.
*/
resetResume: function()
{
var response = confirm("Are you sure you want to clear your saved resume?");
if (response == true)
{
this.sections = this.getDefaultSections();
alert("Your resume has been cleared.");
}
return false;
}
}, },
// watch: {
// /**
// * Watch all data for changes
// */
// 'sections.basics': function(val)
// {
// // Save the data to localStorage
// //NOTE: I'm initially not concerned about performance here/
// console.log("watch section", val);
// }
// }
watch: { watch: {
/** /**
* Detect when a route changes. * Detect when a route changes.
@ -311,10 +300,12 @@ var app = new Vue({
$data: { $data: {
handler: function(val, oldVal) handler: function(val, oldVal)
{ {
console.log("val=", val.sections);
// Save the data to localStorage // Save the data to localStorage
//NOTE: I'm initially not concerned about performance here. //NOTE: I'm initially not concerned about performance here.
helpers.setLocalStorage("sections", val.sections); if (val.status == "loaded")
{
helpers.setLocalStorage("sections", val.sections);
}
}, },
deep: true deep: true
} }

2
app/component_registration.js
View File

@ -139,7 +139,7 @@ var components = {
id: "skills", id: "skills",
path: "#/section/skills", path: "#/section/skills",
type: "page", type: "page",
title: "Publications", title: "Skills",
description: "", description: "",
fontAwesomeIcon: "fas fa-tools" fontAwesomeIcon: "fas fa-tools"
}); });

13
components/import.js
View File

@ -27,6 +27,19 @@ var importComponent = {
methods: { methods: {
importJson: function()
{
console.log("import JSON: " + this.json);
var data = JSON.parse(this.json);
this.$root.populateSections(data);
},
validateJson: function(value)
{
}
} }
}; };

64
index.html
View File

@ -10,10 +10,13 @@
<body class="w3-light-grey"> <body class="w3-light-grey">
<!-- VueJS App -->
<div id="app">
<!-- Top container --> <!-- Top container -->
<div class="w3-bar w3-top w3-black w3-large" style="z-index:4"> <div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
<button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="helpers.w3_open();"><i <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="helpers.w3_open();"><i class="fa fa-bars"></i> &nbsp;Menu</button>
class="fa fa-bars"></i> &nbsp;Menu</button>
<span class="w3-bar-item w3-right">JSON Resume Editor</span> <span class="w3-bar-item w3-right">JSON Resume Editor</span>
</div> </div>
@ -43,7 +46,7 @@
<a href="#/section/work" class="w3-bar-item w3-button w3-padding"><i class="fas fa-building"></i>&nbsp; Work</a> <a href="#/section/work" class="w3-bar-item w3-button w3-padding"><i class="fas fa-building"></i>&nbsp; Work</a>
<a href="#/section/volunteer" class="w3-bar-item w3-button w3-padding"><i class="fas fa-hands-helping"></i>&nbsp; Volunteer</a> <a href="#/section/volunteer" class="w3-bar-item w3-button w3-padding"><i class="fas fa-hands-helping"></i>&nbsp; Volunteer</a>
<a href="#/section/education" class="w3-bar-item w3-button w3-padding"><i class="fas fa-graduation-cap"></i>&nbsp; Education</a> <a href="#/section/education" class="w3-bar-item w3-button w3-padding"><i class="fas fa-graduation-cap"></i>&nbsp; Education</a>
<a href="#/section/awards" class="w3-bar-item w3-button w3-padding"><i class="fas fa-award""></i>&nbsp; Awards</a> <a href="#/section/awards" class="w3-bar-item w3-button w3-padding"><i class="fas fa-award"></i>&nbsp; Awards</a>
<a href="#/section/publications" class="w3-bar-item w3-button w3-padding"><i class="fas fa-book"></i>&nbsp; Publications</a> <a href="#/section/publications" class="w3-bar-item w3-button w3-padding"><i class="fas fa-book"></i>&nbsp; Publications</a>
<a href="#/section/skills" class="w3-bar-item w3-button w3-padding"><i class="fas fa-tools"></i>&nbsp; Skills</a> <a href="#/section/skills" class="w3-bar-item w3-button w3-padding"><i class="fas fa-tools"></i>&nbsp; Skills</a>
<a href="#/section/languages" class="w3-bar-item w3-button w3-padding"><i class="fas fa-heart"></i>&nbsp; Languages</a> <a href="#/section/languages" class="w3-bar-item w3-button w3-padding"><i class="fas fa-heart"></i>&nbsp; Languages</a>
@ -55,6 +58,7 @@
<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>
<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="resetResume"><i class="fas fa-sync-alt"></i>&nbsp; Reset Resume</span>
</div> </div>
<hr> <hr>
<div class="w3-bar-block"> <div class="w3-bar-block">
@ -71,8 +75,7 @@
<!-- End Page Content --> <!-- End Page Content -->
<div class="w3-main w3-padding-16"> <div class="w3-main w3-padding-16">
<!-- VueJS App -->
<div id="app">
<div id="full-page-overlay"> <div id="full-page-overlay">
<div id="full-page-overlay-text">Please wait while we load the goodness.</div> <div id="full-page-overlay-text">Please wait while we load the goodness.</div>
</div> </div>
@ -85,8 +88,7 @@
<div class="w3-container"> <div class="w3-container">
<router-view>Loading...</router-view> <router-view>Loading...</router-view>
</div> </div>
</div>
<!-- /VueJS App -->
@ -101,7 +103,8 @@
<!-- /End Page Content --> <!-- /End Page Content -->
</div>
<!-- /VueJS App -->
<!-- Component Templates --> <!-- Component Templates -->
<template type="text/x-template" id="home-template" lang="html"> <template type="text/x-template" id="home-template" lang="html">
@ -371,7 +374,7 @@
<small id="highlightsHelp" class="form-help text-muted">Short sentences and highlights of the position.</small> <small id="highlightsHelp" class="form-help text-muted">Short sentences and highlights of the position.</small>
<ol> <ol>
<li> <li>
<input id="highlights[0]" class="w3-input w3-border" type="text" v-model="$root.sections.work[0].highlights[0]"> <input id="highlights[0]" class="w3-input w3-border" type="text" v-model="$root.sections.volunteer[0].highlights[0]">
</li> </li>
</ol> </ol>
</div> </div>
@ -388,7 +391,11 @@
<preview-field label="Summary" v-bind:value="$root.sections.volunteer[0].summary" format="multi-line"></preview-field> <preview-field label="Summary" v-bind:value="$root.sections.volunteer[0].summary" format="multi-line"></preview-field>
<h5 class="margin-top-32">Highlights</h5> <h5 class="margin-top-32">Highlights</h5>
<preview-field label="" v-bind:value="$root.sections.volunteer[0].highlights[0]" format="list-item"></preview-field> <ol>
<li>
<preview-field label="" v-bind:value="$root.sections.volunteer[0].highlights[0]" format="list-item"></preview-field>
</li>
</ol>
</div> </div>
</div> </div>
</div> </div>
@ -504,7 +511,7 @@
<div> <div>
<preview-field label="Title" v-bind:value="$root.sections.awards[0].title"></preview-field> <preview-field label="Title" v-bind:value="$root.sections.awards[0].title"></preview-field>
<preview-field label="Date" v-bind:value="$root.sections.awards[0].date"></preview-field> <preview-field label="Date" v-bind:value="$root.sections.awards[0].date"></preview-field>
<preview-field label="Awarder" v-bind:value="$root.sections.awards[0].awarder" format="url"></preview-field> <preview-field label="Awarder" v-bind:value="$root.sections.awards[0].awarder"></preview-field>
<preview-field label="Summary" v-bind:value="$root.sections.awards[0].summary" format="multi-line"></preview-field> <preview-field label="Summary" v-bind:value="$root.sections.awards[0].summary" format="multi-line"></preview-field>
</div> </div>
</div> </div>
@ -543,7 +550,7 @@
</p> </p>
<p> <p>
<label for="summary" class="w3-text-blue"><b>Summary</b></label> <label for="summary" class="w3-text-blue"><b>Summary</b></label>
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="$root.sections.work[0].summary"></textarea> <textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="$root.sections.publications[0].summary"></textarea>
<small id="summaryHelp" class="form-help text-muted">Details of the article.</small> <small id="summaryHelp" class="form-help text-muted">Details of the article.</small>
</p> </p>
</div> </div>
@ -556,7 +563,7 @@
<preview-field label="Publisher" v-bind:value="$root.sections.publications[0].publisher"></preview-field> <preview-field label="Publisher" v-bind:value="$root.sections.publications[0].publisher"></preview-field>
<preview-field label="Release Date" v-bind:value="$root.sections.publications[0].releaseDate"></preview-field> <preview-field label="Release Date" v-bind:value="$root.sections.publications[0].releaseDate"></preview-field>
<preview-field label="Website" v-bind:value="$root.sections.publications[0].website" format="url"></preview-field> <preview-field label="Website" v-bind:value="$root.sections.publications[0].website" format="url"></preview-field>
<preview-field label="Summary" v-bind:value="$root.sections.work[0].summary" format="multi-line"></preview-field> <preview-field label="Summary" v-bind:value="$root.sections.publications[0].summary" format="multi-line"></preview-field>
</div> </div>
</div> </div>
</div> </div>
@ -584,7 +591,7 @@
</p> </p>
<h5 class="margin-top-32">Keywords</h5> <h5 class="margin-top-32">Keywords</h5>
<small id="keywordsHelp" class="form-help text-muted">Sub-skills.</small> <small id="keywordsHelp" class="form-help text-muted">Keywords.</small>
<ol> <ol>
<li> <li>
<input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.skills[0].keywords[0]"> <input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.skills[0].keywords[0]">
@ -703,7 +710,7 @@
</p> </p>
<p> <p>
<label for="reference" class="w3-text-blue required-field"><b>Reference</b></label> <label for="reference" class="w3-text-blue required-field"><b>Reference</b></label>
<input id="reference" class="w3-input w3-border" type="text" v-model="$root.sections.references[0].reference" required> <textarea id="reference" rows="8" class="w3-input w3-border" type="text" v-model="$root.sections.references[0].reference"></textarea>
<small id="referenceHelp" class="form-help text-muted">The reference given by the person.</small> <small id="referenceHelp" class="form-help text-muted">The reference given by the person.</small>
</p> </p>
</div> </div>
@ -713,7 +720,7 @@
<div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left"> <div class="preview w3-container w3-card-4 w3-padding-16 w3-margin-left">
<div> <div>
<preview-field label="Name" v-bind:value="$root.sections.references[0].name"></preview-field> <preview-field label="Name" v-bind:value="$root.sections.references[0].name"></preview-field>
<preview-field label="Reference" v-bind:value="$root.sections.references[0].reference"></preview-field> <preview-field label="Reference" v-bind:value="$root.sections.references[0].reference" format="multi-line"></preview-field>
</div> </div>
</div> </div>
</div> </div>
@ -859,13 +866,19 @@
<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 class="w3-row w3-margin-bottom"> <div id="preview-single-field-root">
<div class="w3-col m3"> <div class="w3-row w3-margin-bottom" v-if="format != 'list-item'">
<span>{{label}}</span> <div class="w3-col m3">
<span>{{label}}</span>
</div>
<div class="w3-col m9">
<span v-html="getValue()"></span>
</div>
</div> </div>
<div class="w3-col m9">
<span v-if="format == 'list-item'">
<span v-html="getValue()"></span> <span v-html="getValue()"></span>
</div> </span>
</div> </div>
</template> </template>
@ -873,10 +886,11 @@
<template type="text/x-template" id="import-template" lang="html"> <template type="text/x-template" id="import-template" lang="html">
<div id="import-root"> <div id="import-root">
<p> <p>
Past existing resume JSON to continue editing. Past existing resume JSON and import to continue editing.
</p> </p>
<textarea rows="20" class="w3-input w3-border" type="text" v-model="json"></textarea> <textarea rows="20" class="w3-input w3-border" type="text" v-model="json"></textarea>
<button class="w3-btn w3-white w3-border w3-border-blue w3-round" v-on:click="importJson">Import</button>
</div> </div>
</template> </template>