TomaHost/Chamilo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upgrade

Browse Source
This commit is contained in:
Xes
2025-08-14 22:37:50 +02:00
parent fb6d5d5926
commit 3641e93527
9156 changed files with 1813532 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
main/template/default/skill/badge.tpl Normal file
View File

@@ -0,0 +1,44 @@
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active">
<a href="{{ _p.web_main }}admin/skill_badge.php">{{ 'Home' | get_lang }}</a>
</li>
<li>
<a href="{{ _p.web_main }}admin/skill_badge_list.php">{{ "CurrentBadges" | get_lang }}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
<div class="openbadges-introduction">
<h1 class="title">
<img src="{{ 'badges.png' | icon(64) }}" width="64" height="64">{{ 'OpenBadgesTitle' | get_lang }}
</h1>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
{{ 'OpenBadgesBannerText' | get_lang }}
</p>
<p class="lead">
{{ 'OpenBadgesIntroduction' | get_lang }}
</p>
</div>
<div class="col-xs-12 col-md-6">
<img class="img-responsive" src="{{ 'openbadges.png' | icon() }}">
</div>
</div>
<h3 class="sub-title">{{ 'OpenBadgesActionCall' | get_lang }}</h3>
<div class="block-content">
<div class="block-title">{{ 'IssuerDetails' | get_lang }}</div>
<p>{{ 'Name' | get_lang }} : {{ _s.institution }}</p>
<p>URL: {{ _p.web }}</p>
<div class="block-title">{{ 'BackpackDetails' | get_lang }}</div>
<p>URL: {{ backpack }}</p>
<p>{{ 'TheBadgesWillBeSentToThatBackpack' | get_lang }}</p>
</div>
</div>
</div>
</div>
</div>

706
main/template/default/skill/badge_create.tpl Normal file
View File

@@ -0,0 +1,706 @@
<script>
(function () {
var designer = null;
$(document).on('ready', function () {
$('.help-badges').tooltip();
$('.help-badges-img').tooltip();
});
$(document).on('ready', function () {
$('#image').on('change', function () {
var self = this;
if (self.files.length > 0) {
var image = self.files[0];
if (!image.type.match(/image.*/)) {
return;
}
var fileReader = new FileReader();
fileReader.onload = function (e) {
$('#badge-preview').attr('src', e.target.result);
$('#badge-container').removeClass('hide');
};
fileReader.readAsDataURL(image);
}
});
});
})();
</script>
<div class="row">
<div class="col-md-9">
<form action="{{ _p.web_self_query_vars }}" class="form-horizontal" method="post" enctype="multipart/form-data">
<legend>
{{ skill.name }}
</legend>
<fieldset>
<div class="form-group">
<label class="col-sm-2 control-label" for="image">{{ 'Image' | get_lang }}</label>
<div class="col-sm-10">
<input data-placement="left" data-toggle="tooltip" title="{{ "BadgeMeasuresXPixelsInPNG" | get_lang }}" type="file" name="image" id="image" class="help-badges-img" accept="image/*">
</div>
</div>
<div class="form-group collapse" id="badge-studio-frame">
<label class="col-sm-2 control-label" for="criteria"></label>
<div class="col-sm-10">
<h1 class="title">Badge Studio</h1>
<div class="" id="studio">
<div id="input">
<div class="row">
<div class="col-md-4">
<h3 class="label"><label for="studio-mask">{{ "Templates" | get_lang }}</label></h3>
<select name="template" class="form-control" id="studio-template" data-path="{{ badge_studio.templates }}">
<option value="template-1">{{ "Template" | get_lang }} 1</option>
<option value="template-2">{{ "Template" | get_lang }} 2</option>
<option value="template-3">{{ "Template" | get_lang }} 3</option>
</select>
<h3 class="label"><label for="studio-mask">{{ "Palettes" | get_lang }}</label></h3>
<select name="palette" class="form-control" id="studio-palette">
<option value="palette-1"
data-color-background="#CE001F"
data-color-stitching="#FFF"
data-color-border="#4C4F53"
data-color-detail="#999"
data-color-glyph="#FFF">{{ "Palette" | get_lang }} 1</option>
<option value="palette-2"
data-color-background="#04A"
data-color-stitching="#0AE"
data-color-border="#0AE"
data-color-detail="#FFF"
data-color-glyph="#FFF">{{ "Palette" | get_lang }} 2</option>
<option value="palette-3"
data-color-background="#11458B"
data-color-stitching="#3EB48D"
data-color-border="#3EB48D"
data-color-detail="#FFF"
data-color-glyph="#FFF">{{ "Palette" | get_lang }} 3</option>
</select>
<br />
<h3 class="label"><label for="studio-mask">{{ "Colors" | get_lang }}</label></h3>
<div id="custom-palette"></div>
</div>
<div class="col-md-8">
<div id="output"></div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h3 class="label"><label for="studio-mask">{{ "Mask" | get_lang }}</label></h3>
<p class="item">
<select name="mask" class="form-control" id="studio-mask" data-path="{{ badge_studio.masks }}">
<option value="">{{ "None" | get_lang }}</option>
<option value="lines">{{ "Lines" | get_lang }}</option>
</select>
</p>
</div>
<div class="col-md-3">
<h3 class="label"><label for="studio-options">{{ "Options" | get_lang }}</label></h3>
<p class="item" id="options">
<i>None</i>
</p>
</div>
<div class="col-md-6">
<h3 class="label"><label for="studio-glyph">{{ "Icon" | get_lang }}</label></h3>
<p class="item">
<select name="glyph" class="form-control" id="studio-glyph">
<option value="">None</option>
<option value="ambulance">Ambulance</option>
<option value="anchor">Anchor</option>
<option value="android">Android</option>
<option value="angle-down">Angle: Down</option>
<option value="angle-double-down">Angle: Down (Double)</option>
<option value="angle-left">Angle: Left</option>
<option value="angle-double-left">Angle: Left (Double)</option>
<option value="angle-right">Angle: Right</option>
<option value="angle-double-right">Angle: Right (Double)</option>
<option value="angle-up">Angle: Up</option>
<option value="angle-double-up">Angle: Up (Double)</option>
<option value="apple">Apple</option>
<option value="archive">Archive</option>
<option value="arrow-down">Arrow: Down</option>
<option value="arrow-circle-down">Arrow: Down (Circle)</option>
<option value="arrow-circle-o-down">Arrow: Down (Circle-O)</option>
<option value="arrow-left">Arrow (Left)</option>
<option value="arrow-circle-left">Arrow: Left (Circle)</option>
<option value="arrow-circle-o-left">Arrow: Left (Circle-O)</option>
<option value="arrow-right">Arrow: Right</option>
<option value="arrow-circle-right">Arrow: Right (Circle)</option>
<option value="arrow-circle-o-right">Arrow: Right (Circle-O)</option>
<option value="arrow-up">Arrow: Up</option>
<option value="arrow-circle-up">Arrow: Up (Circle)</option>
<option value="arrow-circle-o-up">Arrow: Up (Circle-O)</option>
<option value="arrows">Arrows</option>
<option value="arrows-alt">Arrows (Alt)</option>
<option value="arrows-h">Arrows: Horizontal</option>
<option value="arrows-v">Arrows: Vertical</option>
<option value="asterisk">Asterisk</option>
<option value="automobile">Automobile</option>
<option value="backward">Backward</option>
<option value="ban">Ban</option>
<option value="bank">Bank</option>
<option value="bar-chart-o">Bar Chart (O)</option>
<option value="barcode">Barcode</option>
<option value="bars">Bars</option>
<option value="beer">Beer</option>
<option value="behance">Behance</option>
<option value="behance-square">Behance (Square)</option>
<option value="bell">Bell</option>
<option value="bell-o">Bell (O)</option>
<option value="bitbucket">BitBucket</option>
<option value="bitbucket-square">BitBucket (Square)</option>
<option value="bitcoin">Bitcoin</option>
<option value="bold">Bold</option>
<option value="bolt">Bolt</option>
<option value="bomb">Bomb</option>
<option value="book">Book</option>
<option value="bookmark">Bookmark</option>
<option value="bookmark-o">Bookmark (O)</option>
<option value="briefcase">Briefcase</option>
<option value="btc">BTC</option>
<option value="bug">Bug</option>
<option value="building">Building</option>
<option value="building-o">Building (O)</option>
<option value="bullhorn">Bullhorn</option>
<option value="bullseye">Bullseye</option>
<option value="cab">Cab</option>
<option value="calendar">Calendar</option>
<option value="calendar-o">Calendar (O)</option>
<option value="camera">Camera</option>
<option value="camera-retro">Camera (Retro)</option>
<option value="car">Car</option>
<option value="caret-down">Caret: Down</option>
<option value="caret-square-o-down">Caret: Down (Square-O)</option>
<option value="caret-left">Caret: Left</option>
<option value="caret-square-o-left">Caret: Left (Square-O)</option>
<option value="caret-right">Caret: Right</option>
<option value="caret-square-o-right">Caret: Right (Square-O)</option>
<option value="caret-up">Caret: Up</option>
<option value="caret-square-o-up">Caret: Up (Square-O)</option>
<option value="certificate">Certificate</option>
<option value="chain">Chain</option>
<option value="chain-broken">Chain (Broken)</option>
<option value="check">Check</option>
<option value="check-circle">Check (Circle)</option>
<option value="check-circle-o">Check (Circle-O)</option>
<option value="check-square">Check (Square)</option>
<option value="check-square-o">Check (Square-O)</option>
<option value="chevron-down">Chevron: Down</option>
<option value="chevron-circle-down">Chevron: Down (Circle)</option>
<option value="chevron-left">Chevron: Left</option>
<option value="chevron-circle-left">Chevron: Left (Circle)</option>
<option value="chevron-right">Chevron: Right</option>
<option value="chevron-circle-right">Chevron: Right (Circle)</option>
<option value="chevron-up">Chevron: Up</option>
<option value="chevron-circle-up">Chevron: Up (Circle)</option>
<option value="child">Child</option>
<option value="circle">Circle</option>
<option value="circle-o">Circle (O)</option>
<option value="circle-o-notch">Circle (O Notch)</option>
<option value="circle-thin">Circle (Thin)</option>
<option value="clipboard">Clipboard</option>
<option value="clock-o">Clock (O)</option>
<option value="cloud">Cloud</option>
<option value="cloud-download">Cloud: Download</option>
<option value="cloud-upload">Cloud: Upload</option>
<option value="cny">CNY</option>
<option value="code">Code</option>
<option value="code-fork">Code (Fork)</option>
<option value="codepen">Codepen</option>
<option value="coffee">Coffee</option>
<option value="cog">Cog</option>
<option value="cogs">Cogs</option>
<option value="columns">Columns</option>
<option value="comment">Comment</option>
<option value="comment-o">Comment (O)</option>
<option value="comments">Comments</option>
<option value="comments-o">Comments (O)</option>
<option value="compass">Compass</option>
<option value="compress">Compress</option>
<option value="copy">Copy</option>
<option value="credit-card">Credit (Card)</option>
<option value="crop">Crop</option>
<option value="crosshairs">Crosshairs</option>
<option value="css3">CSS3</option>
<option value="cube">Cube</option>
<option value="cubes">Cubes</option>
<option value="cut">Cut</option>
<option value="cutlery">Cutlery</option>
<option value="dashboard">Dashboard</option>
<option value="database">Database</option>
<option value="dedent">Dedent</option>
<option value="delicious">Delicious</option>
<option value="desktop">Desktop</option>
<option value="deviantart">Deviantart</option>
<option value="digg">Digg</option>
<option value="dollar">Dollar</option>
<option value="dot-circle-o">Dot (Circle-O)</option>
<option value="download">Download</option>
<option value="dribbble">Dribbble</option>
<option value="dropbox">Dropbox</option>
<option value="drupal">Drupal</option>
<option value="edit">Edit</option>
<option value="eject">Eject</option>
<option value="ellipsis-h">Ellipsis (Horizontal)</option>
<option value="ellipsis-v">Ellipsis (Vertical)</option>
<option value="empire">Empire</option>
<option value="envelope">Envelope</option>
<option value="envelope-o">Envelope (O)</option>
<option value="envelope-square">Envelope (Square)</option>
<option value="eraser">Eraser</option>
<option value="eur">EUR</option>
<option value="euro">Euro</option>
<option value="exchange">Exchange</option>
<option value="exclamation">Exclamation</option>
<option value="exclamation-circle">Exclamation (Circle)</option>
<option value="exclamation-triangle">Exclamation (Triangle)</option>
<option value="expand">Expand</option>
<option value="external-link">External Link</option>
<option value="external-link-square">External Link (Square)</option>
<option value="eye">Eye</option>
<option value="eye-slash">Eye (Slash)</option>
<option value="facebook">Facebook</option>
<option value="facebook-square">Facebook (Square)</option>
<option value="fast-backward">Fast Rewind</option>
<option value="fast-forward">Fast Forward</option>
<option value="fax">Fax</option>
<option value="female">Female</option>
<option value="fighter-jet">Fighter Jet</option>
<option value="file">File</option>
<option value="file-o">File (O)</option>
<option value="files-o">Files (O)</option>
<option value="file-archive-o">File: Archive (O)</option>
<option value="file-audio-o">File: Audio (O)</option>
<option value="file-code-o">File: Code (O)</option>
<option value="file-excel-o">File: Excel (O)</option>
<option value="file-image-o">File: Image (O)</option>
<option value="file-movie-o">File: Movie (O)</option>
<option value="file-pdf-o">File: PDF (O)</option>
<option value="file-photo-o">File: Photo (O)</option>
<option value="file-picture-o">File: Picture (O)</option>
<option value="file-powerpoint-o">File: Powerpoint (O)</option>
<option value="file-sound-o">File: Sound (O)</option>
<option value="file-text">File: Text</option>
<option value="file-text-o">File: Text (O)</option>
<option value="file-video-o">File: Video (O)</option>
<option value="file-word-o">File: Word (O)</option>
<option value="file-zip-o">File: Zip (O)</option>
<option value="film">Film</option>
<option value="filter">Filter</option>
<option value="fire">Fire</option>
<option value="fire-extinguisher">Fire Extinguisher</option>
<option value="flag">Flag</option>
<option value="flag-o">Flag (O)</option>
<option value="flag-checkered">Flag: Checkered</option>
<option value="flash">Flash</option>
<option value="flask">Flask</option>
<option value="flickr">Flickr</option>
<option value="floppy-o">Floppy (O)</option>
<option value="folder">Folder</option>
<option value="folder-o">Folder (O)</option>
<option value="folder-open">Folder: Open</option>
<option value="folder-open-o">Folder: Open (O)</option>
<option value="font">Font</option>
<option value="forward">Forward</option>
<option value="foursquare">Foursquare</option>
<option value="frown-o">Frown (O)</option>
<option value="gamepad">Gamepad</option>
<option value="gavel">Gavel</option>
<option value="gbp">GBP</option>
<option value="ge">Ge</option>
<option value="gear">Gear</option>
<option value="gears">Gears</option>
<option value="gift">Gift</option>
<option value="git">Git</option>
<option value="git-square">Git (Square)</option>
<option value="github">GitHub</option>
<option value="github-alt">GitHub (Alt)</option>
<option value="github-square">GitHub (Square)</option>
<option value="gittip">GitTip</option>
<option value="glass">Glass</option>
<option value="globe">Globe</option>
<option value="google">Google</option>
<option value="google-plus">Google Plus</option>
<option value="google-plus-square">Google Plus (Square)</option>
<option value="graduation-cap">Graduation (Cap)</option>
<option value="group">Group</option>
<option value="h-square">H (Square)</option>
<option value="hacker-news">Hacker News</option>
<option value="hand-o-down">Hand: Down (O)</option>
<option value="hand-o-left">Hand: Left (O)</option>
<option value="hand-o-right">Hand: Right (O)</option>
<option value="hand-o-up">Hand: Up (O)</option>
<option value="hdd-o">HDD (O)</option>
<option value="header">Header</option>
<option value="headphones">Headphones</option>
<option value="heart">Heart</option>
<option value="heart-o">Heart (O)</option>
<option value="history">History</option>
<option value="home">Home</option>
<option value="hospital-o">Hospital (O)</option>
<option value="html5">HTML5</option>
<option value="image">Image</option>
<option value="inbox">Inbox</option>
<option value="indent">Indent</option>
<option value="info">Info</option>
<option value="info-circle">Info (Circle)</option>
<option value="inr">Inr</option>
<option value="instagram">Instagram</option>
<option value="institution">Institution</option>
<option value="italic">Italic</option>
<option value="joomla">Joomla</option>
<option value="jpy">JPY</option>
<option value="jsfiddle">JSFiddle</option>
<option value="key">Key</option>
<option value="keyboard-o">Keyboard (O)</option>
<option value="krw">KRW</option>
<option value="language">Language</option>
<option value="laptop">Laptop</option>
<option value="leaf">Leaf</option>
<option value="legal">Legal</option>
<option value="lemon-o">Lemon (O)</option>
<option value="level-down">Level Down</option>
<option value="level-up">Level Up</option>
<option value="life-bouy">Life Bouy</option>
<option value="life-ring">Life Ring</option>
<option value="life-saver">Life Saver</option>
<option value="lightbulb-o">Lightbulb (O)</option>
<option value="link">Link</option>
<option value="linkedin">LinkedIn</option>
<option value="linkedin-square">LinkedIn (Square)</option>
<option value="linux">Linux</option>
<option value="list">List</option>
<option value="list-alt">List (Alt)</option>
<option value="list-ol">List (Ol)</option>
<option value="list-ul">List (Ul)</option>
<option value="location-arrow">Location (Arrow)</option>
<option value="lock">Lock</option>
<option value="long-arrow-down">Long Arrow Down</option>
<option value="long-arrow-left">Long Arrow Left</option>
<option value="long-arrow-right">Long Arrow Right</option>
<option value="long-arrow-up">Long Arrow Up</option>
<option value="magic">Magic</option>
<option value="magnet">Magnet</option>
<option value="mail-forward">Mail: Forward</option>
<option value="mail-reply">Mail: Reply</option>
<option value="mail-reply-all">Mail: Reply All</option>
<option value="male">Male</option>
<option value="map-marker">Map Marker</option>
<option value="maxcdn">MaxCDN</option>
<option value="medkit">Medkit</option>
<option value="meh-o">Meh (O)</option>
<option value="microphone">Microphone</option>
<option value="microphone-slash">Microphone (Slash)</option>
<option value="minus">Minus</option>
<option value="minus-circle">Minus (Circle)</option>
<option value="minus-square">Minus (Square)</option>
<option value="minus-square-o">Minus (Square O)</option>
<option value="mobile">Mobile</option>
<option value="mobile-phone">Mobile Phone</option>
<option value="money">Money</option>
<option value="moon-o">Moon (O)</option>
<option value="mortar-board">Mortar Board</option>
<option value="music">Music</option>
<option value="navicon">Navicon</option>
<option value="openid">Openid</option>
<option value="outdent">Outdent</option>
<option value="pagelines">Pagelines</option>
<option value="paper-plane">Paper Plane</option>
<option value="paper-plane-o">Paper Plane (O)</option>
<option value="paperclip">Paper Clip</option>
<option value="paragraph">Paragraph</option>
<option value="paste">Paste</option>
<option value="pause">Pause</option>
<option value="paw">Paw</option>
<option value="pencil">Pencil</option>
<option value="pencil-square">Pencil (Square)</option>
<option value="pencil-square-o">Pencil (Square-O)</option>
<option value="phone">Phone</option>
<option value="phone-square">Phone (Square)</option>
<option value="photo">Photo</option>
<option value="picture-o">Picture (O)</option>
<option value="pied-piper">Pied Piper</option>
<option value="pied-piper-alt">Pied Piper (Alt)</option>
<option value="pied-piper-square">Pied Piper (Square)</option>
<option value="pinterest">Pinterest</option>
<option value="pinterest-square">Pinterest (Square)</option>
<option value="plane">Plane</option>
<option value="play">Play</option>
<option value="play-circle">Play (Circle)</option>
<option value="play-circle-o">Play (Circle-O)</option>
<option value="plus">Plus</option>
<option value="plus-circle">Plus (Circle)</option>
<option value="plus-square">Plus (Square)</option>
<option value="plus-square-o">Plus (Square-O)</option>
<option value="power-off">Power Off</option>
<option value="print">Print</option>
<option value="puzzle-piece">Puzzle Piece</option>
<option value="qq">Qq</option>
<option value="qrcode">QR Code</option>
<option value="question">Question</option>
<option value="question-circle">Question (Circle)</option>
<option value="quote-left">Quote: Left</option>
<option value="quote-right">Quote: Right</option>
<option value="ra">Ra</option>
<option value="random">Random</option>
<option value="rebel">Rebel</option>
<option value="recycle">Recycle</option>
<option value="reddit">Reddit</option>
<option value="reddit-square">Reddit (Square)</option>
<option value="refresh">Refresh</option>
<option value="renren">Renren</option>
<option value="reorder">Reorder</option>
<option value="repeat">Repeat</option>
<option value="reply">Reply</option>
<option value="reply-all">Reply All</option>
<option value="retweet">Retweet</option>
<option value="rmb">Rmb</option>
<option value="road">Road</option>
<option value="rocket">Rocket</option>
<option value="rotate-left">Rotate Left</option>
<option value="rotate-right">Rotate Right</option>
<option value="rouble">Rouble</option>
<option value="rss">RSS</option>
<option value="rss-square">RSS (Square)</option>
<option value="rub">Rub</option>
<option value="ruble">Ruble</option>
<option value="rupee">Rupee</option>
<option value="save">Save</option>
<option value="scissors">Scissors</option>
<option value="search">Search</option>
<option value="search-minus">Search: Minus</option>
<option value="search-plus">Search: Plus</option>
<option value="send">Send</option>
<option value="send-o">Send (O)</option>
<option value="share">Share</option>
<option value="share-alt">Share (Alt)</option>
<option value="share-alt-square">Share (Alt Square)</option>
<option value="share-square">Share (Square)</option>
<option value="share-square-o">Share (Square-O)</option>
<option value="shield">Shield</option>
<option value="shopping-cart">Shopping Cart</option>
<option value="sign-in">Sign In</option>
<option value="sign-out">Sign Out</option>
<option value="signal">Signal</option>
<option value="sitemap">Sitemap</option>
<option value="skype">Skype</option>
<option value="slack">Slack</option>
<option value="sliders">Sliders</option>
<option value="smile-o">Smile (O)</option>
<option value="sort">Sort</option>
<option value="sort-asc">Sort: Asc</option>
<option value="sort-desc">Sort: Desc</option>
<option value="sort-down">Sort: Down</option>
<option value="sort-up">Sort: Up</option>
<option value="sort-alpha-asc">Sort: Alpha Asc</option>
<option value="sort-alpha-desc">Sort: Alpha Desc</option>
<option value="sort-amount-asc">Sort: Amount Asc</option>
<option value="sort-amount-desc">Sort: Amount Desc</option>
<option value="sort-numeric-asc">Sort: Numeric Asc</option>
<option value="sort-numeric-desc">Sort: Numeric Desc</option>
<option value="soundcloud">Soundcloud</option>
<option value="space-shuttle">Space Shuttle</option>
<option value="spinner">Spinner</option>
<option value="spoon">Spoon</option>
<option value="spotify">Spotify</option>
<option value="square">Square</option>
<option value="square-o">Square (O)</option>
<option value="stack-exchange">Stack Exchange</option>
<option value="stack-overflow">Stack Overflow</option>
<option value="star">Star</option>
<option value="star-half">Star (Half)</option>
<option value="star-half-empty">Star (Half Empty)</option>
<option value="star-half-full">Star (Half Full)</option>
<option value="star-half-o">Star (Half O)</option>
<option value="star-o">Star (O)</option>
<option value="steam">Steam</option>
<option value="steam-square">Steam (Square)</option>
<option value="step-backward">Step Backward</option>
<option value="step-forward">Step Forward</option>
<option value="stethoscope">Stethoscope</option>
<option value="stop">Stop</option>
<option value="strikethrough">Strikethrough</option>
<option value="stumbleupon">Stumbleupon</option>
<option value="stumbleupon-circle">Stumbleupon (Circle)</option>
<option value="subscript">Subscript</option>
<option value="suitcase">Suitcase</option>
<option value="sun-o">Sun (O)</option>
<option value="superscript">Superscript</option>
<option value="support">Support</option>
<option value="table">Table</option>
<option value="tablet">Tablet</option>
<option value="tachometer">Tachometer</option>
<option value="tag">Tag</option>
<option value="tags">Tags</option>
<option value="tasks">Tasks</option>
<option value="taxi">Taxi</option>
<option value="tencent-weibo">Tencent Weibo</option>
<option value="terminal">Terminal</option>
<option value="text-height">Text Height</option>
<option value="text-width">Text Width</option>
<option value="th">Th</option>
<option value="th-large">Th (Large)</option>
<option value="th-list">Th (List)</option>
<option value="thumb-tack">Thumb Tack</option>
<option value="thumbs-down">Thumbs Down</option>
<option value="thumbs-o-down">Thumbs Down (O)</option>
<option value="thumbs-up">Thumbs Up</option>
<option value="thumbs-o-up">Thumbs Up (O)</option>
<option value="ticket">Ticket</option>
<option value="times">Times</option>
<option value="times-circle">Times (Circle)</option>
<option value="times-circle-o">Times (Circle O)</option>
<option value="tint">Tint</option>
<option value="toggle-down">Toggle Down</option>
<option value="toggle-left">Toggle Left</option>
<option value="toggle-right">Toggle Right</option>
<option value="toggle-up">Toggle Up</option>
<option value="trash-o">Trash (O)</option>
<option value="tree">Tree</option>
<option value="trello">Trello</option>
<option value="trophy">Trophy</option>
<option value="truck">Truck</option>
<option value="try">Try</option>
<option value="tumblr">Tumblr</option>
<option value="tumblr-square">Tumblr (Square)</option>
<option value="turkish-lira">Turkish Lira</option>
<option value="twitter">Twitter</option>
<option value="twitter-square">Twitter (Square)</option>
<option value="umbrella">Umbrella</option>
<option value="underline">Underline</option>
<option value="undo">Undo</option>
<option value="university">University</option>
<option value="unlink">Unlink</option>
<option value="unlock">Unlock</option>
<option value="unlock-alt">Unlock (Alt)</option>
<option value="unsorted">Unsorted</option>
<option value="upload">Upload</option>
<option value="usd">USD</option>
<option value="user">User</option>
<option value="user-md">User (MD)</option>
<option value="users">Users</option>
<option value="video-camera">Video (Camera)</option>
<option value="vimeo-square">Vimeo (Square)</option>
<option value="vine">Vine</option>
<option value="vk">Vk</option>
<option value="volume-up">Volume Up</option>
<option value="volume-down">Volume Down</option>
<option value="volume-off">Volume Off</option>
<option value="warning">Warning</option>
<option value="wechat">Wechat</option>
<option value="weibo">Weibo</option>
<option value="weixin">Weixin</option>
<option value="wheelchair">Wheelchair</option>
<option value="windows">Windows</option>
<option value="won">Won</option>
<option value="wordpress">Wordpress</option>
<option value="wrench">Wrench</option>
<option value="xing">Xing</option>
<option value="xing-square">Xing (Square)</option>
<option value="yahoo">Yahoo</option>
<option value="yen">Yen</option>
<option value="youtube">Youtube</option>
<option value="youtube-play">Youtube (Play)</option>
<option value="youtube-square">Youtube (Square)</option>
</select>
</p>
<h3 class="label"><label for="size-glyph">{{ "Size" | get_lang }}</label></h3>
<p class="item">
<select name="size-glyph" class="form-control" id="size-glyph">
<option value="big">{{ "Big" | get_lang }}</option>
<option value="medium" selected>{{ "Medium" | get_lang }}</option>
<option value="small">{{ "Small" | get_lang }}</option>
</select>
</p>
</div>
<div class="col-md-12 text-center">
<a id="set-custom-badge" class="btn btn-primary"><em class="fa fa-check"></em> {{ 'UseThisBadge' | get_lang }}</a>
<input type="hidden" id="badge_studio_image" name="badge_studio_image" >
</div>
</div>
</div>
</div>
</div>
<template id="glyph-selector-template">
<div id="glyph-selector" role="dialog" class="overlay hidden" aria-label="Select a glyph" tabIndex="0">
<div class="header">
<label class="title"></label>
</div>
<div class="panel">
<ul>
</ul>
</div>
</div>
</template>
<template id="glyph-selector-item-template">
<li>
<input type="radio" name="glyph-selector-item" class="hidden">
<label></label>
</li>
</template>
<template id="option-template">
<label>
<input type="checkbox">
<span>Label</span>
</label>
</template>
<template id="close-button-template">
<button type="button" class="close fa fa-times-circle-o" aria-label="Close"></button>
</template>
<template id="custom-color-template">
<label>
<input type="color">
<span>Label</span>
</label>
</template>
</div>
</fieldset>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary btn-large"><em class="fa fa-plus"></em>
{{ 'SaveBadge'| get_lang }}
</button>
</div>
</div>
</form>
</div>
<div class="col-md-3">
<div class="openbadges-img" id="badge-container">
<img id="badge-preview" class="img-responsive" alt="{{ 'BadgePreview' | get_lang }}" src="{{ skill.icon_big }}">
</div>
<div class="create-openbadges">
<a id="btn-open-designer" href="https://badge.design" class="btn btn-primary btn-large btn-block"
target="_blank" title="{{ 'DesignANewBadgeComment' | get_lang }}">
<em class="fa fa-pencil"></em> {{ 'DesignNewBadge' | get_lang }}
</a>
</div>
<div class="create-openbadges">
<button id="btn-open-badge-studio" class="help-badges btn btn-default btn-large btn-block" data-toggle="collapse" data-target="#badge-studio-frame" aria-expanded="false" aria-controls="badge-studio-frame" title="{{ 'DesignWithBadgeStudioComment' | get_lang }}" type="button">
<em class="fa fa-cogs"></em> {{ 'DesignWithBadgeStudio' | get_lang }}
</button>
</div>
</div>
</div>
{{ badge_studio.script_js }}
<script>
$(document).ready(function() {
$('#set-custom-badge').click(function () {
var data = $('#raster').attr('src');
$('#badge_studio_image').val(data);
$('#badge-preview').attr('src', data);
$('#badge-container').removeClass('hide');
});
$('#size-glyph').change(function () {
window.size = $(this).val();
updateGlyph();
});
})
</script>

46
main/template/default/skill/badge_list.tpl Normal file
View File

@@ -0,0 +1,46 @@
<div class="col-md-12">
<ul class="nav nav-tabs">
<li>
<a href="{{ _p.web_main }}admin/skill_badge.php">{{ 'Home' | get_lang }}</a>
</li>
<li class="active">
<a href="{{ _p.web_main }}admin/skill_badge_list.php">{{ "CurrentBadges" | get_lang }}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active">
<div class="openbadges-introduction">
<table class="table">
<thead>
<tr>
<th>{{ 'Badges' | get_lang }}</th>
<th>{{ 'Name' | get_lang }}</th>
<th>{{ 'Description' | get_lang }}</th>
<th>{{ 'Actions' | get_lang }}</th>
</tr>
</thead>
<tbody>
{% for skill in skills %}
<tr>
<td>
{{ skill.img_small }}
</td>
<td>
{{ skill.name }}
</td>
<td>{{ skill.description }}</td>
<td>
<a href="{{ _p.web_main }}admin/skill_badge_create.php?id={{ skill.id }}" class="btn btn-primary btn-sm" title="{{ "CreateBadge" | get_lang }}">
<em class="fa fa-shield fa-fw"></em>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>

24
main/template/default/skill/criteria.tpl Normal file
View File

@@ -0,0 +1,24 @@
<h2 class="page-header">{{ 'BadgeDetails'|get_lang }}</h2>
<article>
<div class="row">
<div class="col-md-3">
<figure class="thumbnail">
<img class="img-responsive" src="{{ skill_info.badge_image }}" alt="{{ skill_info.name }}">
<figcaption class="caption">
<p class="name-badge text-center">{{ skill_info.name }}</p>
{% if skill_info.short_code %}
<p class="code-badge text-center"><i class="fa fa-shield"></i> {{ skill_info.short_code }}</p>
{% endif %}
</figcaption>
</figure>
</div>
<div class="col-md-9">
<h4 class="title-badge">{{ 'Name'|get_lang }}</h4>
<p class="lead">{{ skill_info.name }}</p>
<h4 class="title-badge">{{ 'Description'|get_lang }}</h4>
<p>{{ skill_info.description }}</p>
<h4 class="title-badge">{{ 'CriteriaToEarnTheBadge'|get_lang }}</h4>
<p>{{ skill_info.criteria }}</p>
</div>
</div>
</article>

86
main/template/default/skill/drh_report.tpl Normal file
View File

@@ -0,0 +1,86 @@
{% if allow_skill_tool %}
<div class="btn-group">
<a class="btn btn-default" href="{{ _p.web_main }}social/skills_wheel.php">
{{ 'SkillsWheel' | get_lang }}
</a>
{% if allow_drh_skills_management %}
<a class="btn btn-default" href="{{ _p.web_main }}admin/skills_wheel.php">
{{ 'ManageSkills' | get_lang }}
</a>
{% endif %}
</div>
{% endif %}
<h1 class="page-header">{{ 'Skills' | get_lang }}</h1>
<div class="row">
<div class="col-md-6">
<form class="form-inline" method="post" action="{{ _p.web_self }}">
<label for="course">{{ 'Courses' | get_lang }}</label>
<select name="course" id="course" class="form-control">
<option value="0">{{ 'Select' | get_lang }}</option>
{% for course in courses %}
<option value="{{ course.id }}" {{ (course.id == selected_course) ? 'selected' : '' }}>{{ course.title }}</option>
{% endfor %}
</select>
<button type="submit" class="btn btn-default">
<span class="fa fa-filter" aria-hidden="true"></span>
{{ 'Filter' | get_lang }}
</button>
</form>
</div>
<div class="col-md-6">
<form class="form-inline" method="post" action="{{ _p.web_self }}">
<label for="skill">{{ 'Skills' | get_lang }}</label>
<select name="skill" id="skill" class="form-control">
<option value="0">{{ 'Select' | get_lang }}</option>
{% for skill in skills %}
<option value="{{ skill.id }}" {{ (skill.id == selected_skill) ? 'selected' : '' }}>
{{ skill.name }}
</option>
{% endfor %}
</select>
<button type="submit" class="btn btn-default">
<span class="fa fa-filter" aria-hidden="true"></span>
{{ 'Filter' | get_lang }}
</button>
</form>
</div>
</div>
<h2 class="page-header">{{ report_title }}</h2>
{% if rows %}
<table class="table">
<thead>
<tr>
{% if action == 'filterByCourse' %}
<th>{{ 'Course' | get_lang }}</th>
<th>{{ 'Skill' | get_lang }}</th>
<th>{{ 'Student' | get_lang }}</th>
<th>{{ 'Date' | get_lang }}</th>
{% elseif action == 'filterBySkill' %}
<th>{{ 'Skill' | get_lang }}</th>
<th>{{ 'Student' | get_lang }}</th>
<th>{{ 'Date' | get_lang }}</th>
<th>{{ 'Course' | get_lang }}</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for row in rows %}
<tr>
{% if action == 'filterByCourse' %}
<td><img src="{{ row.courseImage }}" alt="{{ row.c_name }}"> {{ row.c_name }}</td>
<td>{{ row.skill_name }}</td>
<td>{{ row.complete_name }}</td>
<td>{{ row.achieved_at }}</td>
{% elseif action == 'filterBySkill' %}
<td>{{ row.skill_name }}</td>
<td>{{ row.complete_name }}</td>
<td>{{ row.achieved_at }}</td>
<td><img src="{{ row.course_image }}" alt="{{ row.c_name }}"> {{ row.c_name }}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}

166
main/template/default/skill/issued.tpl Normal file
View File

@@ -0,0 +1,166 @@
<div class="row issued">
<div class="col-md-5">
<div class="thumbnail">
<figure class="text-center">
<img class="img-responsive center-block" src="{{ issue_info.skill_badge_image }}" alt="{{ issue_info.skill_name }}">
<figcaption>
<p class="lead">{{ issue_info.skill_name }}</p>
{% if issue_info.skill_short_code %}
<p>{{ issue_info.skill_short_code }}</p>
{% endif %}
</figcaption>
</figure>
<div class="caption">
{% if issue_info.skill_description %}
<p>{{ issue_info.skill_description }}</p>
{% endif %}
{% if issue_info.skill_criteria %}
<h4>{{ 'CriteriaToEarnTheBadge'|get_lang }}</h4>
<p>{{ issue_info.skill_criteria }}</p>
{% endif %}
</div>
</div>
{% if badge_error %}
<hr>
<div class="alert alert-danger"> {{ 'BakedBadgeProblem'|get_lang }}</div>
{% elseif not personal_badge is empty %}
<p class="text-center">
<a href="{{ personal_badge }}" class="btn btn-primary" target="_new" download="badge">
<em class="fa fa-download fa-fw"></em> {{ 'DownloadBadge'|get_lang }}
</a>
</p>
{% endif %}
{% if allow_export %}
<hr>
<p class="text-center">
<a href="#" class="btn btn-success" id="badge-export-button">
<em class="fa fa-external-link-square fa-fw"></em> {{ 'ExportBadge'|get_lang }}
</a>
</p>
<div class='col-md-12 text-center'>
<h5><b> {{ 'ShareWithYourFriends' | get_lang }} </b></h5>
<a href="http://www.facebook.com/sharer.php?u={{ _p.web }}badge/{{ issue_info.id }}" target="_new">
<em class='fa fa-facebook-square fa-3x text-info' aria-hidden='true'></em>
</a>
<a href="https://twitter.com/home?status={{ 'IHaveObtainedSkillXOnY' | get_lang |format(issue_info.skill_name, _s.site_name)}} - {{ _p.web }}badge/{{ issue_info.id }}" target="_new">
<em class='fa fa-twitter-square fa-3x text-light' aria-hidden='true'></em>
</a>
<a href="{{ 'https://www.linkedin.com/profile/add?' ~ {
'certId':issue_info.id,
'certUrl':_p.web ~ "badge/" ~ issue_info.id,
'isFromA2p':'true',
'issueMonth':issue_info.month,
'issueYear': issue_info.year,
'name':'BadgeXTitle'|get_lang|format(issue_info.skill_name),
'organizationId':issue_info.linkedin_organization_id
}|url_encode }}" target="_new">
<em class='fa fa-linkedin-square fa-3x txt-linkedin' aria-hidden='true'></em>
</a>
</div>
{% endif %}
</div>
<div class="col-md-7">
<h5>{{ 'RecipientDetails'|get_lang }}</h5>
<p class="lead">{{ issue_info.user_complete_name }}</p>
<h4>{{ 'SkillAcquiredAt'|get_lang }}</h4>
<ul class="fa-ul">
<li>
{% if issue_info.source_name %}
<em class="fa-li fa fa-clock-o fa-fw"></em>
{{ 'TimeXThroughCourseY'|get_lang|format(issue_info.datetime, issue_info.source_name) }}
{% else %}
<em class="fa-li fa fa-clock-o fa-fw"></em>
{{ issue_info.datetime }}
{% endif %}
{% if issue_info.argumentation %}
{% if issue_info.argumentation %}
<b>
<p style="font-style: italic;">
{{ 'UserXIndicated'|get_lang|format(issue_info.argumentation_author_name) }}
</p>
</b>
{% endif %}
<p>{{ issue_info.argumentation }}</p>
{% endif %}
</li>
</ul>
{% if show_level %}
<h4>{{ 'AcquiredLevel'|get_lang }}</h4>
<ul class="fa-ul">
<li>
<em class="fa-li fa fa-check-circle-o fa-fw"></em> {{ issue_info.acquired_level }}
</li>
</ul>
{% endif %}
{% if allow_comment %}
{% if show_level %}
<hr>
<div class="panel panel-info">
<div class="panel-heading">
<em class="fa fa-check-circle-o fa-fw" aria-hidden="true"></em>
{{ 'ChangeAcquiredLevel'|get_lang }}
</div>
<div class="panel-body">
{{ acquired_level_form }}
</div>
</div>
{% endif %}
<hr>
<div class="panel panel-info">
<div class="panel-heading">
<em class="fa fa-comment-o fa-fw" aria-hidden="true"></em>
{{ 'XComments'|get_lang|format(issue_info.comments|length) }}
/
<em class="fa fa-thumbs-o-up fa-fw" aria-hidden="true"></em>
{{ 'AverageRatingX'|get_lang|format(issue_info.feedback_average) }}
</div>
<div class="panel-body">
{{ comment_form }}
{% if issue_info.comments %}
<hr>
{% for comment in issue_info.comments %}
<article class="media">
<div class="media-body">
<h4 class="media-heading">{{ comment.giver_complete_name }}</h4>
<p><small>{{ comment.datetime }}</small></p>
<p>{{ comment.text }}</p>
</div>
<div class="media-right text-right">
<div style="width: 80px;">
{% if comment.value %}
<em class="fa fa-certificate fa-fw" aria-label="{{ 'AverageRating' }}"></em>
<span class="sr-only">{{ 'AverageRating' }}</span> {{ comment.value }}
{% endif %}
</div>
</div>
</article>
{% endfor %}
{% endif %}
</div>
</div>
{% else %}
<hr>
<p class="lead">
<em class="fa fa-comment-o fa-fw" aria-hidden="true"></em>
{{ 'XComments'|get_lang|format(issue_info.comments|length) }}
/
<em class="fa fa-thumbs-o-up fa-fw" aria-hidden="true"></em>
{{ 'AverageRatingX'|get_lang|format(issue_info.feedback_average) }}
</p>
{% endif %}
</div>
</div>
{% if allow_export %}
<script>
$(document).on('ready', function () {
$('#badge-export-button').on('click', function (e) {
e.preventDefault();
OpenBadges.issue({{ issue_info.badge_assertion|json_encode() }});
});
});
</script>
{% endif %}

161
main/template/default/skill/issued_all.tpl Normal file
View File

@@ -0,0 +1,161 @@
{% for badge in user_badges %}
<div class="row issued">
<div class="col-md-5">
<div class="thumbnail">
<figure class="text-center">
<img class="img-responsive center-block" src="{{ badge.issue_info.skill_badge_image }}" alt="{{ badge.issue_info.skill_name }}">
<figcaption>
<p class="lead">{{ badge.issue_info.skill_name }}</p>
{% if badge.issue_info.skill_short_code %}
<p>{{ badge.issue_info.skill_short_code }}</p>
{% endif %}
</figcaption>
</figure>
<div class="caption">
{% if badge.issue_info.skill_description %}
<p>{{ badge.issue_info.skill_description }}</p>
{% endif %}
{% if badge.issue_info.skill_criteria %}
<h3>{{ 'CriteriaToEarnTheBadge'|get_lang }}</h3>
<p>{{ badge.issue_info.skill_criteria }}</p>
{% endif %}
</div>
</div>
{% if badge.allow_download_export %}
{% if badge.badge_error %}
<hr>
<div class="alert alert-danger"> {{ 'BakedBadgeProblem'|get_lang }}</div>
{% else %}
<p class="text-center">
<a href="{{ badge.personal_badge }}" class="btn btn-primary" target="_new" download="badge">
<em class="fa fa-download fa-fw"></em> {{ 'DownloadBadge'|get_lang }}
</a>
</p>
{% endif %}
<hr>
<p class="text-center">
<a href="#" class="btn btn-success" id="badge-export-button-{{ badge.issue_info.id }}">
<em class="fa fa-external-link-square fa-fw"></em> {{ 'ExportBadge'|get_lang }}
</a>
</p>
{% if not 'hide_social_media_links'|api_get_configuration_value %}
<div class='col-md-12 text-center'>
<h5><b> {{ 'ShareWithYourFriends' | get_lang }} </b></h5>
<a href="http://www.facebook.com/sharer.php?u={{ _p.web }}badge/{{ badge.issue_info.id }}" target="_new">
<em class='fa fa-facebook-square fa-3x text-info' aria-hidden='true'></em>
</a>
<a href="https://twitter.com/home?status={{ 'IHaveObtainedSkillXOnY' | get_lang |format(badge.issue_info.skill_name, _s.site_name)}} - {{ _p.web }}badge/{{ badge.issue_info.id }}" target="_new">
<em class='fa fa-twitter-square fa-3x text-light' aria-hidden='true'></em>
</a>
<a href="{{ 'https://www.linkedin.com/profile/add?' ~ {
'certId':badge.issue_info.id,
'certUrl':_p.web ~ "badge/" ~ badge.issue_info.id,
'isFromA2p':'true',
'issueMonth':badge.issue_info.month,
'issueYear': badge.issue_info.year,
'name':'BadgeXTitle'|get_lang|format(badge.issue_info.skill_name),
'organizationId':badge.issue_info.linkedin_organization_id
}|url_encode }}" target="_new">
<em class='fa fa-linkedin-square fa-3x txt-linkedin' aria-hidden='true'></em>
</a>
</div>
{% endif %}
{% endif %}
</div>
<div class="col-md-7">
<h5>{{ 'RecipientDetails'|get_lang }}</h5>
<p class="lead">{{ badge.issue_info.user_complete_name }}</p>
<h4 class="bage-username">{{ 'SkillAcquiredAt'|get_lang }}</h4>
<ul class="fa-ul">
<li class="badge-item">
{% if badge.issue_info.source_name %}
<em class="fa fa-clock-o fa-fw"></em> {{ 'TimeXThroughCourseY'|get_lang|format(badge.issue_info.datetime, badge.issue_info.source_name) }}
{% else %}
<em class="fa fa-clock-o fa-fw"></em> {{ badge.issue_info.datetime }}
{% endif %}
{% if badge.issue_info.argumentation %}
{% if badge.issue_info.argumentation %}
<br>
<p>{{ 'UserXIndicated'|get_lang|format(badge.issue_info.argumentation_author_name) }} </p>
{% endif %}
<p class="msg">{{ badge.issue_info.argumentation }}</p>
{% endif %}
</li>
</ul>
{% if show_level %}
<h4>{{ 'AcquiredLevel'|get_lang }}</h4>
<ul class="fa-ul">
<li>
<em class="fa-li fa fa-check-circle-o fa-fw"></em> {{ badge.issue_info.acquired_level }}
</li>
</ul>
{% endif %}
{% if badge.allow_comment %}
<hr>
<div class="panel panel-info">
<div class="panel-heading">
<em class="fa fa-check-circle-o fa-fw" aria-hidden="true"></em> {{ 'ChangeAcquiredLevel'|get_lang }}
</div>
<div class="panel-body">
{{ badge.acquired_level_form }}
</div>
</div>
<hr>
<div class="panel panel-info">
<div class="panel-heading">
<em class="fa fa-comment-o fa-fw" aria-hidden="true"></em> {{ 'XComments'|get_lang|format(badge.issue_info.comments|length) }}
/
<em class="fa fa-thumbs-o-up fa-fw" aria-hidden="true"></em> {{ 'AverageRatingX'|get_lang|format(badge.issue_info.feedback_average) }}
</div>
<div class="panel-body">
{{ badge.comment_form }}
<hr>
{% for comment in badge.issue_info.comments %}
<article class="media">
<div class="media-body">
<h4 class="media-heading">{{ comment.giver_complete_name }}</h4>
<p><small>{{ comment.datetime }}</small></p>
<p>{{ comment.text }}</p>
</div>
<div class="media-right text-right">
<div style="width: 80px;">
{% if comment.value %}
<em class="fa fa-certificate fa-fw" aria-label="{{ 'AverageRating' }}"></em>
<span class="sr-only">{{ 'AverageRating' }}</span> {{ comment.value }}
{% endif %}
</div>
</div>
</article>
{% else %}
<p>{{ 'WithoutComment'|get_lang }}</p>
{% endfor %}
</div>
</div>
{% else %}
<hr>
<p class="lead">
<em class="fa fa-comment-o fa-fw" aria-hidden="true"></em> {{ 'XComments'|get_lang|format(badge.issue_info.comments|length) }}
/
<em class="fa fa-thumbs-o-up fa-fw" aria-hidden="true"></em> {{ 'AverageRatingX'|get_lang|format(badge.issue_info.feedback_average) }}
</p>
{% endif %}
</div>
</div>
{% if badge.allow_download_export %}
<script>
$(document).on('ready', function () {
$('#badge-export-button-{{ badge.issue_info.id }}').on('click', function (e) {
e.preventDefault();
OpenBadges.issue({{ badge.issue_info.badge_assertion|json_encode() }});
});
});
</script>
{% endif %}
<br />
<br />
{% endfor %}

