List item sorting and deleting.
This commit is contained in:
Jason Snelders
parent
ffbe683a9a
commit
6c8cd51bdb
89
app/app.js
89
app/app.js
|
|
@ -239,6 +239,32 @@ var app = new Vue({
|
|||
},
|
||||
|
||||
|
||||
dateMonthYear: function(dateString)
|
||||
{
|
||||
var dt = new Date(dateString);
|
||||
|
||||
return dt.getFullYear() + ", " + this.getMonthName(dt.getMonth() + 1);
|
||||
},
|
||||
|
||||
|
||||
getMonthName: function(monthNumber)
|
||||
{
|
||||
if (monthNumber == 1) return "January";
|
||||
if (monthNumber == 2) return "February";
|
||||
if (monthNumber == 3) return "March";
|
||||
if (monthNumber == 4) return "April";
|
||||
if (monthNumber == 5) return "May";
|
||||
if (monthNumber == 6) return "June";
|
||||
if (monthNumber == 7) return "July";
|
||||
if (monthNumber == 8) return "August";
|
||||
if (monthNumber == 9) return "September";
|
||||
if (monthNumber == 10) return "October";
|
||||
if (monthNumber == 11) return "November";
|
||||
if (monthNumber == 12) return "December";
|
||||
|
||||
return "";
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Clear save data and reset the sections structure.
|
||||
|
|
@ -376,6 +402,69 @@ var app = new Vue({
|
|||
element.classList.add("w3-blue");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
invertCollapse: function(id)
|
||||
{
|
||||
var x = document.getElementById(id);
|
||||
if (x.className.indexOf("w3-show") == -1)
|
||||
{
|
||||
x.className += " w3-show";
|
||||
}
|
||||
else
|
||||
{
|
||||
x.className = x.className.replace(" w3-show", "");
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Move the position of an element in an array.
|
||||
*
|
||||
* @param array arr The array to move an element in.
|
||||
* @param int old_index Current position of the element.
|
||||
* @param int new_index New position of the element.
|
||||
*
|
||||
* @return array Updated array.
|
||||
*/
|
||||
moveArrayPosition: function(arr, old_index, new_index)
|
||||
{
|
||||
if (new_index == old_index)
|
||||
{
|
||||
// No change
|
||||
return ;
|
||||
}
|
||||
|
||||
if (new_index > old_index)
|
||||
{
|
||||
// Moving forward in array
|
||||
if (old_index == this.$root.sections.work.length - 1) return; // Cannot move beyond the end of the array
|
||||
}
|
||||
if (new_index < old_index)
|
||||
{
|
||||
// Moving back in array
|
||||
if (old_index == 0) return; // Cannot move beyond the start of the array
|
||||
}
|
||||
|
||||
|
||||
if (new_index >= arr.length)
|
||||
{
|
||||
var k = new_index - arr.length + 1;
|
||||
while (k--)
|
||||
{
|
||||
arr.push(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
|
||||
|
||||
return arr; // for testing
|
||||
}
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
Vue.component("card-header", {
|
||||
template: '#card-header-template',
|
||||
|
||||
|
||||
props: [
|
||||
'label',
|
||||
'id'
|
||||
],
|
||||
|
||||
|
||||
|
||||
|
||||
mounted: function()
|
||||
{
|
||||
this.displayFormat = (this.format ? this.format : "");
|
||||
},
|
||||
|
||||
|
||||
|
||||
destroyed: function()
|
||||
{
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
data: function()
|
||||
{
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
|
||||
methods: {
|
||||
getLabel: function()
|
||||
{
|
||||
return (this.label ? this.label : "<i>(Untitled)</i>");
|
||||
},
|
||||
|
||||
|
||||
deleteClick: function()
|
||||
{
|
||||
//alert("deleteClick");
|
||||
this.$emit('delete-clicked', this.id);
|
||||
},
|
||||
|
||||
|
||||
moveUpClick: function()
|
||||
{
|
||||
//alert("moveUpClick");
|
||||
this.$emit('move-up-clicked', this.id);
|
||||
},
|
||||
|
||||
|
||||
moveDownClick: function()
|
||||
{
|
||||
//alert("moveDownClick");
|
||||
this.$emit('move-down-clicked', this.id);
|
||||
},
|
||||
}
|
||||
});
|
||||
|
|
@ -31,6 +31,29 @@ var sectionAwardsComponent = {
|
|||
{
|
||||
var item = this.$root.getDefaultAward();
|
||||
this.$root.sections.awards.push(item);
|
||||
},
|
||||
|
||||
|
||||
deleteClicked: function(index)
|
||||
{
|
||||
var response = confirm("Are you sure you want to delete this award?");
|
||||
|
||||
if (response == true)
|
||||
{
|
||||
this.$root.sections.awards.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
moveUpClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.awards, index, index - 1);
|
||||
},
|
||||
|
||||
|
||||
moveDownClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.awards, index, index + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -37,6 +37,29 @@ var sectionEducationComponent = {
|
|||
{
|
||||
var item = sections.getDefaultEducationCourse();
|
||||
this.$root.sections.education[index].courses.push(item);
|
||||
},
|
||||
|
||||
|
||||
deleteClicked: function(index)
|
||||
{
|
||||
var response = confirm("Are you sure you want to delete this position?");
|
||||
|
||||
if (response == true)
|
||||
{
|
||||
this.$root.sections.education.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
moveUpClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.education, index, index - 1);
|
||||
},
|
||||
|
||||
|
||||
moveDownClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.education, index, index + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -38,6 +38,29 @@ var sectionInterestsComponent = {
|
|||
var item = sections.getDefaultInterestKeywoard();
|
||||
//console.log("addHighlight(" + index + ")", this.$root.sections.interests[index]);
|
||||
this.$root.sections.interests[index].keywords.push(item);
|
||||
},
|
||||
|
||||
|
||||
deleteClicked: function(index)
|
||||
{
|
||||
var response = confirm("Are you sure you want to delete this interest?");
|
||||
|
||||
if (response == true)
|
||||
{
|
||||
this.$root.sections.interests.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
moveUpClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.interests, index, index - 1);
|
||||
},
|
||||
|
||||
|
||||
moveDownClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.interests, index, index + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -31,6 +31,29 @@ var sectionLanguagesComponent = {
|
|||
{
|
||||
var item = sections.getDefaultInterest();
|
||||
this.$root.sections.languages.push(item);
|
||||
},
|
||||
|
||||
|
||||
deleteClicked: function(index)
|
||||
{
|
||||
var response = confirm("Are you sure you want to delete this language?");
|
||||
|
||||
if (response == true)
|
||||
{
|
||||
this.$root.sections.languages.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
moveUpClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.languages, index, index - 1);
|
||||
},
|
||||
|
||||
|
||||
moveDownClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.languages, index, index + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -31,6 +31,29 @@ var sectionPublicationsComponent = {
|
|||
{
|
||||
var item = sections.getDefaultWork();
|
||||
this.$root.sections.publications.push(item);
|
||||
},
|
||||
|
||||
|
||||
deleteClicked: function(index)
|
||||
{
|
||||
var response = confirm("Are you sure you want to delete this publication?");
|
||||
|
||||
if (response == true)
|
||||
{
|
||||
this.$root.sections.publications.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
moveUpClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.publications, index, index - 1);
|
||||
},
|
||||
|
||||
|
||||
moveDownClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.publications, index, index + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -31,6 +31,29 @@ var sectionReferencesComponent = {
|
|||
{
|
||||
var item = sections.getDefaultReference();
|
||||
this.$root.sections.references.push(item);
|
||||
},
|
||||
|
||||
|
||||
deleteClicked: function(index)
|
||||
{
|
||||
var response = confirm("Are you sure you want to delete this reference?");
|
||||
|
||||
if (response == true)
|
||||
{
|
||||
this.$root.sections.references.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
moveUpClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.references, index, index - 1);
|
||||
},
|
||||
|
||||
|
||||
moveDownClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.references, index, index + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -38,6 +38,29 @@ var sectionSkillsComponent = {
|
|||
var item = sections.getDefaultSkillKeywoard();
|
||||
//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
|
||||
this.$root.sections.skills[index].keywords.push(item);
|
||||
},
|
||||
|
||||
|
||||
deleteClicked: function(index)
|
||||
{
|
||||
var response = confirm("Are you sure you want to delete this skill?");
|
||||
|
||||
if (response == true)
|
||||
{
|
||||
this.$root.sections.skills.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
moveUpClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.skills, index, index - 1);
|
||||
},
|
||||
|
||||
|
||||
moveDownClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.skills, index, index + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -38,6 +38,29 @@ var sectionVolunteerComponent = {
|
|||
var item = sections.getDefaulVolunteerHighlight();
|
||||
//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
|
||||
this.$root.sections.volunteer[index].highlights.push(item);
|
||||
},
|
||||
|
||||
|
||||
deleteClicked: function(index)
|
||||
{
|
||||
var response = confirm("Are you sure you want to delete this position?");
|
||||
|
||||
if (response == true)
|
||||
{
|
||||
this.$root.sections.volunteer.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
moveUpClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.volunteer, index, index - 1);
|
||||
},
|
||||
|
||||
|
||||
moveDownClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.volunteer, index, index + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -37,6 +37,29 @@ var sectionWorkComponent = {
|
|||
{
|
||||
var item = sections.getDefaultWorkHighlight();
|
||||
this.$root.sections.work[index].highlights.push(item);
|
||||
},
|
||||
|
||||
|
||||
deleteClicked: function(index)
|
||||
{
|
||||
var response = confirm("Are you sure you want to delete this position?");
|
||||
|
||||
if (response == true)
|
||||
{
|
||||
this.$root.sections.work.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
moveUpClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.work, index, index - 1);
|
||||
},
|
||||
|
||||
|
||||
moveDownClicked: function(index)
|
||||
{
|
||||
this.$root.moveArrayPosition(this.$root.sections.work, index, index + 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
116
index.html
116
index.html
|
|
@ -280,9 +280,12 @@
|
|||
<div id="section-work-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>
|
||||
|
||||
<div class="w3-row">
|
||||
<div class="w3-row margin-top-32">
|
||||
<div class="w3-col m6">
|
||||
<form class="w3-container w3-card-4 margin-top-32" v-for="(work, w_index) in $root.sections.work">
|
||||
<form class="w3-card-4" v-for="(work, w_index) in $root.sections.work">
|
||||
<card-header v-bind:label="work.company + ' - ' + work.position + ' (' + $root.dateMonthYear(work.startDate) + ')'" v-bind:id="w_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' + w_index">
|
||||
<p>
|
||||
<label for="company" class="w3-text-blue required-field"><b>Company</b></label>
|
||||
<input id="company" class="w3-input w3-border" type="text" v-model="work.company" required>
|
||||
|
|
@ -324,6 +327,7 @@
|
|||
<input class="w3-input w3-border" type="text" v-model="$root.sections.work[w_index].highlights[h_index]">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w3-col m6">
|
||||
|
|
@ -355,8 +359,10 @@
|
|||
|
||||
<div class="w3-row">
|
||||
<div class="w3-col m6">
|
||||
<form class="w3-container w3-card-4 margin-top-32" v-for="(vol, v_index) in $root.sections.volunteer">
|
||||
<div>
|
||||
<form class="w3-card-4 margin-top-32" v-for="(vol, v_index) in $root.sections.volunteer">
|
||||
<card-header v-bind:label="vol.organization" 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">
|
||||
<p>
|
||||
<label for="organization" class="w3-text-blue required-field"><b>Organisation</b></label>
|
||||
<input id="organization" class="w3-input w3-border" type="text" v-model="vol.organization" required>
|
||||
|
|
@ -430,7 +436,10 @@
|
|||
|
||||
<div class="w3-row">
|
||||
<div class="w3-col m6">
|
||||
<form class="w3-container w3-card-4 margin-top-32" v-for="(edu, e_index) in $root.sections.education">
|
||||
<form class="w3-card-4 margin-top-32" v-for="(edu, e_index) in $root.sections.education">
|
||||
<card-header v-bind:label="edu.institution" v-bind:id="e_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' + e_index">
|
||||
<p>
|
||||
<label for="institution" class="w3-text-blue required-field"><b>Institution</b></label>
|
||||
<input id="institution" class="w3-input w3-border" type="text" v-model="edu.institution" required>
|
||||
|
|
@ -471,6 +480,7 @@
|
|||
<input class="w3-input w3-border" type="text" v-model="$root.sections.education[e_index].courses[c_index]">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w3-col m6">
|
||||
|
|
@ -505,7 +515,10 @@
|
|||
|
||||
<div class="w3-row">
|
||||
<div class="w3-col m6">
|
||||
<form class="w3-container w3-card-4 margin-top-32" v-for="(award, a_index) in $root.sections.awards">
|
||||
<form class="w3-card-4 margin-top-32" v-for="(award, a_index) in $root.sections.awards">
|
||||
<card-header v-bind:label="award.title" v-bind:id="a_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' + a_index">
|
||||
<p>
|
||||
<label for="title" class="w3-text-blue required-field"><b>Title</b></label>
|
||||
<input id="title" class="w3-input w3-border" type="text" v-model="award.title" required>
|
||||
|
|
@ -526,6 +539,7 @@
|
|||
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="award.summary"></textarea>
|
||||
<small id="summaryHelp" class="form-help text-muted">Describe the award and circumstances (e.g. Received for my work with Quantum Physics).</small>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w3-col m6">
|
||||
|
|
@ -545,13 +559,16 @@
|
|||
<template type="text/x-template" id="section-publications-template" lang="html">
|
||||
<div id="section-publications-root">
|
||||
<p>
|
||||
Specify your publications through your career.
|
||||
Where have you published articles or work?
|
||||
</p>
|
||||
<button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addPublication">+ Add Publication</button>
|
||||
|
||||
<div class="w3-row">
|
||||
<div class="w3-row margin-top-32">
|
||||
<div class="w3-col m6">
|
||||
<form class="w3-container w3-card-4 margin-top-32" v-for="(publication, p_index) in $root.sections.publications">
|
||||
<form class="w3-card-4" v-for="(publication, p_index) in $root.sections.publications">
|
||||
<card-header v-bind:label="publication.name" v-bind:id="p_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' + p_index">
|
||||
<p>
|
||||
<label for="name" class="w3-text-blue required-field"><b>Name</b></label>
|
||||
<input id="name" class="w3-input w3-border" type="text" v-model="publication.name" required>
|
||||
|
|
@ -577,6 +594,7 @@
|
|||
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="publication.summary"></textarea>
|
||||
<small id="summaryHelp" class="form-help text-muted">Details of the article (e.g. Discussion of the World Wide Web, HTTP, HTML.).</small>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w3-col m6">
|
||||
|
|
@ -603,7 +621,10 @@
|
|||
|
||||
<div class="w3-row">
|
||||
<div class="w3-col m6">
|
||||
<form class="w3-container w3-card-4 margin-top-32" v-for="(skill, s_index) in $root.sections.skills">
|
||||
<form class="w3-card-4 margin-top-32" v-for="(skill, s_index) in $root.sections.skills">
|
||||
<card-header v-bind:label="skill.name" v-bind:id="s_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' + s_index">
|
||||
<p>
|
||||
<label for="name" class="w3-text-blue required-field"><b>Name</b></label>
|
||||
<input id="name" class="w3-input w3-border" type="text" v-model="skill.name" required>
|
||||
|
|
@ -624,6 +645,7 @@
|
|||
<input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.skills[s_index].keywords[k_index]">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w3-col m6">
|
||||
|
|
@ -654,7 +676,10 @@
|
|||
|
||||
<div class="w3-row">
|
||||
<div class="w3-col m6">
|
||||
<form class="w3-container w3-card-4 margin-top-32" v-for="language in $root.sections.languages">
|
||||
<form class="w3-card-4 margin-top-32" v-for="(language, l_index) in $root.sections.languages">
|
||||
<card-header v-bind:label="language.language" v-bind:id="l_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' + l_index">
|
||||
<p>
|
||||
<label for="language" class="w3-text-blue required-field"><b>Language</b></label>
|
||||
<input id="language" class="w3-input w3-border" type="text" v-model="language.language" required>
|
||||
|
|
@ -665,6 +690,7 @@
|
|||
<input id="fluency" class="w3-input w3-border" type="text" v-model="language.fluency" required>
|
||||
<small id="fluencyHelp" class="form-help text-muted">Fluency in the language (e.g. Fluent, Beginner).</small>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w3-col m6">
|
||||
|
|
@ -685,7 +711,10 @@
|
|||
|
||||
<div class="w3-row">
|
||||
<div class="w3-col m6">
|
||||
<form class="w3-container w3-card-4 margin-top-32" v-for="(interest, i_index) in $root.sections.interests">
|
||||
<form class="w3-card-4 margin-top-32" v-for="(interest, i_index) in $root.sections.interests">
|
||||
<card-header v-bind:label="interest.name" v-bind:id="i_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' + i_index">
|
||||
<p>
|
||||
<label for="name" class="w3-text-blue required-field"><b>Name</b></label>
|
||||
<input id="name" class="w3-input w3-border" type="text" v-model="interest.name" required>
|
||||
|
|
@ -702,6 +731,7 @@
|
|||
<input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.interests[i_index].keywords[k_index]">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w3-col m6">
|
||||
|
|
@ -731,7 +761,10 @@
|
|||
|
||||
<div class="w3-row">
|
||||
<div class="w3-col m6">
|
||||
<form class="w3-container w3-card-4 margin-top-32" v-for="reference in $root.sections.references">
|
||||
<form class="w3-card-4 margin-top-32" v-for="(reference, r_index) in $root.sections.references">
|
||||
<card-header v-bind:label="reference.name" v-bind:id="r_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' + r_index">
|
||||
<p>
|
||||
<label for="name" class="w3-text-blue required-field"><b>Name</b></label>
|
||||
<input id="name" class="w3-input w3-border" type="text" v-model="reference.name" required>
|
||||
|
|
@ -742,6 +775,7 @@
|
|||
<textarea id="reference" rows="8" class="w3-input w3-border" type="text" v-model="reference.reference"></textarea>
|
||||
<small id="referenceHelp" class="form-help text-muted">The reference given by the person (e.g. Joe blogs was a great employee, who turned up to work at least once a week. He exceeded my expectations when it came to doing nothing).</small>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="w3-col m6">
|
||||
|
|
@ -815,7 +849,8 @@
|
|||
|
||||
<div class="w3-container" v-for="(work, w_index) in $root.sections.work">
|
||||
<h5 class="w3-opacity"><b>{{work.position}}</b></h5>
|
||||
<a v-bind:href="work.website" target="_blank">{{work.company}}</a>
|
||||
<b>{{work.company}}</b>
|
||||
<a v-if="work.website" v-bind:href="work.website" target="_blank" class="w3-margin-left"><i class="fas fa-globe"></i></a>
|
||||
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>
|
||||
{{work.startDate}} -
|
||||
<span class="w3-tag w3-teal w3-round" v-if="$root.workEndDate(w_index) == 'Current'">{{$root.workEndDate(w_index)}}</span>
|
||||
|
|
@ -843,7 +878,7 @@
|
|||
<div class="w3-container">
|
||||
<h5 class="w3-opacity"><b>{{vol.organization}}</b></h5>
|
||||
<p>{{vol.position}}</p>
|
||||
<p><a v-bind:href="vol.website">{{vol.website}}</a></p>
|
||||
<p v-if="vol.website"><a v-bind:href="vol.website">{{vol.website}}</a></p>
|
||||
<h6 class="w3-text-teal"><i class="fa fa-calendar fa-fw w3-margin-right"></i>{{vol.startDate}} - {{vol.endDate}}</h6>
|
||||
<div v-html="vol.summary"></div>
|
||||
|
||||
|
|
@ -884,7 +919,7 @@
|
|||
<!-- /Education -->
|
||||
|
||||
<!-- Awards -->
|
||||
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32">
|
||||
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.awards.length > 0">
|
||||
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Awards</h2>
|
||||
|
||||
<div class="w3-container" v-for="(award, a_index) in $root.sections.awards">
|
||||
|
|
@ -901,7 +936,7 @@
|
|||
<!-- /Awards -->
|
||||
|
||||
<!-- Publications -->
|
||||
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32">
|
||||
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.publications.length > 0">
|
||||
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Publications</h2>
|
||||
|
||||
<div class="w3-container" v-for="(publication, p_index) in $root.sections.publications">
|
||||
|
|
@ -917,7 +952,7 @@
|
|||
<!-- /Publications -->
|
||||
|
||||
<!-- Skills -->
|
||||
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32">
|
||||
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.skills.length > 0">
|
||||
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Skills</h2>
|
||||
|
||||
<div class="w3-container" v-for="(skill, s_index) in $root.sections.skills">
|
||||
|
|
@ -937,7 +972,7 @@
|
|||
<!-- /Skills -->
|
||||
|
||||
<!-- Interests -->
|
||||
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32">
|
||||
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.interests.length > 0">
|
||||
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Interests</h2>
|
||||
|
||||
<div class="w3-container" v-for="(interest, i_index) in $root.sections.interests">
|
||||
|
|
@ -956,7 +991,7 @@
|
|||
<!-- /Interests -->
|
||||
|
||||
<!-- References -->
|
||||
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32">
|
||||
<div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.references.length > 0">
|
||||
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-certificate fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>References</h2>
|
||||
|
||||
<div class="w3-container" v-for="(reference, index) in $root.sections.references">
|
||||
|
|
@ -1012,6 +1047,44 @@
|
|||
|
||||
|
||||
|
||||
<template type="text/x-template" id="card-header-template" lang="html">
|
||||
<div id="card-header-root">
|
||||
<header class="w3-container w3-dark-grey w3-padding-16" v-bind:id="'header' + id">
|
||||
<div class="w3-row">
|
||||
<div class="w3-col s9" v-on:click="$root.invertCollapse('content' + id)" style="cursor: pointer;">
|
||||
<div style="width: 100%;" v-html="getLabel()"></div>
|
||||
</div>
|
||||
<div class="w3-col s3 w3-right-align">
|
||||
<i class="fas fa-times w3-margin-right" style="cursor: pointer;" v-on:click="deleteClick"></i>
|
||||
<i class="fas fa-chevron-up" style="cursor: pointer;" v-on:click="moveUpClick"></i>
|
||||
<i class="fas fa-chevron-down" style="cursor: pointer;" v-on:click="moveDownClick"></i>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<template type="text/x-template" id="sorted-input-item-template" lang="html">
|
||||
<div id="sorted-input-item-root">
|
||||
<div class="" v-bind:id="'item' + id">
|
||||
<div class="w3-row">
|
||||
<div class="w3-col s9" style="cursor: pointer;">
|
||||
<input id="keywords[0]" class="w3-input w3-border" type="text" v-model="$root.sections.skills[s_index].keywords[k_index]">
|
||||
</div>
|
||||
<div class="w3-col s3 w3-right-align">
|
||||
<i class="fas fa-times w3-margin-right" style="cursor: pointer;" v-on:click="deleteClick"></i>
|
||||
<i class="fas fa-chevron-up" style="cursor: pointer;" v-on:click="moveUpClick"></i>
|
||||
<i class="fas fa-chevron-down" style="cursor: pointer;" v-on:click="moveDownClick"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<template type="text/x-template" id="import-template" lang="html">
|
||||
<div id="import-root">
|
||||
<p>
|
||||
|
|
@ -1072,7 +1145,7 @@
|
|||
<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="app/component_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/section_basics.js"></script>
|
||||
<script type="text/javascript" src="components/section_work.js"></script>
|
||||
|
|
@ -1086,6 +1159,7 @@
|
|||
<script type="text/javascript" src="components/section_references.js"></script>
|
||||
<script type="text/javascript" src="components/preview_resume.js"></script>
|
||||
<script type="text/javascript" src="components/preview_single_field.js"></script>
|
||||
<script type="text/javascript" src="components/card_header.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/about.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue