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

Set something on the top left to discriminate what I am looking at.

This commit is contained in:
chris2fr 2020-10-15 17:03:40 +02:00
parent 98a93c13ef
commit d767b40475
4 changed files with 28 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

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

129
app/app.js
View File

@ -32,75 +32,48 @@ 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.
*/
activePage: {
id: "",
title: "",
fontAwesomeIconCss: ""
},
countryCodes: []
/**
* Details of the current page/route.
*/
activePage: {
id: "",
title: "",
fontAwesomeIconCss: ""
},
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
pageComponents.registerComponents();
//-- Register all components //-- Get the component for the initial route path
pageComponents.registerComponents(); var initialRoute = this.$route.path;
var component = pageComponents.getComponentByPath(initialRoute);
//-- Get the component for the initial route path this.setActivePageByComponent(component);
var initialRoute = this.$route.path;
var component = pageComponents.getComponentByPath(initialRoute);
this.setActivePageByComponent(component);
}, },
destroyed() destroyed()
{ {
}, },
mounted() mounted()
@ -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.
@ -136,7 +106,7 @@ var app = new Vue({
this.activePage.id = component.id; this.activePage.id = component.id;
this.activePage.title = component.title; this.activePage.title = component.title;
this.activePage.fontAwesomeIconCss = component.fontAwesomeIcon; this.activePage.fontAwesomeIconCss = component.fontAwesomeIcon;
}, },
@ -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.

9
components/preview_single_field.js
View File

@ -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()
{ {

8
index.html
View File

@ -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>&nbsp; Home</a> <a href="#/" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fas fa-home"></i>&nbsp; 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">