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

Merge branch 'master' into mann-fr-cv-studio-0

This commit is contained in:
chris2fr 2020-10-24 15:18:51 +02:00
parent 5f94a88a4d 95ef745504
commit 6c58decfdd
5 changed files with 199 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.vscode/settings.json vendored
View File

@ -1,4 +1,4 @@
{ {
// "liveServer.settings.port": 5501; "liveServer.settings.port": 5501,
editor.disableMonospaceOptimizations: true; "editor.disableMonospaceOptimizations": true
} }

112
app/app.js
View File

@ -36,51 +36,68 @@ var router = new VueRouter({
var app = new Vue({ var app = new Vue({
el: '#app', el: '#app',
router: router, router: router,
components: components:
{ {
},
data:
{
status: "loading",
sections: {},
/**
* Details of the current page/route.
*/
activePage: {
id: "",
title: "",
fontAwesomeIconCss: ""
}, },
data: countryCodes: [],
{
status: "loading",
sections: {}, currentVersion: "",
/**
* Details of the current page/route.
*/
activePage: {
id: "",
title: "",
fontAwesomeIconCss: ""
},
countryCodes: [] versions: []
}, },
created() created()
{ {
this.sections = models.newDefaultSections(); this.sections = models.newDefaultSections();
console.log("this.sections=", this.sections); // this.versons = [];
this.versions = storage.getLocalStorage("versions");
this.currentVersion = "";
//-- Register all components // console.log("this.sections=", this.sections);
pageComponents.registerComponents();
//-- Get the component for the initial route path //-- Register all components
var initialRoute = this.$route.path; pageComponents.registerComponents();
var component = pageComponents.getComponentByPath(initialRoute);
this.setActivePageByComponent(component); //-- Get the component for the initial route path
}, var initialRoute = this.$route.path;
var component = pageComponents.getComponentByPath(initialRoute);
this.setActivePageByComponent(component);
},
destroyed() destroyed()
{ {
}, },
mounted() mounted()
{ {
this.loadCountryCodes(); this.loadCountryCodes();
this.loadFromStorage(); this.loadFromStorage();
this.currentVersion = this.$root.sections.meta.version
// Quick Fix
storage.setVersionedLocalStorage(this.currentVersion, "sections", this.$root.sections);
// console.log([this.$root.sections.meta.version,this.$root.sections]);
//if (!this.availableVersions.hasKey(this.$root.sections.meta.version))
// this.availableVersions.push(this.$root.sections.meta.version);
// console.log([this.versions[0],storage.getVersionedLocalStorage(this.versions[0])]);
// this.availableVersions = this.$root.availableVersions;
// 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();
@ -109,7 +126,19 @@ var app = new Vue({
this.activePage.fontAwesomeIconCss = component.fontAwesomeIcon; this.activePage.fontAwesomeIconCss = component.fontAwesomeIcon;
}, },
onVersionChange: function() {
//Save previous state
storage.setVersionedLocalStorage(this.$root.sections.meta.version,"sections",this.$root.sections);
// console.log(["version",this.currentVersion,this.$root.sections.meta.version]);
this.$root.sections = storage.getVersionedLocalStorage(this.currentVersion,"sections");
// console.log(["Root Sections",this.$root.sections]);
storage.setLocalStorage(this.$root.sections); // Perhaps optimisation to come
//console.log(["version",this.currentVersion,this.$root.sections.meta.version]);
},
/** /**
* Reset and clear the details of the active page. * Reset and clear the details of the active page.
@ -120,13 +149,21 @@ var app = new Vue({
this.activePage.title = ""; this.activePage.title = "";
this.activePage.fontAwesomeIconCss = ""; this.activePage.fontAwesomeIconCss = "";
}, },
/*
*
*/
loadFromStorage: function() loadFromStorage: function()
{ {
var savedData = storage.getLocalStorage("sections"); var savedData = storage.getLocalStorage("sections");
this.populateSections(savedData); this.populateSections(savedData);
}, },
loadVersionFromStorage: function(version)
{
var savedData = storage.getLocalStorageVersion(version,"sections");
this.populateSections(savedData);
},
populateSections: function(data) populateSections: function(data)
{ {
if (data) if (data)
@ -141,9 +178,10 @@ var app = new Vue({
} }
} }
}, },
loadCountryCodes: function() loadCountryCodes: function()
{ {
console.log("loadCountryCodes(): data", countryCodes); // console.log("loadCountryCodes(): data", countryCodes);
this.countryCodes.push({ this.countryCodes.push({
"code": "", "code": "",
@ -159,7 +197,6 @@ var app = new Vue({
} }
}, },
getCountryName: function(countryCode) getCountryName: function(countryCode)
{ {
for (var i = 0; i < this.countryCodes.length; i++) for (var i = 0; i < this.countryCodes.length; i++)
@ -174,13 +211,12 @@ var app = new Vue({
return ""; return "";
}, },
displayLocation: function() displayLocation: function()
{ {
return this.sections.basics.location.city + ", " + this.getCountryName(this.sections.basics.location.countryCode); return this.sections.basics.location.city + ", " + this.getCountryName(this.sections.basics.location.countryCode);
}, },
skillLevelAsPercent: function(index) skillLevelAsPercent: function(index)
{ {
var level = this.$root.sections.skills[index].level; var level = this.$root.sections.skills[index].level;
@ -202,6 +238,7 @@ var app = new Vue({
return 50; return 50;
} }
}, },
languageFluencyAsPercent: function(index) languageFluencyAsPercent: function(index)
{ {
if (!this.$root.sections.skills[index]) { if (!this.$root.sections.skills[index]) {
@ -280,6 +317,7 @@ var app = new Vue({
return false; return false;
}, },
saveResume: function() saveResume: function()
{ {
var response = confirm("Resume saved"); var response = confirm("Resume saved");

62
components/import.js
View File

@ -1,35 +1,29 @@
var importComponent = { var importComponent = {
template: '#import-template', template: '#import-template',
mounted: function() mounted: function()
{ {
}, },
destroyed: function() destroyed: function()
{ {
}, },
data: function() data: function()
{ {
return { return {
item: {},
json: "" json: ""
}; };
}, },
methods: { methods: {
importJson: function() importJson: function()
{ {
console.log("import JSON: " + this.json); // console.log("import JSON: " + this.json);
var data = JSON.parse(this.json); var data = JSON.parse(this.json);
@ -40,13 +34,61 @@ var importComponent = {
storage.setLocalStorage("sections", this.$root.sections); storage.setLocalStorage("sections", this.$root.sections);
storage.setVersionedLocalStorage(this.$root.sections.meta.version, "sections", this.$root.sections);
router.push("section/basics"); router.push("section/basics");
}, },
validateJson: function(value) validateJson: function(value)
{ {
},
importVersion: function(version) {
//console.log(version);
this.$root.sections = storage.getVersionedLocalStorage(version,"sections");
storage.setLocalStorage("sections",this.$root.sections);
this.$root.currentVersion = version;
this.$root.loadFromStorage();
router.push("section/basics");
},
deleteVersion: function(version) {
var versions = storage.getLocalStorage("versions");
var index = versions.indexOf(version);
if (index > -1 && confirm("Are you sure you wish to delete " + version + "?")) {
versions.splice(index, 1);
storage.setVersionedLocalStorage(version,"sections",null);
storage.setLocalStorage("versions",versions);
this.$root.versions = versions;
}
},
deleteClicked: function(index)
{
console.log(index);
var response = confirm("Are you sure you want to delete this position? " + index);
if (response == true)
{
this.$root.versions.splice(index, 1);
}
},
moveUpClicked: function(index)
{
console.log(index);
this.$root.moveArrayPosition(this.$root.versions, index, index - 1);
},
moveDownClicked: function(index)
{
console.log(index);
this.$root.moveArrayPosition(this.$root.versions, index, index + 1);
} }
} }
}; };

63
index.html
View File

@ -57,8 +57,14 @@
<nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"> <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar">
<div class="w3-bar-block"> <div class="w3-bar-block">
<a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i>&nbsp; Home</a> <a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i>&nbsp; Home</a>
<a v-bind:href="this.sections.meta.canonical" v-if="this.sections.meta.canonical != ''" target="_new" class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }}</a> <form>
<span v-else class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }}</span><span v-if="this.sections.meta.lastModified != ''" class="w3-bar-item w3-button w3-padding w3-blue">({{ this.sections.meta.lastModified}})</span> <select name="currentVersion" v-model="currentVersion" @change="onVersionChange()">
<option v-for="(version, v_index) in this.$root.versions">
{{ version }}
</option>
</select>
</form>
<a v-bind:href="this.sections.meta.canonical" v-if="this.sections.meta.canonical != ''" target="_new" class="w3-bar-item w3-button w3-padding "><i class="fas fa-link"></i> link ({{ this.sections.meta.lastModified}})</a>
</div> </div>
<div class="w3-container w3-margin-top"> <div class="w3-container w3-margin-top">
<h5>Sections</h5> <h5>Sections</h5>
@ -164,8 +170,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="section-basics-template" lang="html"> <template type="text/x-template" id="section-basics-template" lang="html">
<div id="section-basics-root"> <div id="section-basics-root">
<div class="w3-row"> <div class="w3-row">
@ -405,8 +409,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="section-volunteer-template" lang="html"> <template type="text/x-template" id="section-volunteer-template" lang="html">
<div id="section-volunteer-root"> <div id="section-volunteer-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addPosition">+ Add Position</button> <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addPosition">+ Add Position</button>
@ -482,8 +484,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="section-education-template" lang="html"> <template type="text/x-template" id="section-education-template" lang="html">
<div id="section-education-root"> <div id="section-education-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addEducation">+ Add Education</button> <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addEducation">+ Add Education</button>
@ -558,8 +558,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="section-awards-template" lang="html"> <template type="text/x-template" id="section-awards-template" lang="html">
<div id="section-awards-root"> <div id="section-awards-root">
<p> <p>
@ -608,8 +606,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="section-publications-template" lang="html"> <template type="text/x-template" id="section-publications-template" lang="html">
<div id="section-publications-root"> <div id="section-publications-root">
<p> <p>
@ -664,8 +660,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="section-skills-template" lang="html"> <template type="text/x-template" id="section-skills-template" lang="html">
<div id="section-skills-root"> <div id="section-skills-root">
<p> <p>
@ -719,8 +713,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="section-languages-template" lang="html"> <template type="text/x-template" id="section-languages-template" lang="html">
<div id="section-languages-root"> <div id="section-languages-root">
<p> <p>
@ -757,8 +749,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="section-interests-template" lang="html"> <template type="text/x-template" id="section-interests-template" lang="html">
<div id="section-interests-root"> <div id="section-interests-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addInterest">+ Add Interest</button> <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addInterest">+ Add Interest</button>
@ -804,8 +794,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="section-references-template" lang="html"> <template type="text/x-template" id="section-references-template" lang="html">
<div id="section-references-root"> <div id="section-references-root">
<p> <p>
@ -842,8 +830,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="section-projects-template" lang="html"> <template type="text/x-template" id="section-projects-template" lang="html">
<div id="section-projects-root"> <div id="section-projects-root">
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addProject">+ Add Project</button> <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addProject">+ Add Project</button>
@ -949,8 +935,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="preview-resume-template" lang="html"> <template type="text/x-template" id="preview-resume-template" lang="html">
<div id="preview-resume-root"> <div id="preview-resume-root">
<!-- Page Container --> <!-- Page Container -->
@ -1236,8 +1220,6 @@
</div> </div>
</template> </template>
<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="displayFormat == '' || displayFormat == 'url' || displayFormat == 'multi-line' || displayFormat == 'email' || displayFormat == 'phone' || displayFormat == 'date'"> <div class="w3-row w3-margin-bottom" v-if="displayFormat == '' || displayFormat == 'url' || displayFormat == 'multi-line' || displayFormat == 'email' || displayFormat == 'phone' || displayFormat == 'date'">
@ -1266,8 +1248,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="card-header-template" lang="html"> <template type="text/x-template" id="card-header-template" lang="html">
<div id="card-header-root"> <div id="card-header-root">
<header class="w3-container w3-dark-grey w3-padding-16" v-bind:id="'header' + id"> <header class="w3-container w3-dark-grey w3-padding-16" v-bind:id="'header' + id">
@ -1285,8 +1265,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="sorted-input-item-template" lang="html"> <template type="text/x-template" id="sorted-input-item-template" lang="html">
<div id="sorted-input-item-root"> <div id="sorted-input-item-root">
<div class="" v-bind:id="'item' + id"> <div class="" v-bind:id="'item' + id">
@ -1304,20 +1282,30 @@
</div> </div>
</template> </template>
<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 and import to continue editing. Paste 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> <button class="w3-btn w3-white w3-border w3-border-blue w3-round" v-on:click="importJson">Import</button>
<br/>
<BR/>
<form class="w3-card-4 margin-top-32" v-for="(version, v_index) in this.$root.versions">
<card-header v-bind:label="version" v-bind:id="v_index" v-on:delete-clicked="deleteClicked" v-on:move-up-clicked="moveUpClicked" v-on:move-down-clicked="moveDownClicked"></card-header>
<div class="w3-container w3-hide" v-bind:id="'content' + v_index">
<button class="w3-btn w3-white w3-border w3-border-blue w3-round" v-on:click="importVersion(version,$event)">
Load {{ version }}
</button>
<button class="w3-btn w3-white w3-border w3-border-blue w3-round" v-on:click="deleteVersion(version,$event)">
Delete {{ version }}
</button>
</div>
</form>
</div> </div>
</template> </template>
<template type="text/x-template" id="export-template" lang="html"> <template type="text/x-template" id="export-template" lang="html">
<div id="export-root"> <div id="export-root">
<p> <p>
@ -1327,8 +1315,6 @@
</div> </div>
</template> </template>
<template type="text/x-template" id="about-template" lang="html"> <template type="text/x-template" id="about-template" lang="html">
<div id="export-root"> <div id="export-root">
<p> <p>
@ -1368,10 +1354,10 @@
<script type="text/javascript" src="vendor/vue.2.6.10.js"></script> <script type="text/javascript" src="vendor/vue.2.6.10.js"></script>
<script type="text/javascript" src="vendor/vue-router.3.1.3.js"></script> <script type="text/javascript" src="vendor/vue-router.3.1.3.js"></script>
<script type="text/javascript" src="vendor/markdown-it-10.0.0.js"></script> <script type="text/javascript" src="vendor/markdown-it-10.0.0.js"></script>
<script type="text/javascript" src="app/page_registration.js"></script> <script type="text/javascript" src="app/page_registration.js"></script>
<script type="text/javascript" src="components/home.js"></script> <script type="text/javascript" src="components/home.js"></script>
<script type="text/javascript" src="components/section_basics.js"></script> <script type="text/javascript" src="components/section_basics.js"></script>
<script type="text/javascript" src="components/section_work.js"></script> <script type="text/javascript" src="components/section_work.js"></script>
@ -1391,6 +1377,7 @@
<script type="text/javascript" src="components/import.js"></script> <script type="text/javascript" src="components/import.js"></script>
<script type="text/javascript" src="components/export.js"></script> <script type="text/javascript" src="components/export.js"></script>
<script type="text/javascript" src="components/about.js"></script> <script type="text/javascript" src="components/about.js"></script>
<script type="text/javascript" src="app/app.js"></script> <script type="text/javascript" src="app/app.js"></script>
<!-- /Scripts --> <!-- /Scripts -->

51
scripts/storage.js
View File

@ -3,33 +3,68 @@
*/ */
var storage = { var storage = {
getCurrentVersion: function()
{
console.log("storage getCurrentVersion" + this.getLocalStorage('sections.meta.version'));
return this.getLocalStorage('sections.meta.version');
},
getAvailableVersions: function()
{
return storage.getLocalStorage("versions");
},
setLocalStorage: function(key, value) setLocalStorage: function(key, value)
{ {
var jsonValue = JSON.stringify(value); var jsonValue = JSON.stringify(value);
localStorage.setItem(key, jsonValue); localStorage.setItem(key, jsonValue);
}, },
setVersionedLocalStorage: function(version, key, value)
{
var jsonValue = JSON.stringify(value);
key = "versions." + version + "." + key;
localStorage.setItem(key, jsonValue);
this.versions = [];
if (this.getLocalStorage("versions")) {
this.versions = this.getLocalStorage("versions");
}
if (!this.versions.includes(version)) {
this.versions.push(version);
}
// versions.push(version);
// console.log([version, key, value, versions]);
this.setLocalStorage("versions",this.versions);
},
getLocalStorage: function(key) getLocalStorage: function(key)
{ {
jsonValue = localStorage.getItem(key); // console.log(key);
var value = null; var value = null;
if (jsonValue) if (key)
{ {
value = JSON.parse(jsonValue); value = JSON.parse(localStorage.getItem(key));
} }
// console.log(value);
return value; return value;
//return this.parseJSON2Native(localStorage.getItem(key));
},
/*
* @TODO optimize
*/
getVersionedLocalStorage: function(version, key)
{
return this.getLocalStorage("versions." + version + "." + key);
}, },
clearLocalStorage: function(key) clearLocalStorage: function(key)
{ {
localStorage.removeItem(key); localStorage.removeItem(key);
} },
} }