80
main/template/default/skill/list.tpl Normal file
View File

@@ -0,0 +1,80 @@
{% if tags %}
<div class="row">
<div class="col-md-3" >
<select id="tag-filter" class="chzn-select form-control">
<option value="0">{{ 'PleaseSelectAChoice' | get_lang }}</option>
{% for tag in tags %}
<option value="{{ tag.id }}">{{ tag.tag }}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3">
<a id="filter-button" class="btn btn-default">{{ 'FilterByTags' | get_lang }}</a>
</div>
</div>
<br />
{% endif %}
<div class="table table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>{{ "Badges" | get_lang }}</th>
<th>{{ "Name" | get_lang }}</th>
<th class="text-center">{{ "ShortCode" | get_lang }}</th>
<th class="text-center">{{ "Description" | get_lang }}</th>
<th class="text-center">{{ "Options" | get_lang }}</th>
</tr>
</thead>
<tfoot>
<tr>
<th>{{ "Badges" | get_lang }}</th>
<th>{{ "Name" | get_lang }}</th>
<th class="text-center">{{ "ShortCode" | get_lang }}</th>
<th class="text-center">{{ "Description" | get_lang }}</th>
<th class="text-center">{{ "Options" | get_lang }}</th>
</tr>
</tfoot>
<tbody>
{% for skill in skills %}
<tr>
<td width="50">
{{ skill.img_small }}
</td>
<td width="200">{{ skill.name }}</td>
<td>{{ skill.short_code }}</td>
<td width="500">{{ skill.description }}</td>
<td class="text-right">
<a href="{{ _p.web_main }}admin/skill_edit.php?id={{ skill.id }}" class="btn btn-default btn-sm" title="{{ "Edit" | get_lang }}">
<em class="fa fa-pencil fa-fw"></em>
</a>
<a href="{{ _p.web_main }}admin/skill_create.php?parent={{ skill.id }}" class="btn btn-primary btn-sm" title="{{ "CreateChildSkill" | get_lang }}">
<em class="fa fa-plus fa-fw"></em>
</a>
<a href="{{ _p.web_main }}admin/skill_badge_create.php?id={{ skill.id }}" class="btn btn-primary btn-sm" title="{{ "CreateBadge" | get_lang }}">
<em class="fa fa-shield fa-fw"></em>
</a>
{% if skill.status == 0 %}
<a href="{{ _p.web_self ~ '?' ~ {"action": "enable", "id": skill.id}|url_encode() }}" class="btn btn-success btn-sm" title="{{ 'Enable' }}">
<em class="fa fa-check-circle-o fa-fw"></em>
</a>
{% else %}
<a href="{{ _p.web_self ~ '?' ~ {"action": "disable", "id": skill.id}|url_encode() }}" class="btn btn-danger btn-sm" title="{{ 'Disable' }}">
<em class="fa fa-ban fa-fw"></em>
</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$("#tag-filter").val("{{ current_tag_id }}");
$("#filter-button").click(function() {
var tagId = $( "#tag-filter option:selected" ).val();
$(location).attr('href', '{{ _p.web_main }}admin/skill_list.php?tag_id='+tagId);
});
});
</script>

113
main/template/default/skill/profile.tpl Normal file
View File

@@ -0,0 +1,113 @@
{% if search_skill_list is not null %}
<div class="skills-skills">
<h3>{{"Skills"|get_lang}}</h3>
<ul class="holder">
{% for search_skill_id in search_skill_list %}
<li class="bit-box">
{{ skill_list[search_skill_id].name}}
<a class="closebutton" href="?a=remove_skill&id={{search_skill_id}}"></a>
</li>
{% endfor %}
</ul>
<a id="add_profile" class="btn btn-default" href="#">
<em class="fa fa-floppy-o"></em> {{"SaveThisSearch"|get_lang}}
</a>
</div>
{% endif %}
{% if profiles is not null %}
<div class="skills-profiles">
<h3>{{"SkillProfiles"|get_lang}}</h3>
<ul class="holder">
{%for profile in profiles %}
<li class="bit-box">
<a href="?a=load_profile&id={{profile.id}}">{{profile.name}}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if order_user_list is not null %}
{% for count, user_list in order_user_list %}
<div class="row">
<div class="col-md-12">
<h4 class="page-header">
{% if count == total_search_skills %}
{{ "CompleteMatch"|get_lang }}
{% else %}
{% if (total_search_skills - count) == 1 %}
{{ "MissingOneStepToMatch"|get_lang }}
{% else %}
{{ "MissingXStepsToMatch"|get_lang | format(total_search_skills - count)}}
{% endif %}
{% endif %}
</h4>
</div>
</div>
<div class="row">
{% for user in user_list %}
<div class="col-md-3">
<div class="items-user">
<div class="panel panel-default">
<div class="panel-body">
<div class="avatar-user">
<img class="img-circle" width="100" src="{{ user.user.avatar }}" class="center-block">
</div>
<p class="text-center"><em class="fa fa-user"></em>
<a href="{{ _p.web_main }}social/profile.php?u={{ user['user'].user_id }}" target="_blank">
{{ user['user'].complete_name_with_username }}
</a>
</p>
<p class="text-center">
<em class="fa fa-graduation-cap"></em> {{ "AchievedSkills"|get_lang }} {{ user.total_found_skills }} / {{ total_search_skills }}
</p>
</div>
<ul class="list-group">
{% for skill_data in user.skills %}
<li class="list-group-item {{ skill_data.found ? '' : 'text-muted' }}">
{% if skill_list[skill_data.skill_id].icon %}
<img src="{{ _p.web_upload ~ skill_list[skill_data.skill_id].icon_small }}" width="22" height="22" alt="{{ skill_list[skill_data.skill_id].name }}">
{% else %}
<img src="{{ 'badges.png'|icon(22) }}" width="22" height="22" alt="{{ skill_list[skill_data.skill_id].name }}">
{% endif %}
{% if skill_data.found %}
<b>{{ skill_list[skill_data.skill_id].name }}</b>
{% else %}
{{ skill_list[skill_data.skill_id].name }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
{% else %}
{% if search_skill_list is null %}
<div class="warning-message">{{"NoResults"|get_lang}}</div>
{% endif %}
{% endif %}
</div>
<div id="dialog-form" style="display:none;">
<form id="save_profile_form" class="form-horizontal" name="form">
<fieldset>
<div class="control-group">
<label class="control-label" for="name">{{"Name"|get_lang}}</label>
<div class="controls">
<input type="text" name="name" id="name" size="40" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">{{"Description"|get_lang}}</label>
<div class="controls">
<textarea name="description" id="description" class="span2" rows="7"></textarea>
</div>
</div>
</fieldset>
</form>
</div>

22
main/template/default/skill/profile_item.tpl Normal file
View File

@@ -0,0 +1,22 @@
{% if profiles %}
<h4>{{ "SkillProfiles"|get_lang }}</h4>
<table class="table table-responsive table-condensed">
<tbody>
{%for profile in profiles %}
<tr>
<td>{{ profile.name }}</td>
<td class="text-right">
<div class="btn-group btn-group-sm">
<button class="btn btn-default btn-sm skill-wheel-load-profile" aria-label="{{ 'Search'|get_lang }}" title="{{ 'Search'|get_lang }}" data-id="{{ profile.id }}">
<span class="fa fa-search" aria-hidden="true"></span>
</button>
<button class="btn btn-default btn-sm skill-wheel-delete-profile" aria-label="{{ 'Delete'|get_lang }}" title="{{ 'Delete'|get_lang }}" data-id="{{ profile.id }}">
<span class="fa fa-trash" aria-hidden="true"></span>
</button>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}

16
main/template/default/skill/skill_info.tpl Normal file
View File

@@ -0,0 +1,16 @@
<p>{{ "ToGetToLearnXYouWillNeedToTakeOneOfTheFollowingCourses" | get_lang | format( "<em>" ~ skill.name ~ "</em>") }}</p>
<ul>
{% for course in courses %}
<li>
<a href="#" class="course_description_popup" rel="{{ course.code }}">
{{ "SkillXWithCourseX" | get_lang | format(skill.name, course.title) }}
</a>
</li>
{% endfor %}
{% for session in sessions %}
<li>
{{ "SkillXWithCourseX" | get_lang | format(skill.name, session.name) }}
</li>
{% endfor %}
</ul>

5
main/template/default/skill/skill_ranking.tpl Normal file
View File

@@ -0,0 +1,5 @@
<script>
$(function() {
{{ jqgrid_html }}
});
</script>

461
main/template/default/skill/skill_tree.tpl Normal file
View File

@@ -0,0 +1,461 @@
<style>
/* just because */
body {
/* fallback */
background-color: #eee;
background-image: url(images/radial_bg.png);
background-position: center center;
background-repeat: no-repeat;
/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#eee), to(#666));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #eee, #666);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #eee, #666);
/* IE 10 */
background: -ms-radial-gradient(circle, #eee, #666);
}
</style>
<script>
//js settings (see the skills.js for more)
var url = '{{ url }}';
//Block settings see the SkillVisualizer Class
var offset_x = {{ skill_visualizer.offset_x }};
var offset_y = {{ skill_visualizer.offset_y }};
var space_between_blocks_x = {{ skill_visualizer.space_between_blocks_x }};
var space_between_blocks_y = {{ skill_visualizer.space_between_blocks_y }};
var center_x = {{ skill_visualizer.center_x }};
var block_size = {{ skill_visualizer.block_size }};
$(window).resize(function() {
jsPlumb.repaintEverything();
/*jsPlumb.repaint(".skill_root");
// When resize repaint everything + fix the root position
normal_weight = $('.skill_child :first-child').width();
sum = $('body').width() / 2 - normal_weight/2;
$('.skill_root').animate({ left: sum, top:0 }, { duration: 100 });*/
});
jsPlumb.ready(function() {
//Setting the loading dialog
var loading = $( "#dialog-loading" );
loading.dialog( "destroy" );
loading.dialog({
autoOpen:false,
height: 120,
modal: true,
zIndex: 10000,
resizable :false,
closeOnEscape : false,
disabled: true,
open: function(event, ui) { $(this).parent().children().children('.ui-dialog-titlebar-close').hide(); }
});
jQuery.ajaxSetup({
beforeSend: function() {
loading.dialog( "open" );
//$('#skill_tree').hide();
console.log('before------------------->>');
},
complete: function(){
loading.dialog( "close" );
//$('#skill_tree').show();
console.log('complete------------------->>');
},
success: function() {}
});
//Return to root button
$('#return_to_root').click(function(){
clean_values();
console.log('Clean values');
console.log('Reopen the root ');
});
//Open dialog
$("#dialog-form").dialog({
autoOpen: false,
modal : true,
width : 550,
height : 480
});
//Filling skills select
/*
$.getJSON("{{url}}&a=get_skills&parent_id="+parents[0], {},
function(data) {
$.each(data, function(n, parent) {
// add a new option with the JSON-specified value and text
$("<option />").attr("value", parent.id).text(parent.name).appendTo("#parent_id");
});
}
);*/
//Filling gradebook select
$.getJSON("{{url}}&a=get_gradebooks", {},
function(data) {
$.each(data, function(n, gradebook) {
// add a new option with the JSON-specified value and text
$("<option />").attr("value", gradebook.id).text(gradebook.name).appendTo("#gradebook_id");
});
}
);
//Add button on click
$("#add_item_link").click(function() {
$("#name").attr('value', '');
$("#description").attr('value', '');
$("#parent_id option:selected").removeAttr('selected');
$("#gradebook_id option:selected").removeAttr('selected');
$("#dialog-form").dialog("open");
//Filling skills select
var my_id = 1;
if (parents.length > 1) {
my_id = parents[1].split('_')[1];
}
//Remove all options
$("#parent_id").find('option').remove();
$.getJSON("{{url}}&a=get_skills&id="+my_id, {
},
function(data) {
$.each(data, function(n, parent) {
// add a new option with the JSON-specified value and text
$("<option />").attr("value", parent.id).text(parent.name).appendTo("#parent_id");
});
}
);
});
//Add button process
var name = $( "#name" ),
description = $( "#description" ),
allFields = $( [] ).add( name ).add( description ), tips = $(".validateTips");
$("#dialog-form").css('z-index', '9001');
$("#dialog-form").dialog({
buttons: {
"{{"Add"|get_lang}}" : function() {
var bValid = true;
bValid = bValid && checkLength( name, "name", 1, 255 );
if (bValid) {
var params = $("#add_item").serialize();
$.ajax({
async: false,
url: url+'&a=add&'+params,
success:function(my_id) {
//Setting the selected id from the form
parent_id = $("#parent_id option:selected").attr('value');
//Reseting jsplumb
jsPlumb.reset();
//Deletes all windows
$('.skill_root').remove();
$('.skill_child').remove();
//cleaning skills
skills = [];
//Setting the first parent
first_parent = parents[0];
//Deleting the first parent
console.log('parents before '+parents);
parents.splice(0,1);
console.log('parents now '+parents);
//Remove parent block
$('#block_'+parent_id).remove();
//Open the block
open_block('block_'+parent_id, 0, 1);
//Close dialog
$("#dialog-form").dialog("close");
}
});
}
}
},
close: function() {
$("#name").attr('value', '');
$("#description").attr('value', '');
}
});
//Clicking in a box skill (we use live instead of bind because we're creating divs on the fly )
$(".open_block").click(function() {
var id = $(this).attr('id');
console.log('click.open_block id: ' + id);
console.log('parents: ' + parents);
//if is root
if (parents[0] == id) {
parents = [id];
}
if (parents[1] != id) {
console.log('parents.length ' +parents.length);
//If there are 2 parents in the skill_tree
if (parents.length == 2 ) {
first_parent = parents[0];
$('#'+parents[1]).css('top', '0px');
//console.log('deleting: '+parents[0]);
//removing father
console.log("first_parent " + first_parent);
for (var i = 0; i < skills.length; i++) {
//console.log('looping '+skills[i].element + ' ');
if (skills[i].element == parents[0] ) {
console.log('deleting parent:'+ skills[i].element + ' here ');
jsPlumb.deleteEndpoint(skills[i].element);
jsPlumb.detachAllConnections(skills[i].element);
jsPlumb.removeAllEndpoints(skills[i].element);
$("#"+skills[i].element).remove();
}
}
parents.splice(0,1);
parents.push(id);
console.log('parents after slice/push: ' + parents);
}
if ($(this).hasClass('first_window')) {
console.log('im in a first_window (root)');
$('#'+first_parent).css('top', '0px');
//show the first_parent
//if (first_parent != '') {
parents = [first_parent, id];
open_parent(first_parent, id);
//}
}
if (jQuery.inArray(id, parents) == -1) {
parents.push(id);
console.log('parents push: ' + parents);
}
open_block(id, 0, 0);
}
//Setting class
cleanclass($(this));
$(this).addClass('second_window');
parent_div = $("#"+parents[0]);
cleanclass(parent_div);
parent_div.addClass('first_window');
parent_div.addClass('skill_root');
parent_div = $("#"+parents[1]);
cleanclass(parent_div);
parent_div.addClass('second_window');
//console.log(parents);
// console.log(skills);
console.log('first_parent : ' + first_parent);
//redraw
jsPlumb.repaintEverything();
jsPlumb.repaint(id);
});
//Skill title click
$(".edit_block").click(function() {
var my_id = $(this).attr('id');
my_id = my_id.split('_')[2];
//Cleaning selected
$("#parent_id option:selected").removeAttr('selected');
$("#gradebook_id option:selected").removeAttr('selected');
$.ajax({
url: url+'&a=get_skill_info&id='+my_id,
success: function(json) {
var skill = jQuery.parseJSON(json);
$("#name").attr('value', skill.name);
$("#id").attr('value', skill.id);
$("#description").attr('value', skill.description);
//filling parent_id
$("#parent_id option[value='"+skill.extra.parent_id+"']").attr('selected', 'selected');
//filling the gradebook_id
jQuery.each(skill.gradebooks, function(index, data) {
$("#gradebook_id option[value='"+data.id+"']").attr('selected', 'selected');
});
}
});
$("#gradebook_id").trigger("liszt:updated");
$("#parent_id").trigger("liszt:updated");
$("#dialog-form").dialog("open");
return false;
});
//Clicking in a box
$(".window").bind('click', function() {
var id = $(this).attr('id');
id = id.split('_')[1];
});
// chrome fix.
document.onselectstart = function () { return false; };
// render mode
var resetRenderMode = function(desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
jsPlumbDemo.init();
};
resetRenderMode(jsPlumb.CANVAS);
});
;(function() {
prepare = function(div, endpointOptions) {
console.log('preparing = '+div);
console.log('endpointOptions = '+endpointOptions);
//jsPlumbDemo.initHover(elId);
var endPoint = jsPlumb.addEndpoint(div, endpointOptions);
skills.push({
element: div, endp:endPoint
});
return endPoint;
},
window.jsPlumbDemo = {
init : function() {
console.log('Import defaults');
jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ];
jsPlumb.Defaults.Container = "skill_tree";
open_block('block_1', 0, 1);
// listen for clicks on connections, and offer to delete connections on click.
jsPlumb.bind("click", function(conn, originalEvent) {
/*if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
jsPlumb.detach(conn); */
});
}
};
})();
$(document).ready(function() {
/*
//When creating a connection see
//http://jsplumb.org/apidocs/files/jsPlumb-1-3-2-all-js.html#bind
jsPlumb.bind("jsPlumbConnection", function(conn) {
//alert("Connection created " + conn.sourceId + " to " + conn.targetId + " ");
//jsPlumb.detach(conn);
});
//When double clicking a connection
jsPlumb.bind("click", function(conn) {
if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
jsPlumb.detach(conn);
});
//When double clicking a connection
jsPlumb.bind("click", function(endpoint) {
if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
jsPlumb.detach(conn);
});*/
$(".chzn-select").chosen();
$("#menu").draggable();
});
;(function() {
jsPlumbDemo.getSelector = function(spec) {
return $(spec);
};
jsPlumbDemo.attachBehaviour = function() {
$(".hide").click(function() {
jsPlumb.toggle($(this).attr("rel"));
});
$(".drag").click(function() {
var s = jsPlumb.toggleDraggable($(this).attr("rel"));
$(this).html(s ? 'disable dragging' : 'enable dragging');
if (!s) $("#" + $(this).attr("rel")).addClass('drag-locked'); else $("#" + $(this).attr("rel")).removeClass('drag-locked');
$("#" + $(this).attr("rel")).css("cursor", s ? "pointer" : "default");
});
$(".detach").click(function() {
jsPlumb.detachAll($(this).attr("rel"));
});
$("#clear").click(function() {
jsPlumb.detachEverything(); showConnections();
});
};
})();
</script>
<div id="dialog-loading">
<div class="modal-body">
<p style="text-align:center">
{{ "Loading"|get_lang }}
<img src="{{ _p.web_img}}loadingAnimation.gif"/>
</p>
</div>
</div>
<div id="menu" class="well" style="top:20px; left:20px; width:380px; z-index: 9000; opacity: 0.9;">
<h3>{{'Skills'|get_lang}}</h3>
<div class="btn-group">
<a style="z-index: 1000" class="btn" id="add_item_link" href="#">{{'AddSkill'|get_lang}}</a>
<a style="z-index: 1000" class="btn btn-default" id="return_to_root" href="#">{{'Root'|get_lang}}</a>
<a style="z-index: 1000" class="btn btn-default" id="return_to_admin" href="{{_p.web_main}}admin">{{'BackToAdmin'|get_lang}}</a>
</div>
</div>
<div id="skill_tree"></div>
<div id="dialog-form" style="display:none; z-index:9001;">
<p class="validateTips"></p>
<form class="form-horizontal" id="add_item" name="form">
<fieldset>
<input type="hidden" name="id" id="id"/>
<div class="control-group">
<label class="control-label" for="name">{{'Name'|get_lang}}</label>
<div class="controls">
<input type="text" name="name" id="name" size="40" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">{{'Parent'|get_lang}}</label>
<div class="controls">
<select id="parent_id" name="parent_id" />
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">{{'Gradebook'|get_lang}}</label>
<div class="controls">
<select id="gradebook_id" name="gradebook_id[]" multiple="multiple"/>
</select>
<span class="help-block">
{{'WithCertificate'|get_lang}}
</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">{{'Description'|get_lang}}</label>
<div class="controls">
<textarea name="description" id="description" rows="7"></textarea>
</div>
</div>
</fieldset>
</form>
</div>

216
main/template/default/skill/skill_tree_student.tpl Normal file
View File

@@ -0,0 +1,216 @@
<style>
/* just because */
body {
/* fallback */
background-color: #eee;
background-image: url(images/radial_bg.png);
background-position: center center;
background-repeat: no-repeat;
/* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#eee), to(#666));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #eee, #666);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #eee, #666);
/* IE 10 */
background: -ms-radial-gradient(circle, #eee, #666);
}
</style>
<script>
//js settings
var url = '{{ url }}';
//Block settings see the SkillVisualizer Class
var offset_x = {{ skill_visualizer.offset_x }};
var offset_y = {{ skill_visualizer.offset_y }};
var space_between_blocks_x = {{ skill_visualizer.space_between_blocks_x }};
var space_between_blocks_y = {{ skill_visualizer.space_between_blocks_y }};
var center_x = {{ skill_visualizer.center_x }};
var block_size = {{ skill_visualizer.block_size }};
jsPlumb.bind("ready", function() {
//Open dialog
$("#dialog-form").dialog({
autoOpen: false,
modal : true,
width : 550,
height : 350,
});
//Clicking in a box skill (we use live instead of bind because we're creating divs on the fly )
$(".open_block").click(function() {
var id = $(this).attr('id');
console.log('click.open_block id: ' + id);
console.log('parents: ' + parents);
//if is root
if (parents[0] == id) {
parents = [id];
}
if (parents[1] != id) {
console.log('parents.length ' +parents.length);
//If there are 2 parents in the skill_tree
if (parents.length == 2 ) {
first_parent = parents[0];
$('#'+parents[1]).css('top', '0px');
//console.log('deleting: '+parents[0]);
//removing father
console.log("first_parent " + first_parent);
for (var i = 0; i < skills.length; i++) {
//console.log('looping '+skills[i].element + ' ');
if (skills[i].element == parents[0] ) {
console.log('deleting parent:'+ skills[i].element + ' here ');
jsPlumb.deleteEndpoint(skills[i].element);
jsPlumb.detachAllConnections(skills[i].element);
jsPlumb.removeAllEndpoints(skills[i].element);
$("#"+skills[i].element).remove();
}
}
parents.splice(0,1);
parents.push(id);
console.log('parents after slice/push: ' + parents);
}
if ($(this).hasClass('first_window')) {
console.log('im in a first_window (root)');
$('#'+first_parent).css('top', '0px');
//show the first_parent
//if (first_parent != '') {
parents = [first_parent, id];
open_parent(first_parent, id);
//}
}
if (jQuery.inArray(id, parents) == -1) {
parents.push(id);
console.log('parents push: ' + parents);
}
open_block(id, 0, 0);
}
//Setting class
cleanclass($(this));
$(this).addClass('second_window');
parent_div = $("#"+parents[0]);
cleanclass(parent_div);
parent_div.addClass('first_window');
parent_div.addClass('skill_root');
parent_div = $("#"+parents[1]);
cleanclass(parent_div);
parent_div.addClass('second_window');
//console.log(parents);
// console.log(skills);
console.log('first_parent : ' + first_parent);
//redraw
jsPlumb.repaintEverything();
jsPlumb.repaint(id);
});
$(".edit_block").click(function() {
var my_id = $(this).attr('id');
my_id = my_id.split('_')[2];
$.ajax({
url: url+'&a=get_skill_info&id='+my_id,
success: function(json) {
var skill = jQuery.parseJSON(json);
$("#name").html(skill.name);
$("#id").attr('value', skill.id);
$("#description").html(skill.description);
//filling parent_id
$("#parent_id option[value='"+skill.extra.parent_id+"']").attr('selected', 'selected');
//filling the gradebook_id
$("#gradebook_id").html('');
jQuery.each(skill.gradebooks, function(index, data) {
$("#gradebook_id").append('<span class="label_tag gradebook">'+data.name+'</div>');
});
},
});
$("#dialog-form").dialog("open");
return false;
});
$("#dialog-form").dialog({
close: function() {
$("#name").html('');
$("#description").html('');
}
});
// chrome fix.
document.onselectstart = function () { return false; };
// render mode
var resetRenderMode = function(desiredMode) {
var newMode = jsPlumb.setRenderMode(desiredMode);
jsPlumbDemo.init();
};
resetRenderMode(jsPlumb.CANVAS);
});
;(function() {
window.jsPlumbDemo = {
init : function() {
console.log('Import defaults');
jsPlumb.Defaults.Anchors = [ "BottomCenter", "TopCenter" ];
jsPlumb.Defaults.Container = "skill_tree";
open_block('block_1', 1, 1);
}
};
})();
$(document).ready( function() {
//When creating a connection see
//http://jsplumb.org/apidocs/files/jsPlumb-1-3-2-all-js.html#bind
jsPlumb.bind("jsPlumbConnection", function(conn) {
//alert("Connection created " + conn.sourceId + " to " + conn.targetId + " ");
//jsPlumb.detach(conn);
});
});
</script>
<div id="skill_tree"></div>
<div id="dialog-form" style="display:none;">
<form id="add_item" class="form-horizontal" name="form">
<fieldset>
<input type="hidden" name="id" id="id"/>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<span id="name"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">Description</label>
<div class="controls">
<span id="description"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="name">Gradebook</label>
<div class="controls">
<div id="gradebook_id"></div>
</div>
</div>
</fieldset>
</form>
</div>

721
main/template/default/skill/skill_wheel.js.tpl Normal file
View File

@@ -0,0 +1,721 @@
{# topbar #}
{% include 'layout/topbar.tpl'|get_template %}
<script>
var SkillWheel = {
currentSkill: null,
getSkillInfo: function(skillId) {
return $.getJSON(
'{{ url }}',
{
a: 'get_skill_info',
id: parseInt(skillId)
}
);
},
showFormSkill: function(skillId) {
skillId = parseInt(skillId);
var formSkill = $('form[name="form"]');
var getSkillInfo = SkillWheel.getSkillInfo(skillId);
$.when(getSkillInfo).done(function(skillInfo) {
SkillWheel.currentSkill = skillInfo;
var getSkillParentInfo = SkillWheel.getSkillInfo(skillInfo.extra.parent_id);
$.when(getSkillParentInfo).done(function(skillParentInfo) {
formSkill.find('p#parent').text(skillParentInfo.name);
});
formSkill.find('p#name').text(skillInfo.name);
if (skillInfo.short_code.length > 0) {
formSkill.find('p#short_code').text(skillInfo.short_code).parent().parent().show();
} else {
formSkill.find('p#short_code').parent().parent().hide();
}
if (skillInfo.description.length > 0) {
formSkill.find('p#description').text(skillInfo.description).parent().parent().show();
} else {
formSkill.find('p#description').parent().parent().hide();
}
if (skillInfo.gradebooks.length > 0) {
formSkill.find('ul#gradebook').empty().parent().parent().show();
$.each(skillInfo.gradebooks, function(index, gradebook) {
var $gradebookCourse = $('<a>',{href: _p.web_main + 'auth/courses.php'})
.text(gradebook.course_code);
$('<li>').html($gradebookCourse).appendTo(formSkill.find('ul#gradebook'));
});
} else {
formSkill.find('ul#gradebook').parent().parent().hide();
}
$('#frm-skill').modal('show');
});
}
};
/* Skill wheel settings */
var debug = true;
var url = '{{ url }}';
var skill_to_load_from_get = '{{ skill_id_to_load }}';
//Just in case we want to use it
var main_depth = 4;
var main_parent_id = 0;
// Used to split in two word or not
var max_size_text_length = 20;
/* ColorBrewer settings */
var my_domain = [1,2,3,4,5,6,7,8,9];
var col = 9;
var color_patterns = [];
/*
See colorbrewer documentation
color_patterns[1] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[col]);
color_patterns[2] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Purples[col]);
color_patterns[2] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[6]);
color_patterns[3] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Greens[col]);
color_patterns[4] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Reds[col]);
color_patterns[5] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Oranges[col]);
color_patterns[6] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOrBr[col]);
color_patterns[7] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlGn[col]);
color_patterns[8] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlGnBu[col]);
color_patterns[9] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.GnBu[col]);
color_patterns[10] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.BuGn[col]);
color_patterns[11] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuBuGn[col]);
color_patterns[12] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuBu[col]);
color_patterns[13] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.BuPu[col]);
color_patterns[14] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.RdPu[col]);
color_patterns[15] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.PuRd[col]);
color_patterns[16] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.OrRd[col]);
color_patterns[17] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.YlOrRd[col]);*/
//Too make the gray tones lighter
col = 3;
color_patterns[18] = d3.scale.ordinal().domain(my_domain).range(colorbrewer.Blues[col]);
//If you want to use the category10()
//var normal_fill = d3.scale.category10().domain(my_domain);
//First 8 colors
var colors = $.xcolor.analogous('#da0'); //8 colors
//How long will be the array of colors?
var color_loops = 4;
// Generating array of colors thanks to the "$.xcolor.analogous" function we can create a rainbow style!
for (i= 0; i < color_loops; i++) {
//Getting the latest color hex of the 8 colors loaded
last_color = colors[colors.length-1].getHex();
//Getting the complementary
glue_color = $.xcolor.complementary(last_color);
//Generating 8 more colors
temp_color_array = $.xcolor.analogous(glue_color);
//Adding the color to the main array
colors = $.merge(colors, temp_color_array);
}
/* The partiton name will have 1 or 2 lines? */
function is_multiline(word) {
if (word) {
if (word.length > max_size_text_length) {
return (word).split(" ").length > 1;
}
}
return false;
}
/* Interpolate the scales! */
function arcTween(d, arc, x, y, r) {
var my = maxY(d),
xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, my]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, r]);
return function(d) {
return function(t) {
x.domain(xd(t));
y.domain(yd(t)).range(yr(t));
return arc(d);
};
};
}
/* Calculate maxY */
function maxY(d) {
return d.children ? Math.max.apply(Math, d.children.map(maxY)) : d.y + d.dy;
}
/* Use a formula for contrasting colour
http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
*/
function brightness(rgb) {
return rgb.r * .299 + rgb.g * .587 + rgb.b * .114;
}
/* Returns whether p is parent of c */
function isParentOf(p, c) {
if (p === c) return true;
if (p.children) {
return p.children.some(function(d) {
return isParentOf(d, c);
});
}
return false;
}
function get_color(d) {
depth = d.depth;
if (d.family_id) {
/*var p = color_patterns[d.family_id];
color = p(depth -1 + d.counter);
d.color = color;*/
if (depth > 1) {
family1 = colors[d.family_id];
family2 = colors[d.family_id + 2];
position = d.depth*d.counter;
//part_color = $.xcolor.gradientlevel(family1, family2, position, 100);
part_color = $.xcolor.lighten(family1, position, 15);
color = part_color.getHex();
//console.log(d.depth + " - " + d.name + " + "+ color+ "+ " +d.counter);
} else {
color = colors[d.family_id];
}
return color;
}
color = '#fefefe';
return color; //missing colors
}
/*
gray tones for all skills that have no particular property ("Basic skills wheel" view)
yellow tones for skills that are provided by courses in Chamilo ("Teachable skills" view)
bright blue tones for personal skills already acquired by the student currently looking at the weel ("My skills" view)
dark blue tones for skills already acquired by a series of students, when looking at the will in the "Owned skills" view.
bright green for skills looked for by a HR director ("Profile search" view)
dark green for skills most searched for, summed up from the different saved searches from HR directors ("Most wanted skills")
bright red for missing skills, in the "Required skills" view for a student when looking at the "Most wanted skills" (or later, when we will have developed that, for the "Matching position" view)
*/
var userSkills;
/**
Manage the partition background colors
**/
function set_skill_style(d, attribute, searched_skill_id) {
//Default border color (stroke)
return_stroke = '#000';
//0. Nice rainbow colors (Comment 1.0 to see the rainbow!)
return_fill = get_color(d);
//1. Grey colors using colorbrewer
var p = color_patterns[18];
color = p(depth -1 + d.counter);
return_fill = color;
//2. Yellow - If the skill has a gradebook attached
if (d.skill_has_gradebook) {
return_fill = '#F89406';
//return_stroke = 'grey';
}
//3. Red - if you search that skill
if (d.isSearched) {
return_fill = '#B94A48';
}
if (!userSkills) {
$.ajax({
url: url + '&a=get_all_user_skills',
async: false,
success: function (skills) {
userSkills = jQuery.parseJSON(skills);
}
});
}
// Old way (it makes a lot of ajax calls)
//4. Blue - if user achieved that skill
//var skill = false;
/*$.ajax({
url: url+'&a=get_user_skill&profile_id='+d.id,
async: false,
success: function(skill) {
if (skill == 1) {
return_fill = '#3A87AD';
}
}
});*/
// New way (Only 1 ajax call)
// 4. Blue - if user achieved that skill
if (userSkills[d.id]) {
return_fill = '#A1D99B';
}
// 5. Grey / Black if the skill is disabled
if (d.status < 1) {
return_fill = '#48616C';
}
switch (attribute) {
case 'fill':
//In order to identify the color of the text (white, black) used in other function
d.color = return_fill;
return return_fill;
break;
case 'stroke':
return return_stroke;
break;
}
}
/* When you click a skill partition */
function click_partition(d, path, text, icon, arc, x, y, r, p, vis) {
if (debug) {
console.log('Clicking a partition skill id: '+d.id);
console.log(d);
console.log('real parent_id: '+d.real_parent_id + ' parent_id: ' +d.parent_id);
console.log('depth ' + d.depth);
console.log('main_depth ' + main_depth);
console.log('main_parent_id: ' + main_parent_id);
}
if (d.depth >= main_depth) {
//main_depth += main_depth;
if (main_parent_id) {
load_nodes(main_parent_id, main_depth);
} else {
load_nodes(d.id, main_depth);
}
}
if (d.id) {
console.log('Getting skill info');
skill_info = get_skill_info(d.parent_id);
main_parent_id = skill_info.extra.parent_id;
main_parent_id = d.parent_id;
console.log('Setting main_parent_id: ' + main_parent_id);
}
//console.log(main_parent_id);
/* "No id" means that we reach the center of the wheel go to the root*/
if (!d.id) {
load_nodes(main_parent_id, main_depth);
}
if (debug) console.log('Continue to click_partition');
//console.log(main_parent_id);
//Duration of the transition
var duration = 1000;
path.transition()
.duration(duration)
.attrTween("d", arcTween(d, arc, x, y, r));
/* Updating text position */
// Somewhat of a hack as we rely on arcTween updating the scales.
text.style("visibility", function(e) {
return isParentOf(d, e) ? null : d3.select(this).style("visibility");
})
.transition().duration(duration)
.attrTween("text-anchor", function(d) {
return function() {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
};
})
.attrTween("transform", function(d) {
var multiline = is_multiline(d.name); //(d.name || "").split(" ").length > 1;
return function() {
var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
};
})
.style("fill-opacity", function(e) {
return isParentOf(d, e) ? 1 : 1e-6;
})
.each("end", function(e) {
d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
});
//Add an icon in the partition
/* Updating icon position */
/*
icon.transition().duration(duration)
.attrTween("text-anchor", function(d) {
return function() {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
};
})
.attrTween("transform", function(d) {
return function() {
var angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle;
return "rotate(" + rotate + ")translate(" + (y(d.y) + p) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
};
})
.style("fill-opacity", function(e) {
//return isParentOf(d, e) ? 1 : 1e-6;
})
.each("end", function(e) {
//d3.select(this).style("visibility", isParentOf(d, e) ? null : "hidden");
});*/
}
/* Handles mouse clicks */
function handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding, vis) {
switch (d3.event.which) {
case 1:
//alert('Left mouse button pressed');
click_partition(d, path, text, icon, arc, x, y, r, padding, vis);
break;
case 2:
//alert('Middle mouse button pressed');
break;
case 3:
if (typeof d.id === 'undefined') {
break;
}
SkillWheel.showFormSkill(d.id);
//alert('Right mouse button pressed');
break;
default:
//alert('You have a strange mouse :D '); //
}
}
/*
Loads the skills partitions thanks to a json call
*/
function load_nodes(load_skill_id, main_depth, extra_parent_id) {
if (debug) {
console.log('Load nodes ----->');
console.log('Loading skill id: '+load_skill_id+' with depth ' + main_depth);
console.log('main_parent_id before: ' + main_parent_id);
}
// "Root partition" on click switch
if (main_parent_id && load_skill_id) {
skill_info = get_skill_info(load_skill_id);
if (skill_info && skill_info.extra) {
main_parent_id = skill_info.extra.parent_id;
} else {
main_parent_id = 0;
}
console.log('main_parent_id after: ' + main_parent_id);
}
if (load_skill_id && load_skill_id == 1) {
main_parent_id = 0;
}
/** Define constants and size of the wheel */
/** Total width of the wheel (also counts for the height) */
var w = 900,
h = w,
r = w / 2,
/** x/y positionning of the center of the wheel */
x = d3.scale.linear().range([0, 2 * Math.PI]),
y = d3.scale.pow().exponent(1.1).domain([0, 1]).range([0, r]),
/** Padding in pixels before the string starts */
padding = 3,
/** Levels to show */
levels_to_show = 3;
reduce_top = 1;
/* Locate the #div id element */
$("#skill_wheel").remove();
$("#wheel_container").html('');
$("#wheel_container").append('<div id="skill_wheel"></div>');
var div = d3.select("#skill_wheel");
/* Remove the image (make way for the dynamic stuff */
div.select("img").remove();
/* Append an element "svg" to the #vis section */
var vis = div.append("svg")
//.attr("class", "Blues")
.attr("width", '100%')
.attr("height", $(window).height())
.attr('viewBox', '0 0 ' + (w + padding * 2) + ' ' + (h + padding * 2))
.append("g")
.attr("transform", "translate(" + (r + padding) + "," + (r/reduce_top + padding) + ")");
/* ...update translate variables to change coordinates of wheel's center */
/* Add a small label to help the user */
div.append("p")
.attr("id", "intro")
.text("{{ "ClickToZoom"|get_lang }}");
$( window ).resize(function() {
$( "#skill_wheel svg" )
.attr("height", $(window).height());
});
/* Generate the partition layout */
var partition = d3.layout.partition()
.sort(null)
/** Value here seems to be a calculation of the size of the elements
depending on the level of depth they're at. Changing it makes
elements pass over the limits of others... */
//.size([1, 2])
.value(function(d) {
//return 5.8 - d.depth;
//When having more than 4 children seems that the code above does not work
return 1;
});
/* Generate an arc which will define the whole wheel context */
var arc = d3.svg.arc()
.startAngle(function(d) {
return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
})
.endAngle(function(d) {
return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
})
.innerRadius(function(d) {
return Math.max(0, d.y ? y(d.y) : d.y);
})
.outerRadius(function(d) {
return Math.max(0, y(d.y + d.dy));
});
load_skill_condition = '';
//First the $_GET value
if (skill_to_load_from_get != 0) {
load_skill_condition = 'skill_id=' + skill_to_load_from_get;
}
//The JS load
if (load_skill_id != 0) {
load_skill_condition = 'skill_id=' + load_skill_id;
}
d3.json("{{ wheel_url }}&main_depth="+main_depth+"&"+load_skill_condition, function(json) {
/** Define the list of nodes based on the JSON */
var nodes = partition.nodes({
children: json
});
/* Setting all skills */
var path = vis.selectAll("path").data(nodes);
/* Setting all texts */
var text = vis.selectAll("text").data(nodes);
/* Setting icons */
var icon = vis.selectAll("icon").data(nodes);
/* Path settings */
path.enter().append("path")
.attr("id", function(d, i) {
return "path-" + i;
})
.attr("d", arc)
.attr("fill-rule", "evenodd")
.attr("class", "skill_partition skill_background")
// .style("fill", colour)
.style("fill", function(d) {
return set_skill_style(d, 'fill', load_skill_id);
})
.style("stroke", function(d) {
return set_skill_style(d, 'stroke');
})
.on("mouseover", function(d, i) {
//$("#icon-" + i).show();
})
.on("mouseout", function(d, i) {
//$("#icon-" + i).hide();
})
.on("contextmenu", function(d, i) {
//Handles mouse clicks
handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding, vis);
//Blocks "right click menu"
d3.event.preventDefault();
return false;
})
.on("mousedown", function(d, i) {
})
.on("click", function(d) {
//Simple click
handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding, vis);
});
/*//Redefine the root
path_zero = vis.selectAll("#path-0").on("mousedown", function(d){
d = get_skill_info(extra_parent_id);
d.parent_id = d.extra.parent_id;
click_partition(d, path, text, icon, arc, x, y, r, padding, vis);
});*/
/* End setting skills */
/* Text settings */
var textEnter = text.enter().append("text")
.style("fill-opacity", 1)
.style("fill", function(d) {
return brightness(d3.rgb(d.color)) < 125 ? "#eee" : "#000";
})
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
})
.attr("rel", "tooltip_skill")
.attr("title", function(d) {
return d.name;
})
.attr("dy", ".2em")
.attr("transform", function(d) {
/** Get the text details and define the rotation and general position */
var multiline = is_multiline(d.name); //(d.name || "").split(" ").length > 1,
angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle + (multiline ? -.5 : 0);
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.on("mouseover", function(d, i) {
//$("#icon-" + i).show();
})
.on("mouseout", function(d, i) {
//$("#icon-" + i).hide();
})
.on("contextmenu", function(d, i) {
handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding, vis);
d3.event.preventDefault();
})
.on("mousedown", function(d, i) {
})
.on("click", function(d) {
handle_mousedown_event(d, path, text, icon, arc, x, y, r, padding, vis);
});
/** Managing text - maximum two words */
textEnter.append("tspan")
.attr("x", 0)
.text(function(d) {
if (d.short_code) {
return d.short_code;
}
if (d.depth && d.name) {
var nameParts = d.name.split(' ');
if (nameParts[0].length > max_size_text_length) {
return nameParts[0].substring(0, max_size_text_length - 3) + '...';
}
return nameParts[0];
}
return d.depth ? d.name : '';
});
textEnter.append("tspan")
.attr("x", 0)
.attr("dy", "1em")
.text(function(d) {
if (d.short_code) {
return null;
}
if (d.depth && d.name) {
var nameParts = d.name.split(' ');
if (nameParts.length >= 2) {
if (nameParts[1].length > max_size_text_length) {
return nameParts[1].substring(0, max_size_text_length - 3) + '...';
}
return nameParts[1];
}
return '';
}
return d.depth ? d.name : '';
});
/* Icon settings */
/*
var icon_click = icon.enter().append("text")
.style("fill-opacity", 1)
.style("fill", function(d) {
//return "#000";
})
.attr("text-anchor", function(d) {
return x(d.x + d.dx / 2) > Math.PI ? "end" : "start";
})
.attr("dy", ".2em")
.attr("transform", function(d) {
///Get the text details and define the rotation and general position
angle = x(d.x + d.dx / 2) * 180 / Math.PI - 90,
rotate = angle;
return "rotate(" + rotate + ")translate(" + (y(d.y) + padding +80) + ")rotate(" + (angle > 90 ? -180 : 0) + ")";
})
.on("click", function(d){
SkillWheel.showFormSkill(d.id);
});
icon_click.append("tspan")
.attr("id", function(d, i) {
return "icon-" + i;
})
.attr("x", 0)
.attr("display", 'none')
.text(function(d) {
//return "Click";
});*/
});
if (debug) {
console.log('<------ End load nodes ----->');
}
}
/* Skill AJAX calls */
function get_skill_info(my_id) {
var skill = false;
$.ajax({
url: url+'&a=get_skill_info&id='+my_id,
async: false,
success: function(json) {
skill = jQuery.parseJSON(json);
return skill;
}
});
return skill;
}
function get_gradebook_info(id) {
var item = false;
$.ajax({
url: url+'&a=get_gradebook_info&id='+id,
async: false,
success: function(json) {
item = jQuery.parseJSON(json);
return item;
}
});
return item;
}
</script>

