Set something on the top left to discriminate what I am looking at.
This commit is contained in:
chris2fr
parent
98a93c13ef
commit
d767b40475
|
|
@ -1,3 +1,4 @@
|
||||||
{
|
{
|
||||||
"liveServer.settings.port": 5501
|
// "liveServer.settings.port": 5501;
|
||||||
|
editor.disableMonospaceOptimizations: true;
|
||||||
}
|
}
|
||||||
85
app/app.js
85
app/app.js
|
|
@ -32,33 +32,18 @@ var router = new VueRouter({
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var app = new Vue({
|
var app = new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
|
|
||||||
router: router,
|
router: router,
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
components:
|
components:
|
||||||
{
|
{
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
data:
|
data:
|
||||||
{
|
{
|
||||||
status: "laading",
|
status: "loading",
|
||||||
|
|
||||||
sections: {},
|
sections: {},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Details of the current page/route.
|
* Details of the current page/route.
|
||||||
*/
|
*/
|
||||||
|
|
@ -68,18 +53,12 @@ var app = new Vue({
|
||||||
fontAwesomeIconCss: ""
|
fontAwesomeIconCss: ""
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
countryCodes: []
|
countryCodes: []
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
created()
|
created()
|
||||||
{
|
{
|
||||||
this.sections = models.newDefaultSections();
|
this.sections = models.newDefaultSections();
|
||||||
|
|
||||||
console.log("this.sections=", this.sections);
|
console.log("this.sections=", this.sections);
|
||||||
|
|
||||||
//-- Register all components
|
//-- Register all components
|
||||||
|
|
@ -92,17 +71,11 @@ var app = new Vue({
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
destroyed()
|
destroyed()
|
||||||
{
|
{
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
mounted()
|
mounted()
|
||||||
{
|
{
|
||||||
this.loadCountryCodes();
|
this.loadCountryCodes();
|
||||||
|
|
@ -122,9 +95,6 @@ var app = new Vue({
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
/**
|
/**
|
||||||
* Set details of the currently selected "page" (route) from a registered component.
|
* Set details of the currently selected "page" (route) from a registered component.
|
||||||
|
|
@ -150,17 +120,12 @@ var app = new Vue({
|
||||||
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);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
populateSections: function(data)
|
populateSections: function(data)
|
||||||
{
|
{
|
||||||
if (data)
|
if (data)
|
||||||
|
|
@ -175,9 +140,6 @@ var app = new Vue({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
loadCountryCodes: function()
|
loadCountryCodes: function()
|
||||||
{
|
{
|
||||||
console.log("loadCountryCodes(): data", countryCodes);
|
console.log("loadCountryCodes(): data", countryCodes);
|
||||||
|
|
@ -211,9 +173,6 @@ 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);
|
||||||
|
|
@ -242,9 +201,6 @@ var app = new Vue({
|
||||||
return 50;
|
return 50;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
languageFluencyAsPercent: function(index)
|
languageFluencyAsPercent: function(index)
|
||||||
{
|
{
|
||||||
var fluency = this.$root.sections.skills[index].level;
|
var fluency = this.$root.sections.skills[index].level;
|
||||||
|
|
@ -266,9 +222,6 @@ var app = new Vue({
|
||||||
return 50;
|
return 50;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
workEndDate: function(index)
|
workEndDate: function(index)
|
||||||
{
|
{
|
||||||
var endDate = this.$root.sections.work[index].endDate;
|
var endDate = this.$root.sections.work[index].endDate;
|
||||||
|
|
@ -277,9 +230,6 @@ var app = new Vue({
|
||||||
|
|
||||||
return endDate;
|
return endDate;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
projectEndDate: function(index)
|
projectEndDate: function(index)
|
||||||
{
|
{
|
||||||
var endDate = this.$root.sections.projects[index].endDate;
|
var endDate = this.$root.sections.projects[index].endDate;
|
||||||
|
|
@ -288,18 +238,12 @@ var app = new Vue({
|
||||||
|
|
||||||
return endDate;
|
return endDate;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
dateMonthYear: function(dateString)
|
dateMonthYear: function(dateString)
|
||||||
{
|
{
|
||||||
var dt = new Date(dateString);
|
var dt = new Date(dateString);
|
||||||
|
|
||||||
return dt.getFullYear() + ", " + this.getMonthName(dt.getMonth() + 1);
|
return dt.getFullYear() + ", " + this.getMonthName(dt.getMonth() + 1);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
getMonthName: function(monthNumber)
|
getMonthName: function(monthNumber)
|
||||||
{
|
{
|
||||||
if (monthNumber == 1) return "January";
|
if (monthNumber == 1) return "January";
|
||||||
|
|
@ -317,9 +261,6 @@ var app = new Vue({
|
||||||
|
|
||||||
return "";
|
return "";
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Clear save data and reset the sections structure.
|
* Clear save data and reset the sections structure.
|
||||||
*/
|
*/
|
||||||
|
|
@ -335,9 +276,6 @@ var app = new Vue({
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
saveResume: function()
|
saveResume: function()
|
||||||
{
|
{
|
||||||
var response = confirm("Resume saved");
|
var response = confirm("Resume saved");
|
||||||
|
|
@ -347,9 +285,6 @@ var app = new Vue({
|
||||||
alert("Resume saved");
|
alert("Resume saved");
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Open the sidebar on smaller screens.
|
* Open the sidebar on smaller screens.
|
||||||
*/
|
*/
|
||||||
|
|
@ -372,9 +307,6 @@ var app = new Vue({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Open the sidebar on smaller screens.
|
* Open the sidebar on smaller screens.
|
||||||
*/
|
*/
|
||||||
|
|
@ -386,9 +318,6 @@ var app = new Vue({
|
||||||
mySidebar.style.display = "none";
|
mySidebar.style.display = "none";
|
||||||
overlayBg.style.display = "none";
|
overlayBg.style.display = "none";
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Show the full-page loading overlay.
|
* Show the full-page loading overlay.
|
||||||
*/
|
*/
|
||||||
|
|
@ -406,9 +335,6 @@ var app = new Vue({
|
||||||
{
|
{
|
||||||
document.getElementById("full-page-overlay").style.display = "none";
|
document.getElementById("full-page-overlay").style.display = "none";
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Find and mark the main navigation item for the selected "current" page/route
|
* Find and mark the main navigation item for the selected "current" page/route
|
||||||
*/
|
*/
|
||||||
|
|
@ -460,9 +386,6 @@ var app = new Vue({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Collapse or un-collapse a content element by setting its collapse state to opposite of current state.
|
* Collapse or un-collapse a content element by setting its collapse state to opposite of current state.
|
||||||
* @param {string} id ID of the content element to collapse/un-collapse.
|
* @param {string} id ID of the content element to collapse/un-collapse.
|
||||||
|
|
@ -479,9 +402,6 @@ var app = new Vue({
|
||||||
x.className = x.className.replace(" w3-show", "");
|
x.className = x.className.replace(" w3-show", "");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Move the position of an element in an array.
|
* Move the position of an element in an array.
|
||||||
*
|
*
|
||||||
|
|
@ -528,9 +448,6 @@ var app = new Vue({
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
/**
|
/**
|
||||||
* Detect when a route changes.
|
* Detect when a route changes.
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
Vue.component("preview-field", {
|
Vue.component("preview-field", {
|
||||||
template: '#preview-single-field-template',
|
template: '#preview-single-field-template',
|
||||||
|
|
||||||
|
|
||||||
props: [
|
props: [
|
||||||
'label',
|
'label',
|
||||||
'value',
|
'value',
|
||||||
|
|
@ -10,22 +9,16 @@ Vue.component("preview-field", {
|
||||||
'format',
|
'format',
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
mounted: function()
|
mounted: function()
|
||||||
{
|
{
|
||||||
this.displayFormat = (this.format ? this.format : "");
|
this.displayFormat = (this.format ? this.format : "");
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
destroyed: function()
|
destroyed: function()
|
||||||
{
|
{
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
data: function()
|
data: function()
|
||||||
{
|
{
|
||||||
return {
|
return {
|
||||||
|
|
@ -34,8 +27,6 @@ Vue.component("preview-field", {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
getLabel: function()
|
getLabel: function()
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,6 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
|
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
|
||||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
|
||||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
|
||||||
|
|
@ -48,9 +47,7 @@
|
||||||
<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> Home</a>
|
<a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i> Home</a>
|
||||||
<preview-field label="V." v-bind:value="$root.sections.meta.version"></preview-field>
|
<a v-bind:href="this.sections.meta.canonical" target="_new" class="w3-bar-item w3-button w3-padding w3-blue">{{ this.sections.meta.version }} ({{ this.sections.meta.lastModified}})</a>
|
||||||
<preview-field label="Canonical" v-bind:value="$root.sections.meta.canonical"></preview-field>
|
|
||||||
<preview-field label="Date" v-bind:value="$root.sections.meta.lastModified"></preview-field>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="w3-container w3-margin-top">
|
<div class="w3-container w3-margin-top">
|
||||||
<h5>Sections</h5>
|
<h5>Sections</h5>
|
||||||
|
|
@ -158,7 +155,6 @@
|
||||||
|
|
||||||
|
|
||||||
<template type="text/x-template" id="section-basics-template" lang="html">
|
<template type="text/x-template" id="section-basics-template" lang="html">
|
||||||
<preview-field label="Full Name" v-bind:value="$root.sections.meta.canonical"></preview-field>
|
|
||||||
<div id="section-basics-root">
|
<div id="section-basics-root">
|
||||||
<div class="w3-row">
|
<div class="w3-row">
|
||||||
<div class="w3-col m6">
|
<div class="w3-col m6">
|
||||||
|
|
@ -946,6 +942,7 @@
|
||||||
<div v-if="$root.sections.skills.length > 0" v-for="(skill, index) in $root.sections.skills">
|
<div v-if="$root.sections.skills.length > 0" v-for="(skill, index) in $root.sections.skills">
|
||||||
<p>{{skill.name}}</p>
|
<p>{{skill.name}}</p>
|
||||||
<div class="w3-light-grey w3-round-xlarge w3-small">
|
<div class="w3-light-grey w3-round-xlarge w3-small">
|
||||||
|
<div class="w3-container w3-center w3-round-xlarge w3-teal" v-bind:style="{ width: $root.skillLevelAsPercent(index) + '%' }">{{skill.level}}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -953,6 +950,7 @@
|
||||||
<!-- Languages -->
|
<!-- Languages -->
|
||||||
<div v-if="$root.sections.languages && $root.sections.languages.length > 0" >
|
<div v-if="$root.sections.languages && $root.sections.languages.length > 0" >
|
||||||
<p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>
|
<p class="w3-large w3-text-theme"><b><i class="fa fa-globe fa-fw w3-margin-right w3-text-teal"></i>Languages</b></p>
|
||||||
|
<div v-if="$root.sections.languages.length > 0" v-for="(language, index) in $root.sections.languages">
|
||||||
<div v-for="(language, index) in $root.sections.languages">
|
<div v-for="(language, index) in $root.sections.languages">
|
||||||
<p>{{language.language}}</p>
|
<p>{{language.language}}</p>
|
||||||
<div class="w3-light-grey w3-round-xlarge">
|
<div class="w3-light-grey w3-round-xlarge">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue