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;
|
||||
}
|
||||
129
app/app.js
129
app/app.js
|
|
@ -32,75 +32,48 @@ var router = new VueRouter({
|
|||
});
|
||||
|
||||
|
||||
|
||||
var app = new Vue({
|
||||
el: '#app',
|
||||
|
||||
router: router,
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
components:
|
||||
{
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
data:
|
||||
{
|
||||
status: "laading",
|
||||
status: "loading",
|
||||
|
||||
sections: {},
|
||||
sections: {},
|
||||
/**
|
||||
* Details of the current page/route.
|
||||
*/
|
||||
activePage: {
|
||||
id: "",
|
||||
title: "",
|
||||
fontAwesomeIconCss: ""
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Details of the current page/route.
|
||||
*/
|
||||
activePage: {
|
||||
id: "",
|
||||
title: "",
|
||||
fontAwesomeIconCss: ""
|
||||
},
|
||||
|
||||
|
||||
countryCodes: []
|
||||
countryCodes: []
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
created()
|
||||
{
|
||||
this.sections = models.newDefaultSections();
|
||||
{
|
||||
this.sections = models.newDefaultSections();
|
||||
console.log("this.sections=", this.sections);
|
||||
|
||||
console.log("this.sections=", this.sections);
|
||||
//-- Register all components
|
||||
pageComponents.registerComponents();
|
||||
|
||||
//-- Register all components
|
||||
pageComponents.registerComponents();
|
||||
|
||||
//-- Get the component for the initial route path
|
||||
var initialRoute = this.$route.path;
|
||||
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()
|
||||
{
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
mounted()
|
||||
|
|
@ -122,9 +95,6 @@ var app = new Vue({
|
|||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Set details of the currently selected "page" (route) from a registered component.
|
||||
|
|
@ -136,7 +106,7 @@ var app = new Vue({
|
|||
this.activePage.id = component.id;
|
||||
this.activePage.title = component.title;
|
||||
this.activePage.fontAwesomeIconCss = component.fontAwesomeIcon;
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
|
@ -150,17 +120,12 @@ var app = new Vue({
|
|||
this.activePage.fontAwesomeIconCss = "";
|
||||
},
|
||||
|
||||
|
||||
|
||||
loadFromStorage: function()
|
||||
{
|
||||
var savedData = storage.getLocalStorage("sections");
|
||||
|
||||
this.populateSections(savedData);
|
||||
},
|
||||
|
||||
|
||||
|
||||
populateSections: function(data)
|
||||
{
|
||||
if (data)
|
||||
|
|
@ -175,9 +140,6 @@ var app = new Vue({
|
|||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
loadCountryCodes: function()
|
||||
{
|
||||
console.log("loadCountryCodes(): data", countryCodes);
|
||||
|
|
@ -211,9 +173,6 @@ var app = new Vue({
|
|||
|
||||
return "";
|
||||
},
|
||||
|
||||
|
||||
|
||||
displayLocation: function()
|
||||
{
|
||||
return this.sections.basics.location.city + ", " + this.getCountryName(this.sections.basics.location.countryCode);
|
||||
|
|
@ -242,9 +201,6 @@ var app = new Vue({
|
|||
return 50;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
languageFluencyAsPercent: function(index)
|
||||
{
|
||||
var fluency = this.$root.sections.skills[index].level;
|
||||
|
|
@ -266,9 +222,6 @@ var app = new Vue({
|
|||
return 50;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
workEndDate: function(index)
|
||||
{
|
||||
var endDate = this.$root.sections.work[index].endDate;
|
||||
|
|
@ -277,9 +230,6 @@ var app = new Vue({
|
|||
|
||||
return endDate;
|
||||
},
|
||||
|
||||
|
||||
|
||||
projectEndDate: function(index)
|
||||
{
|
||||
var endDate = this.$root.sections.projects[index].endDate;
|
||||
|
|
@ -288,18 +238,12 @@ var app = new Vue({
|
|||
|
||||
return endDate;
|
||||
},
|
||||
|
||||
|
||||
|
||||
dateMonthYear: function(dateString)
|
||||
{
|
||||
var dt = new Date(dateString);
|
||||
|
||||
return dt.getFullYear() + ", " + this.getMonthName(dt.getMonth() + 1);
|
||||
},
|
||||
|
||||
|
||||
|
||||
getMonthName: function(monthNumber)
|
||||
{
|
||||
if (monthNumber == 1) return "January";
|
||||
|
|
@ -317,9 +261,6 @@ var app = new Vue({
|
|||
|
||||
return "";
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Clear save data and reset the sections structure.
|
||||
*/
|
||||
|
|
@ -335,9 +276,6 @@ var app = new Vue({
|
|||
|
||||
return false;
|
||||
},
|
||||
|
||||
|
||||
|
||||
saveResume: function()
|
||||
{
|
||||
var response = confirm("Resume saved");
|
||||
|
|
@ -347,9 +285,6 @@ var app = new Vue({
|
|||
alert("Resume saved");
|
||||
return false;
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Open the sidebar on smaller screens.
|
||||
*/
|
||||
|
|
@ -372,9 +307,6 @@ var app = new Vue({
|
|||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Open the sidebar on smaller screens.
|
||||
*/
|
||||
|
|
@ -386,9 +318,6 @@ var app = new Vue({
|
|||
mySidebar.style.display = "none";
|
||||
overlayBg.style.display = "none";
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Show the full-page loading overlay.
|
||||
*/
|
||||
|
|
@ -406,9 +335,6 @@ var app = new Vue({
|
|||
{
|
||||
document.getElementById("full-page-overlay").style.display = "none";
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 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.
|
||||
* @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", "");
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Move the position of an element in an array.
|
||||
*
|
||||
|
|
@ -528,9 +448,6 @@ var app = new Vue({
|
|||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* Detect when a route changes.
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
Vue.component("preview-field", {
|
||||
template: '#preview-single-field-template',
|
||||
|
||||
|
||||
props: [
|
||||
'label',
|
||||
'value',
|
||||
|
|
@ -10,22 +9,16 @@ Vue.component("preview-field", {
|
|||
'format',
|
||||
],
|
||||
|
||||
|
||||
|
||||
mounted: function()
|
||||
{
|
||||
this.displayFormat = (this.format ? this.format : "");
|
||||
},
|
||||
|
||||
|
||||
|
||||
destroyed: function()
|
||||
{
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
data: function()
|
||||
{
|
||||
return {
|
||||
|
|
@ -34,8 +27,6 @@ Vue.component("preview-field", {
|
|||
};
|
||||
},
|
||||
|
||||
|
||||
|
||||
methods: {
|
||||
getLabel: function()
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<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="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">
|
||||
<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>
|
||||
<preview-field label="V." v-bind:value="$root.sections.meta.version"></preview-field>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="w3-container w3-margin-top">
|
||||
<h5>Sections</h5>
|
||||
|
|
@ -158,7 +155,6 @@
|
|||
|
||||
|
||||
<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 class="w3-row">
|
||||
<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">
|
||||
<p>{{skill.name}}</p>
|
||||
<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>
|
||||
<br>
|
||||
|
|
@ -953,6 +950,7 @@
|
|||
<!-- Languages -->
|
||||
<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>
|
||||
<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">
|
||||
<p>{{language.language}}</p>
|
||||
<div class="w3-light-grey w3-round-xlarge">
|
||||
|
|
|
|||
Loading…
Reference in New Issue