641
main/template/default/skill/skill_wheel.tpl Normal file
View File

@@ -0,0 +1,641 @@
{% include 'skill/skill_wheel.js.tpl'|get_template %}
<script>
/* Skill search input in the left menu */
function check_skills_sidebar() {
//Selecting only selected skills
$("#skill_id option").each(function () {
var skill_id = $(this).val();
if (skill_id != "") {
$.ajax({
url: "{{ url }}&a=skill_exists",
data: "skill_id=" + skill_id,
async: false,
success: function (return_value) {
if (return_value == 0) {
alert("{{ 'SkillDoesNotExist'|get_lang }}");
//Deleting select option tag
//$("#skill_id option[value="+skill_id+"]").remove();
$("#skill_id").empty();
//Deleting holder
$("#skill_search .holder li").each(function () {
if ($(this).attr("rel") == skill_id) {
$(this).remove();
}
});
} else {
$("#skill_id option[value=" + skill_id + "]").remove();
//Deleting holder
$("#skill_search .holder li").each(function () {
if ($(this).attr("rel") == skill_id) {
$(this).remove();
}
});
if ($('#skill_to_select_id_' + skill_id).length == 0) {
skill_info = get_skill_info(skill_id);
li = fill_skill_search_li(skill_id, skill_info.name);
$("#skill_holder").append(li);
}
}
}
});
}
});
}
function fill_skill_search_li(skill_id, skill_name, checked) {
var checked_condition = '',
activeCondition = '',
iconClassCondition = 'fa fa-square-o fa-fw';
if (checked) {
checked_condition = 'checked=checked';
activeCondition = 'active';
iconClassCondition = 'fa fa-check-square-o fa-fw';
}
return '\
<tr>\n\
<td>' + skill_name + '</td>\n\
<td class="text-right">\n\
<div class="btn-group btn-group-sm" data-toggle="buttons">\n\
<label class="btn btn-default ' + activeCondition + '" aria-label="{{ 'Select'|get_lang }}" title="{{ 'SelectToSearch'|get_lang }}">\n\
<input id="skill_to_select_id_' + skill_id + '" data-id="' + skill_id + '" name="' + skill_name + '" class="skill_to_select" type="checkbox" autocomplete="off" ' + checked_condition + '>\n\
<span class="' + iconClassCondition + '" aria-hidden="true"></span>\n\
</label>\n\
<button class="btn btn-default load_wheel" aria-label="{{ 'Search'|get_lang }}" title="{{ 'PlaceOnTheWheel'|get_lang }}" data-id="' + skill_id + '">\n\
<span class="fa fa-crosshairs fa-fw" aria-hidden="true"></span>\n\
</button>\n\
</div>\n\
</td>\n\
</tr>';
}
function check_skills_edit_form() {
//selecting only selected parents
$("#parent_id option:selected").each(function () {
var skill_id = $(this).val();
if (skill_id != "") {
$.ajax({
async: false,
url: "{{ url }}&a=skill_exists",
data: "skill_id=" + skill_id,
success: function (return_value) {
if (return_value == 0) {
alert("{{ 'SkillDoesNotExist'|get_lang }}");
//Deleting select option tag
$("#parent_id").find('option').remove();
//Deleting holder
$("#skill_row .holder li").each(function () {
if ($(this).attr("rel") == skill_id) {
$(this).remove();
}
});
} else {
$("#parent_id").empty();
$("#skill_edit_holder").find('li').remove();
//Deleting holder
$("#skill_row .holder li").each(function () {
if ($(this).attr("rel") == skill_id) {
$(this).remove();
}
});
skill = get_skill_info(skill_id);
$("#skill_edit_holder").append('<li class="bit-box" id="skill_option_' + skill_id + '"> ' + skill.name + '</li>');
$("#parent_id").append('<option class="selected" selected="selected" value="' + skill_id + '"></option>');
}
}
});
}
});
}
function check_gradebook() {
//selecting only selected users
$("#gradebook_id option:selected").each(function () {
var gradebook_id = $(this).val();
if (gradebook_id != "") {
$.ajax({
url: "{{ url }}&a=gradebook_exists",
data: "gradebook_id=" + gradebook_id,
success: function (return_value) {
if (return_value == 0) {
alert("{{ 'GradebookDoesNotExist'|get_lang }}");
//Deleting select option tag
$("#gradebook_id option[value=" + gradebook_id + "]").remove();
//Deleting holder
$("#gradebook_row .holder li").each(function () {
if ($(this).attr("rel") == gradebook_id) {
$(this).remove();
}
});
} else {
//Deleting holder
$("#gradebook_row .holder li").each(function () {
if ($(this).attr("rel") == gradebook_id) {
$(this).remove();
}
});
if ($('#gradebook_item_' + gradebook_id).length == 0) {
gradebook = get_gradebook_info(gradebook_id);
if (gradebook) {
$("#gradebook_holder").append('<li id="gradebook_item_' + gradebook_id + '" class="bit-box"> ' + gradebook.name +
' <a rel="' + gradebook_id + '" class="closebutton" href="#"></a></li>');
}
}
}
}
});
}
});
}
function delete_gradebook_from_skill(skill_id, gradebook_id) {
$.ajax({
url: url + '&a=delete_gradebook_from_skill&skill_id=' + skill_id + '&gradebook_id=' + gradebook_id,
async: false,
success: function (result) {
//if (result == 1) {
$('#gradebook_item_' + gradebook_id).remove();
$("#gradebook_id option").each(function () {
if ($(this).attr("value") == gradebook_id) {
$(this).remove();
}
});
//}
}
});
}
function return_skill_list_from_profile_search() {
var skill_list = {};
if ($("#profile_search li").length != 0) {
$("#profile_search li").each(function (index) {
id = $(this).attr("id").split('_')[3];
if (id) {
skill_list[index] = id;
}
});
}
return skill_list;
}
function submit_profile_search_form() {
$("#skill_wheel").remove();
var skill_list = return_skill_list_from_profile_search();
if (skill_list.length != 0) {
skill_list = {'skill_id': skill_list};
skill_params = $.param(skill_list);
$.ajax({
url: url + '&a=profile_matches&' + skill_params,
async: false,
success: function (html) {
//users = jQuery.parseJSON(users);
$('#wheel_container').html(html);
}
});
}
//return skill;
}
function add_skill_in_profile_list(skill_id, skill_name) {
if ($('#profile_match_item_' + skill_id).length == 0) {
$('#profile_search').append('<li class="bit-box" id="profile_match_item_' + skill_id + '">' + skill_name +
' <a rel="' + skill_id + '" class="closebutton" href="#"></a> </li>');
} else {
$('#profile_match_item_' + skill_id).remove();
}
toogle_save_profile_form();
}
function toogle_save_profile_form() {
//Hiding showing the save this search
if ($('#profile_search li').length == 0) {
$('#profile-options-container').hide();
} else {
$('#profile-options-container').show();
}
}
$(document).ready(function () {
/* Skill search */
//Tool tip (in exercises)
var tip_options = {
placement: 'right'
}
$('.tooltip_skill').tooltip(tip_options);
/* Skill item list onclick */
$("#skill_holder").on("change", "input.skill_to_select", function () {
var self = $(this);
skill_id = self.data('id') || 0;
skill_name = self.attr('name');
add_skill_in_profile_list(skill_id, skill_name);
if (this.checked) {
self.next('.fa').replaceWith('<span class="fa fa-check-square-o fa-fw" aria-hidden="true"></span>');
} else {
self.next('.fa').replaceWith('<span class="fa fa-square-o fa-fw" aria-hidden="true"></span>');
}
});
/* URL link when searching skills */
$("#skill_holder").on("click", "button.load_wheel", function (e) {
e.preventDefault();
skill_id = $(this).data('id') || 0;
skill_to_load_from_get = 0;
load_nodes(skill_id, main_depth);
});
/* URL link when searching skills */
$("a.load_root").on("click", function (e) {
e.preventDefault();
skill_id = $(this).attr('rel');
skill_to_load_from_get = 0;
load_nodes(skill_id, main_depth);
});
/* Profile matcher */
/* Submit button */
$("#search_profile_form").submit(function () {
submit_profile_search_form();
return false;
});
$("form#save_profile_form_button").on('submit', function (e) {
e.preventDefault();
var profileId = parseInt($('input[name="profile_id"]').val());
var getProfileInfo = $.getJSON(
'{{ url }}',
{
a: 'get_profile',
profile_id: profileId
}
);
$.when(getProfileInfo).done(function (profileInfo) {
$("#name_profile").val(profileInfo.name);
$("#description_profile").val(profileInfo.description);
$('#frm-save-profile').modal('show');
});
});
/* Close button in profile matcher items */
$("#profile_search").on("click", "a.closebutton", function () {
skill_id = $(this).attr('rel');
$('input[id=skill_to_select_id_' + skill_id + ']').attr('checked', false);
$('#profile_match_item_' + skill_id).remove();
submit_profile_search_form();
toogle_save_profile_form();
});
// Fill saved profiles list
update_my_saved_profiles();
/* Click in profile */
$("#saved_profiles").on("click", "button.skill-wheel-load-profile", function (e) {
e.preventDefault();
profile_id = $(this).data('id') || 0;
$('input[name="profile_id"]').val(profile_id);
$.ajax({
url: '{{ url }}&a=get_skills_by_profile&profile_id=' + profile_id,
success: function (json) {
$('#profile_search').empty();
$('#skill_holder').empty();
skill_list = $.parseJSON(json);
$.each(skill_list, function (index, skill_id) {
skill_info = get_skill_info(skill_id);
li = fill_skill_search_li(skill_id, skill_info.name, 1);
$("#skill_holder").append(li);
add_skill_in_profile_list(skill_id, skill_info.name);
});
submit_profile_search_form();
}
});
});
$("#saved_profiles").on('click', 'button.skill-wheel-delete-profile', function (e) {
e.preventDefault();
var self = $(this),
profileId = self.data('id') || 0;
$.getJSON('{{ url }}&a=delete_profile', {
profile: profileId
}, function (response) {
if (response.status) {
update_my_saved_profiles();
}
});
});
/* Wheel skill popup form */
/* Close button in gradebook select */
$("#gradebook_holder").on("click", "a.closebutton", function () {
gradebook_id = $(this).attr('rel');
skill_id = $('input[name="id"]').attr('value');
delete_gradebook_from_skill(skill_id, gradebook_id);
});
$("#skill_id").select2({
ajax: {
url: '{{ url }}&a=find_skills',
processResults: function (data) {
return {
results: data.items
};
}
},
cache: false,
placeholder: '{{ 'EnterTheSkillNameToSearch'|get_lang }}'
}).on('change', function () {
check_skills_sidebar();
});
load_nodes(0, main_depth);
function update_my_saved_profiles() {
$.ajax({
url: '{{ url }}&a=get_saved_profiles',
success: function (data) {
$("#saved_profiles").html(data);
}
});
}
/* change background color */
$('#skill-change-background-options li a').on('click', function (e) {
e.preventDefault();
var newBackgroundColor = $(this).data('color') || '#FFF';
$("#page-back").css("background", newBackgroundColor);
});
/* Generated random colour */
/*
function colour(d) {
if (d.children) {
// There is a maximum of two children!
var colours = d.children.map(colour),
a = d3.hsl(colours[0]),
b = d3.hsl(colours[1]);
// L*a*b* might be better here...
return d3.hsl((a.h + b.h) / 2, a.s * 1.2, a.levels_to_show / 1.2);
}
return d.colour || "#fff";
}*/
$('#form-button-edit').on('click', function (e) {
e.preventDefault();
if (SkillWheel.currentSkill === null) {
return;
}
window.location.href = "{{ _p.web_main }}admin/skill_edit.php?id=" + SkillWheel.currentSkill.id;
});
$('#form-button-create-child').on('click', function (e) {
e.preventDefault();
if (SkillWheel.currentSkill === null) {
return;
}
window.location.href = "{{ _p.web_main }}admin/skill_create.php?parent=" + SkillWheel.currentSkill.id;
});
$('#form-button-add-to-profile').on('click', function (e) {
e.preventDefault();
if (SkillWheel.currentSkill === null) {
return;
}
add_skill_in_profile_list(SkillWheel.currentSkill.id, SkillWheel.currentSkill.name);
});
$('#frm-save-profile').on('hidden.bs.modal', function () {
$("#name_profile").val('');
$("#description_profile").val('');
$('input[name="profile_id"]').val(0);
});
$('#form-button-save-profile').on('click', function (e) {
e.preventDefault();
var saveProfile = $.ajax(
'{{ url }}',
{
data: {
a: 'save_profile',
name: $("#name_profile").val(),
description: $("#description_profile").val(),
skill_id: return_skill_list_from_profile_search(),
profile: $('input[name="profile_id"]').val()
}
}
);
$.when(saveProfile).done(function (response) {
if (parseInt(response) === 1) {
update_my_saved_profiles();
alert("{{ "Saved" | get_lang }}");
} else {
alert("{{ "Error" | get_lang }}");
}
$('#frm-save-profile').modal('hide');
});
});
$(".facebook-auto").css("width","100%");
$(".facebook-auto ul").css("width","100%");
$("ul.holder").css("width","100%");
});
</script>
<div id="page-back" class="page-skill">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 skill-options">
<div class="skill-home">
<a class="btn btn-large btn-block btn-primary" href="{{ _p.web }}user_portal.php">
<em class="fa fa-home"></em> {{ "ReturnToCourseList"|get_lang }}
</a>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div id="saved_profiles"></div>
<h4 class="page-header">{{ 'WhatSkillsAreYouLookingFor'|get_lang }}</h4>
<div class="search-skill">
<form id="skill_search" class="form-search">
<select id="skill_id" name="skill_id" style="width: 100%;" multiple></select>
<table id="skill_holder" class="table table-condensed"></table>
</form>
</div>
<div class="search-profile-skill">
<ul id="profile_search" class="holder holder_simple hide"></ul>
<form id="search_profile_form" class="form-search">
<button class="btn btn-default btn-block" type="submit">
<em class="fa fa-search"></em> {{ "SearchProfileMatches"|get_lang }}
</button>
</form>
<h4 class="page-header">{{ 'IsThisWhatYouWereLookingFor'|get_lang }}</h4>
<form id="save_profile_form_button" class="form-search">
<button class="btn btn-default btn-block" type="submit">
<em class="fa fa-floppy-o"></em> {{ "SaveThisSearch"|get_lang }}
</button>
</form>
</div>
<hr>
<p>
<a class="btn btn-block btn-default load_root" rel="0" href="#">
<em class="fa fa-eye"></em> {{ "ViewSkillsWheel"|get_lang }}
</a>
</p>
</div>
</div>
<div class="panel-group" id="wheel-second-accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="wheel-legend-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-legend-collapse" aria-expanded="true" aria-controls="wheel-legend-collapse">
{{ "Legend"|get_lang }}
</a>
</h4>
</div>
<div id="wheel-legend-collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="wheel-legend-heading">
<div class="panel-body">
<ul class="fa-ul">
<li>
<em class="fa fa-li fa-square skill-legend-basic"></em> {{ "BasicSkills"|get_lang }}
</li>
<li>
<em class="fa fa-li fa-square skill-legend-add"></em> {{ "SkillsYouCanLearn"|get_lang }}
</li>
<li>
<em class="fa fa-li fa-square skill-legend-search"></em> {{ "SkillsSearchedFor"|get_lang }}
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="wheel-display-heading">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-display-collapse" aria-expanded="false" aria-controls="wheel-display-collapse">
{{ 'DisplayOptions' | get_lang }}
</a>
</h4>
</div>
<div id="wheel-display-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="wheel-display-heading">
<div class="panel-body">
<p>{{ 'ChooseABackgroundColor' | get_lang }}</p>
<ul class="list-unstyled" id="skill-change-background-options">
<li><a href="#" data-color="#FFFFFF">{{ 'White' | get_lang }}</a></li>
<li><a href="#" data-color="#000000">{{ 'Black' | get_lang }}</a></li>
<li><a href="#" data-color="#A9E2F3">{{ 'LightBlue'|get_lang }}</a></li>
<li><a href="#" data-color="#848484">{{ 'Gray' | get_lang }}</a></li>
<li><a href="#" data-color="#F7F8E0">{{ 'Corn' | get_lang }}</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="wheel_container" class="col-md-9">
<div id="skill_wheel">
<img src="">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="frm-skill" tabindex="-1" role="dialog" aria-labelledby="form-skill-title" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="form-skill-title">{{ "Skill" | get_lang }}</h4>
</div>
<div class="modal-body">
{{ dialogForm }}
</div>
<div class="modal-footer">
<button id="form-button-edit" class="btn btn-primary">
<em class="fa fa-edit"></em> {{ "Edit" | get_lang }}
</button>
<button id="form-button-create-child" class="btn btn-primary">
<em class="fa fa-plus"></em> {{ "CreateChildSkill" | get_lang }}
</button>
<button id="form-button-add-to-profile" class="btn btn-primary">
<em class="fa fa-check"></em> {{ "AddSkillToProfileSearch" | get_lang }}
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">
<em class="fa fa-close"></em> {{ "Close" | get_lang }}
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="frm-save-profile" tabindex="-1" role="dialog" aria-labelledby="form-save-profile-title" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="form-save-profile-title">{{ "SkillProfile" | get_lang }}</h4>
</div>
<div class="modal-body">
{{ save_profile_form }}
</div>
<div class="modal-footer">
<button id="form-button-save-profile" class="btn btn-primary">
<em class="fa fa-save"></em> {{ "Save" | get_lang }}
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">
<em class="fa fa-close"></em> {{ "Close" | get_lang }}
</button>
</div>
</div>
</div>
</div>

