{% extends "repo_master.html" %}
{% from "_formhelper.html" import render_field, render_bootstrap_field, show_comment, show_initial_comment %}
{% block title %}Issue #{{ issueid }}: {{issue.title | noJS(ignore="img") | safe }} - {{ repo.name }}{% endblock %}
{% set tag = "home"%}
{% block header %}
<link href="{{ url_for('static', filename='fontawesome/font-awesome.min.css') }}"
rel="stylesheet" />
<link href="{{ url_for('static', filename='emoji/emojione.sprites.css') }}"
rel="stylesheet" />
<link href="{{ url_for('static', filename='selectize.bootstrap3.css') }}"
rel="stylesheet" />
{% endblock %}
{% block repo %}
<div class="row m-t-2">
<div class="col-md-8">
<h2>
<span class="issueid label label-default">#{{ issueid }}</span>
<span id="issuetitle">{{issue.title | noJS("img") | safe }}</span>
{% if issue.private %}
<span class="oi red-icon" data-glyph="lock-locked" title="Private issue"></span>
{% endif %}
</h2>
<h5 class="text-muted">
<a href="#" data-toggle="tooltip">Created</a>
{{ issue.date_created | humanize}} by {{ issue.user.user }}
</h5>
{{ show_initial_comment(issue, username, repo,issueid, repo_admin, form) }}
<form action="{{ url_for('update_issue', username=username,
repo=repo.name, issueid=issueid) }}" method="post"
onsubmit="return try_async_comment(this)">
{{ form.csrf_token }}
<section id="comments">
{% if issue.comments %}
{% for comment in issue.comments %}
{{ show_comment(comment, comment.id, repo, username, issueid, form, repo_admin) }}
{% endfor %}
{% endif %}
</section>
</form>
<div class="card">
<div class="card-header">
<section class="issue_comment add_comment">
{% if authenticated and form %}
<form action="{{ url_for('update_issue', username=username,
repo=repo.name, issueid=issueid) }}" method="post"
onsubmit="return try_async_comment(this)"
enctype="multipart/form-data">
{{ form.csrf_token }}
<fieldset class="form-group">
<label for="comment"><strong>Add new comment</strong></label>
<small class="text-muted pull-xs-right">
<span class="btn btn-sm btn-secondary inactive"
aria-pressed="false" id="previewinmarkdown">Preview
</span>
</small>
<textarea class="form-control" rows=8 id="comment" name="comment"
placeholder="Enter your comment here" tabindex=1></textarea>
<div id="preview">
</div>
</fieldset>
Select files OR drag them into the comment field below.
<input id="file-picker" type="file" name="file" accept="image/*" multiple tabindex=3 />
<fieldset id="progress" style="display: none">
<div class="progress-trough">
<div id="progress-bar" class="progress-bar">0%</div>
</div>
</fieldset>
<a href="http://daringfireball.net/projects/markdown/syntax"
target="_blank">Markdown Syntax</a>
<input type="hidden" name="tag" value="{{ issue.tags_text | join(',') }}" >
<input type="hidden" name="assignee" value="{{ issue.assignee.username or '' }}" >
<input type="hidden" name="blocks" value="{{ issue.blocks_text | join(',') }}">
<input type="hidden" name="depends" value="{{ issue.depends_text | join(',') }}">
<div>
<input type="submit" class="btn btn-primary"
value="Update Issue" tabindex=2 />
<input type="button" class="btn btn-secondary"
value="Clear" id="clear_comment" tabindex=4 />
</div>
</form>
{% else %}
<p>
<a href="{{ url_for('auth_login', next=request.url) }}">Login</a>
to comment on this ticket.
</p>
{% endif %}
</section>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
{% if authenticated and form %}
<form action="{{ url_for('update_issue', username=username,
repo=repo.name, issueid=issueid) }}" method="post"
onsubmit="return try_async_comment(this)"
enctype="multipart/form-data">
{{ form.csrf_token }}
{% endif %}
<fieldset class="form-group issue-metadata-display">
<label><strong>Status</strong></label>
<h2 id="status">
<span class="label label-success">{{ issue.status }}</span>
</h2>
</fieldset>
{% if authenticated and repo_admin %}
{{ render_bootstrap_field(form.status, formclass="issue-metadata-form") }}
{% endif%}
<fieldset class="form-group issue-metadata-display">
<label><strong>Tags</strong></label>
<h4 id="taglist">
{% for tag in issue.tags %}
<a id="tag-{{ tag.tag }}" class="label label-default"
href="{{ url_for('view_issues', username=username,
repo=repo.name, tags=tag.tag) }}">
{{ tag.tag }}
</a>
{% endfor %}
</h4>
</fieldset>
{% if authenticated and repo_admin %}
<fieldset class="form-group issue-metadata-form">
<label for="tag"><strong>Tags</strong></label>
<input id="tag" type="text" value="{{ issue.tags_text | join(',') }}" placeholder="tag1, tag2" name="tag" title="comma separated list of tags">
</fieldset>
{% endif%}
<fieldset class="form-group issue-metadata-display">
<label><strong>Assignee</strong></label>
<div id="assignee_plain">
{% if issue.assignee %}
<a href="{{ url_for('view_issues', username=username, repo=repo.name, assignee=issue.assignee.username) }}">{{ issue.assignee.username }}</a>
{% else %}
unassigned
{% endif %}
</div>
</fieldset>
{% if authenticated and repo_admin %}
<fieldset class="form-group issue-metadata-form">
<label for="assignee"><strong>Assignee</strong></label>
<input class="form-control" value="{{ issue.assignee.username or '' }}" name="assignee" id="assignee" placeholder="username" >
</fieldset>
{% endif%}
<fieldset class="form-group issue-metadata-display">
<label><strong>Blocked</strong></label>
<div id="blocklist">
{% for ticket in issue.parents %}
<a id="block-{{ ticket.id }}" class="label label-default"
href="{{ url_for('view_issue', username=username,
repo=repo.name, issueid=ticket.id)
}}" >#{{ ticket.id }}</a>
{% endfor %}
</div>
</fieldset>
{% if authenticated and repo_admin %}
<fieldset class="form-group issue-metadata-form">
<label for="blocks"><strong>Blocked</strong></label>
<input class="form-control" id="blocks" type="text" placeholder="issue blocked" name="blocks" value="{{ issue.blocks_text | join(',') }}">
</fieldset>
{% endif%}
<fieldset class="form-group issue-metadata-display">
<label><strong>Depends on</strong></label>
<div id="dependlist">
{% for ticket in issue.children %}
<a id="depend-{{ ticket.id }}" class="label label-default"
href="{{ url_for('view_issue', username=username,
repo=repo.name, issueid=ticket.id)
}}">#{{ ticket.id }}</a>
{% endfor %}
</div>
</fieldset>
{% if authenticated and repo_admin %}
<fieldset class="form-group issue-metadata-form">
<label for="depends"><strong>Depends on</strong></label>
<input class="form-control" id="depends" type="text" placeholder="issue depending" name="depends" value="{{ issue.depends_text | join(',') }}">
</fieldset>
{% endif%}
<input type="submit" class="btn btn-primary issue-metadata-form" value="Update">
<a class="btn btn-secondary issue-metadata-form editmetadatatoggle" >cancel</a>
{% if authenticated and form %}
</form>
{% endif %}
{% if authenticated and repo_admin %}
<a class="btn btn-secondary issue-metadata-display editmetadatatoggle" >Edit Metadata</a>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
{% block jscripts %}
{{ super() }}
<script type="text/javascript">
var UPLOAD_URL = "{{ url_for('upload_issue', repo=repo.name, issueid=issue.id, username=username) }}";
</script>
<script type="text/javascript"
src="{{ url_for('static', filename='emoji/jquery.textcomplete.min.js') }}">
</script>
<script type="text/javascript"
src="{{ url_for('static', filename='emoji/emojione.min.js') }}">
</script>
<script type="text/javascript"
src="{{ url_for('static', filename='upload.js') }}">
</script>
<script type="text/javascript" src="{{ url_for('static', filename='selectize.min.js') }}"></script>
<script type="text/javascript">
{% if authenticated and form %}
$(document).ready(function() {
// Set up the drag/drop zone.
initDropbox("{{ form.csrf_token.current_token }}", "#comment");
// Set up the handler for the file input box.
$("#file-picker").on("change", function() {
doUpload("{{ form.csrf_token.current_token }}", this.files);
});
});
{% endif %}
function setup_edit_btns() {
$(".edit_btn").unbind();
$(".edit_btn").click(function() {
var commentid = $( this ).attr('data-comment');
var _url = '{{ request.base_url }}' + '/comment/' + commentid + '/edit';
$.ajax({
url: _url + '?js=1',
type: 'GET',
dataType: 'html',
success: function(res) {
var el = $('#comment-' + commentid);
var sec = el.parent().find('.issue_comment');
$(sec).hide();
el.parent().find('.issue_actions').hide();
$(sec).after(res);
cancel_edit_btn();
},
error: function() {
alert('Could not make edit work');
}
});
return false;
});
};
function cancel_edit_btn() {
$("#comment_update_cancel").unbind();
$("#comment_update_cancel").click(
function() {
$(this).closest('#comments').find('.issue_comment').show();
$(this).closest('#comments').find('.issue_actions').show();
$(this).closest('.edit_comment').remove();
return false;
});
};
function setup_reply_btns() {
$(".reply").unbind();
$( ".reply" ).click(
function() {
if ($(this).attr('data-toggle')){
var _section = $(this).closest('.card-block');
} else {
var _section = $(this).closest('.clearfix');
}
var _comment = _section.find('.comment_body');
var _text = _comment.text().split("\n");
var _output = new Array();
for (cnt = 0; cnt < _text.length ; cnt ++) {
_output[cnt] = '> ' + jQuery.trim(_text[cnt]);
}
$( "#comment" ).val(_output.join("\n"));
}
);
};
$(document).ready(function() {
var cur_hash = null;
highlight_comment = function() {
var _hash = window.location.hash;
if (_hash != cur_hash) {
$( cur_hash ).css(
"background", "linear-gradient(to bottom, #ededed 0%, #fff 100%)"
);
};
cur_hash = _hash;
if ( _hash ) {
$( _hash ).css(
"background", "linear-gradient(to bottom, #eded98 0%, #fff 100%)"
);
};
return false;
};
$(window.onload=highlight_comment());
$(window).on('hashchange', highlight_comment);
cancel_edit_btn();
setup_edit_btns();
setup_reply_btns();
});
</script>
{% if config['EVENTSOURCE_SOURCE'] and not issue.private %}
<script type="text/javascript"
src="{{ url_for('static', filename='issue_ev.js') }}"></script>
<script type="text/javascript">
var source = null;
var sse = true;
if (!!window.EventSource) {
source = new EventSource('{{ config["EVENTSOURCE_SOURCE"]
+ request.script_root + request.path }}');
source.addEventListener('error', function(e) {
sse = false;
}, false);
}
window.onbeforeunload = function() {
source.close()
};
source.addEventListener('message', function(e) {
console.log(e.data);
var data = $.parseJSON(e.data);
var _issues_url ='<a href="{{
url_for('view_issues', username=username, repo=repo.name)}}';
var _api_issues_url ='{{
url_for('api_ns.api_view_issue', username=username,
repo=repo.name, issueid='-123456789')}}';
var _issue_url ='{{
url_for('view_issue', username=username,
repo=repo.name, issueid='-123456789')}}';
process_event(data, "{{ issue.uid }}", _issue_url,
_issues_url, _api_issues_url,
"{{ g.fas_user.username }}");
setup_edit_btns();
setup_reply_btns();
}, false);
{% if authenticated and form %}
function try_async_comment(form) {
$(form).find('input[type="submit"]').attr("disabled", "disabled");
var _data = $(form).serialize();
var btn = $(document.activeElement);
if (btn[0].name == 'drop_comment'){
_data += '&drop_comment=' + btn[0].value;
return true;
}
if (!sse) {
$(form).off('submit');
form.submit();
return false;
}
var _url = form.action + "?js=1";
$.post( _url, _data )
.done(function(data) {
if(data == 'ok') {
{# The event-source server will automatically refresh the UI #}
$('#comment').val('');
$('#comments').find('.comment_body').show();
$('#comments').find('.edit_comment').remove();
$( ".issue-metadata-form" ).hide();
$( ".issue-metadata-display" ).show();
} else {
// Make the browser submit the form sync
$(form).off('submit');
form.submit();
}
})
.fail(function() {
// Make the browser submit the form sync
$(form).off('submit');
form.submit();
})
$(form).find('input[type="submit"]').removeAttr("disabled");
return false;
};
{% endif %}
</script>
{% endif %}
<script type="text/javascript">
$( document ).ready(function() {
var emojiStrategy;
$.getJSON(
'{{ url_for("static", filename="emoji/emoji_strategy.json") }}',
function( data ) {
emojiStrategy = data;
}
);
var folder = '{{url_for("static", filename="emoji/png/") }}';
var json_url = '{{ url_for("static", filename="emoji/emoji_strategy.json") }}';
emoji_complete(json_url, folder);
$(".comment_body").each(function(ind, obj) {
var source = $(obj).html();
var preview = emojione.toImage(source);
$(obj).html(preview);
});
$( ".editmetadatatoggle" ).click(
function() {
$( ".issue-metadata-form" ).toggle();
$( ".issue-metadata-display" ).toggle();
}
);
$('#assignee').selectize({
valueField: 'user',
labelField: 'user',
searchField: 'user',
maxItems: 1,
create: false,
load: function(query, callback) {
if (!query.length) return callback();
$.getJSON(
"{{ url_for('api_ns.api_users') }}", {
pattern: query.term
},
function( data ) {
callback( data.users.map(function(x) { return { user: x }; }) );
}
);
}
});
$('#blocks').selectize({
plugins: ['remove_button'],
valueField: 'id',
labelField: 'id',
searchField: ['id', 'title'],
preload: 'focus',
render: {
option: function(item, escape) {
return '<div><span>'+escape(item.id)+'</span> <span>'+escape(item.title)+'</span></div>';
},
item: function(item, escape) {
return '<div><span>#'+escape(item.id)+'</span></div>';
},
},
create: false,
load: function(query, callback) {
$.getJSON(
"{{ url_for('api_ns.api_view_issues', username=username, repo=repo.name) }}",
function( data ) {
//console.log(data.issues);
callback(data.issues);
}
);
}
});
$('#depends').selectize({
plugins: ['remove_button'],
valueField: 'id',
labelField: 'id',
searchField: ['id', 'title'],
preload: 'focus',
render: {
option: function(item, escape) {
return '<div><span>'+escape(item.id)+'</span> <span>'+escape(item.title)+'</span></div>';
},
item: function(item, escape) {
return '<div><span>#'+escape(item.id)+'</span></div>';
},
},
create: false,
load: function(query, callback) {
$.getJSON(
"{{ url_for('api_ns.api_view_issues', username=username, repo=repo.name) }}",
function( data ) {
//console.log(data.issues);
callback(data.issues);
}
);
}
});
$( "#clear_comment").click(
function() {
$( "#comment" ).val("");
}
);
var available_tags = [];
{%for tog in tag_list %}
available_tags.push("{{tog.tag}}");
{%endfor%}
var items = available_tags.map(function(x) { return { item: x }; });
$('#tag').selectize({
delimiter: ',',
options: items,
persist: false,
create: true,
labelField: "item",
valueField: "item",
});
$( "#preview" ).hide();
$( "#previewinmarkdown" ).click(
function(event, ui) {
if ($( "#previewinmarkdown" ).hasClass("inactive")){
var _text = $( "#comment" ).val();
var _url = "{{ url_for('markdown_preview',
user=repo.user.user if repo.is_fork,
repo=repo.name) | safe}}";
$.ajax({
url: _url ,
type: 'POST',
data: {
content: _text,
csrf_token: "{{ form.csrf_token.current_token }}",
},
dataType: 'html',
success: function(res) {
var preview = emojione.toImage(res)
$( "#preview" ).html(preview);
$( "#previewinmarkdown" ).removeClass("inactive");
$( "#previewinmarkdown" ).addClass("active");
$( "#comment" ).hide();
$( "#preview" ).show();
},
error: function() {
alert('Unable to generate preview!');
}
});
return false;
} else if ($( "#previewinmarkdown" ).hasClass("active")){
$( "#previewinmarkdown" ).addClass("inactive");
$( "#previewinmarkdown" ).removeClass("active");
$( "#comment" ).show();
$( "#preview" ).hide();
}
}
);
});
</script>
{% endblock %}