320
main/template/default/skill/skill_wheel_student.tpl Normal file
View File

@@ -0,0 +1,320 @@
{% include 'skill/skill_wheel.js.tpl'|get_template %}
<script>
/* Skill search input in the left menu */
function check_skills_sidebar() {
//Selecting only selected skills
$("#skill_id option:selected").each(function () {
var skill_id = $(this).val();
if (skill_id != "") {
$.ajax({
url: "{{ url }}&a=skill_exists",
data: "skill_id=" + skill_id,
// async: false,
success: function (return_value) {
if (return_value == 0) {
alert("{{ 'SkillDoesNotExist'|get_lang }}");
//Deleting select option tag
//$("#skill_id option[value="+skill_id+"]").remove();
$("#skill_id").empty();
//Deleting holder
$("#skill_search .holder li").each(function () {
if ($(this).attr("rel") == skill_id) {
$(this).remove();
}
});
} else {
$("#skill_id option[value=" + skill_id + "]").remove();
//Deleting holder
$("#skill_search .holder li").each(function () {
if ($(this).attr("rel") == skill_id) {
$(this).remove();
}
});
if ($('#skill_to_select_id_' + skill_id).length == 0) {
skill_info = get_skill_info(skill_id);
li = fill_skill_search_li(skill_id, skill_info.name);
$("#skill_holder").append(li);
}
}
}
});
}
});
}
function fill_skill_search_li(skill_id, skill_name, checked) {
checked_condition = '';
if (checked == 1) {
checked_condition = 'checked=checked';
}
return '\
<tr>\n\
<td>' + skill_name + '</td>\n\
<td class="text-right">\n\
<button type="button" id="skill_to_select_id_' + skill_id + '" class="btn btn-warning btn-sm load_wheel" data-id="' + skill_id + '" title="{{ 'PlaceOnTheWheel'|get_lang }}" aria-label="{{ 'PlaceOnTheWheel'|get_lang }}">\n\
<span class="fa fa-crosshairs fa-fw" aria-hidden="true"></span>\n\
</button>\n\
</td>\n\
</tr>';
}
function load_skill_info(skill_id) {
$.ajax({
url: url + '&a=get_skill_course_info&id=' + skill_id,
async: false,
success: function (data) {
$('#skill_info').html(data);
return data;
}
});
}
$(document).ready(function () {
/* Skill search */
/* Skill item list onclick */
$("#skill_holder").on("click", "input.skill_to_select", function () {
skill_id = $(this).attr('rel');
skill_name = $(this).attr('name');
add_skill_in_profile_list(skill_id, skill_name);
});
/* URL link when searching skills */
$("#skill_holder").on("click", "button.load_wheel", function () {
skill_id = $(this).data('id') || 0;
skill_to_load_from_get = 0;
load_nodes(skill_id, main_depth);
load_skill_info(skill_id);
});
/* URL link when searching skills */
$("a.load_root").on("click", function (e) {
e.preventDefault();
skill_id = $(this).attr('rel');
skill_to_load_from_get = 0;
load_nodes(skill_id, main_depth);
});
/* When clicking in a course title */
$("#skill_info").on("click", "a.course_description_popup[rel]", function (e) {
e.preventDefault();
var getCourseInfo = $.ajax(url, {
data: {
a: 'get_course_info_popup',
code: $(this).attr('rel')
}
}
);
$.when(getCourseInfo).done(function (response) {
$('#frm-course-info').find('.modal-body').html(response);
$('#frm-course-info').modal('show');
});
});
/* change background color */
$('#skill-change-background-options li a').on('click', function (e) {
e.preventDefault();
var newBackgroundColor = $(this).data('color') || '#FFF';
$("#page-back").css("background", newBackgroundColor);
});
/* Wheel skill popup form */
$("#skill_id").select2({
ajax: {
url: '{{ url }}&a=find_skills',
processResults: function (data) {
return {
results: data.items
};
}
},
cache: false,
placeholder: '{{ 'EnterTheSkillNameToSearch'|get_lang }}'
}).on('change', function () {
check_skills_sidebar();
});
load_nodes(0, main_depth);
$('#frm-course-info').on('', function () {
$('#frm-course-info').find('.modal-body').html('');
});
$(".facebook-auto").css("width","100%");
$(".facebook-auto ul").css("width","100%");
$("ul.holder").css("width","100%");
});
</script>
<div id="page-back" class="page-skill">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 skill-options">
<p class="skill-home">
<a class="btn btn-large btn-block btn-primary" href="{{ _p.web }}user_portal.php">
<em class="fa fa-home"></em> {{ "ReturnToCourseList"|get_lang }}
</a>
</p>
<div class="panel panel-default">
<div class="panel-body">
<figure class="text-center">
<img width="100px" src="{{ user_info.avatar }}" class="img-circle center-block">
<figcaption class="avatar-author">{{ user_info.complete_name }}</figcaption>
</figure>
<p class="text-center">
<a href="{{ _p.web_main }}social/skills_ranking.php" class="btn btn-default" target="_blank">
{{ 'YourSkillRankingX'|get_lang|format(ranking) }}
</a>
</p>
<div class="text-center">
{% if skills is not empty %}
{% for skill in skills %}
{{ skill.img_small }}
{% endfor %}
{% endif %}
{% for i in 1..(5 - ranking) %}
<img src="{{ 'badges-default.png'|icon(64) }}" width="64" height="64">
{% endfor %}
</div>
</div>
</div>
<!-- ACCORDION -->
<div class="accordion" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
{{ 'GetNewSkills'|get_lang }}
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- SEARCH -->
<div class="search-skill">
<h5 class="page-header">{{ 'SkillsSearch'|get_lang }}</h5>
<form id="skill_search" class="form-search">
<select id="skill_id" name="skill_id" multiple style="width: 100%;"></select>
<table id="skill_holder" class="table table-condensed"></table>
</form>
</div>
<!-- END SEARCH -->
<!-- INFO SKILL -->
<h5 class="page-header">{{ 'SkillInfo'|get_lang }}</h5>
<div id="skill_info"></div>
<!-- END INFO SKILL -->
<p>
<a class="btn btn-default btn-block load_root" rel="0" href="#">
<em class="fa fa-eye"></em> {{ "ViewSkillsWheel"|get_lang }}
</a>
</p>
</div>
</div>
</div>
</div>
<div class="panel-group" id="wheel-second-accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="wheel-legend-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-legend-collapse" aria-expanded="true" aria-controls="wheel-legend-collapse">
{{ "Legend"|get_lang }}
</a>
</h4>
</div>
<div id="wheel-legend-collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="wheel-legend-heading">
<div class="panel-body">
<ul class="fa-ul">
<li>
<em class="fa fa-li fa-square skill-legend-basic"></em> {{ "BasicSkills"|get_lang }}
</li>
<li>
<em class="fa fa-li fa-square skill-legend-badges"></em> {{ "SkillsYouAcquired"|get_lang }}
</li>
<li>
<em class="fa fa-li fa-square skill-legend-add"></em> {{ "SkillsYouCanLearn"|get_lang }}
</li>
<li>
<em class="fa fa-li fa-square skill-legend-search"></em> {{ "SkillsSearchedFor"|get_lang }}
</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="wheel-display-heading">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#wheel-second-accordion" href="#wheel-display-collapse" aria-expanded="false" aria-controls="wheel-display-collapse">
{{ 'DisplayOptions'|get_lang }}
</a>
</h4>
</div>
<div id="wheel-display-collapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="wheel-display-heading">
<div class="panel-body">
<p>{{ 'ChooseABackgroundColor'|get_lang }}</p>
<ul class="list-unstyled" id="skill-change-background-options">
<li><a href="#" data-color="#FFFFFF">{{ 'White'|get_lang }}</a></li>
<li><a href="#" data-color="#000000">{{ 'Black'|get_lang }}</a></li>
<li><a href="#" data-color="#A9E2F3">{{ 'LightBlue'|get_lang }}</a></li>
<li><a href="#" data-color="#848484">{{ 'Gray'|get_lang }}</a></li>
<li><a href="#" data-color="#F7F8E0">{{ 'Corn'|get_lang }}</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- END ACCORDEON -->
</div>
<div id="wheel_container" class="col-md-9">
<div id="skill_wheel">
<img src="">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="frm-skill" tabindex="-1" role="dialog" aria-labelledby="form-skill-title" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="form-skill-title">{{ "Skill" | get_lang }}</h4>
</div>
<div class="modal-body">
{{ dialogForm }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">
{{ "Close" | get_lang }}
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="frm-course-info" tabindex="-1" role="dialog" aria-labelledby="form-course-info-title" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="{{ "Close" | get_lang }}">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="form-course-info-title">{{ "ChooseCourse" | get_lang }}</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">{{ "Close" | get_lang }}</button>
</div>
</div>
</div>
</div>

40
main/template/default/skill/student_boss_report.tpl Normal file
View File

@@ -0,0 +1,40 @@
{% if allow_skill_tool %}
<div class="btn-group">
<a class="btn btn-default" href="{{ _p.web_main }}social/skills_wheel.php">
{{ 'SkillsWheel' | get_lang }}
</a>
</div>
{% endif %}
<h1 class="page-header">{{ 'SkillsAcquired' | get_lang }}</h1>
{{ form }}
{% if rows %}
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>{{ 'Student' | get_lang }}</th>
<th>{{ 'SkillsAcquired' | get_lang }}</th>
<th>{{ 'Date' | get_lang }}</th>
<th>{{ 'Course' | get_lang }}</th>
</tr>
</thead>
<tbody>
{% for row in rows %}
<tr>
<td>{{ row.complete_name }}</td>
<td>{{ row.skill_name }}</td>
<td>{{ row.achieved_at }}</td>
<td>
{% if not row.course_name is empty %}
<img src="{{ row.course_image }}" alt="{{ row.course_name }}"> {{ row.course_name }}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}

49
main/template/default/skill/student_report.tpl Normal file
View File

@@ -0,0 +1,49 @@
{% if allow_skill_tool %}
<div class="btn-group">
<a class="btn btn-default" href="{{ _p.web_main }}social/skills_wheel.php">
{{ 'SkillsWheel' | get_lang }}
</a>
<a class="btn btn-default" href="{{ _p.web_main }}social/my_skills_report.php?a=generate">
{{ 'RecalculateResults' | get_lang }}
</a>
</div>
{% endif %}
{% if rows %}
<h1 class="page-header">{{ 'SkillsAcquired' | get_lang }}</h1>
<table class="table">
<thead>
<tr>
<th>{{ 'Badge' | get_lang }}</th>
<th>{{ 'Skill' | get_lang }}</th>
<th>{{ 'Date' | get_lang }}</th>
<th>{{ 'Course' | get_lang }}</th>
</tr>
</thead>
<tbody>
{% for row in rows %}
<tr>
<td>
<a href="{{ row.skill_url }}">
{{ row.skill_badge }}
</a>
</td>
<td>{{ row.skill_name }}</td>
<td>{{ row.achieved_at }}</td>
{% if row.course_name %}
<td>
<img src="{{ row.course_image }}" alt="{{ row.course_name }}" width="32">
{{ row.course_name }}
</td>
{% else %}
<td> - </td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
{% if skill_table %}
{{ skill_table }}
{% endif %}
{% endif %}

11
main/template/default/skill/user_skills.tpl Normal file
View File

@@ -0,0 +1,11 @@
{% if skills is not empty %}
<ul class="skill-winner">
{%for skill in skills %}
<li>
<a class="" rel="{{ skill.id}}" href="#">{{ skill.name }}</a>
</li>
{% endfor %}
</ul>
{% else %}
{{ 'YouHaveNotYetAchievedSkills' | get_lang }}
{% endif %}