codigo javascript gerador de lista xml

marfegte · Março 20, 2017

eu tenho um codigo pra gera lista em xml
nao to conseguindo salva o codigo gerado no servidor e deixar ele gravado na tabela no site para editor

https://codepen.io/marfegte/pen/mWXzBG

index.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Gerador lista xml</title>
<link rel="stylesheet" type="text/css" media="all" href="generator.css" />
<script src="codigo.js" type="text/javascript"></script>
</head>
<body onload="init()">

		
		<h1><a href="http://playlist-generator.com/"></a>IPTV Gerador Lista xml</h1>
		<noscript><p id="no_javascript">IPTV Gerador Lista xml usado JavaScript</p></noscript>
		<form id="playlistform" action="" onsubmit="return false;">
			<table>
				<thead>
					<tr>
						<th>Titulo</th>
						<th>Link</th>
						<th>Thumbnail</th>
						<th>Fanart</th>
						<th>Info</th>
						
						<th><span class="desc" title="duration (in milliseconds)">Opção</span></th>
					</tr>
				</thead>
				<tbody id="playlist"></tbody>
			</table>
		</form>
		
		<p style="margin-top: 3em;">playlist.xml</p>

		<pre id="playlistcode"></pre>

</body>
</html>

codigo.js

var TYPE_TITLE = 0;
var TYPE_LINK = 1;
var TYPE_THUMBNAIL = 2;
var TYPE_FANART = 3;
var TYPE_INFO = 4;
var COUNT_COLUMNS = 6;

function htmlentities(str) {
	str = str.replace(/&/g, "&amp;");
	str = str.replace(/"/g, "&quot;");
	str = str.replace(/</g, "&lt;");
	str = str.replace(/>/g, "&gt;");
	return str;
}
function nl2br(str) {
	str = str.replace(/\n/g, "<br/>");
	return str;
}
function update() {
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");	
	var code = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";
	code += "  \n";	
	for (var index = 0; index < rows.length; index++) {
		var inputFields = rows[index].getElementsByTagName("input");		
		code += "    <item>\n";		
		for (var j = 0; j < inputFields.length; j++) {			
			var type = "";
			var value = inputFields[j].value;			
			switch (j) {
			case TYPE_TITLE:
				type = "title";
				break;
			case TYPE_LINK:
				type = "link";
				break;
			case TYPE_THUMBNAIL:
				type = "thumbnail";
				break;
			case TYPE_FANART:
				type = "fanart";
				break;
			case TYPE_INFO:
				type = "info";
				break;
			
			}
			
			if (type == "link" || value != "") {
				code += "      <" + type + ">" + htmlentities(value) + "</" + type + ">\n";
			}
			
		}		
		code += "    </item>\n";
		code += "    \n";
	}	
	document.getElementById("playlistcode").innerHTML = nl2br(htmlentities(code));
}

function updateTable() {
	$("#results").html('')
 
	
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");	
	for (var index = 0; index < rows.length; index++) {
		var row = rows[index];
		var cols = row.getElementsByTagName("td");	
		var content = "<a href=\"#\" title=\"adicionar um novo\" onclick=\"addTrack(" + (index + 1) + "); return false;\">Adicionar</a> <a href=\"#\" title=\"remove this track\" onclick=\"removeTrack(" + index + "); return false;\">Apagar</a>";
		cols[cols.length - 1].innerHTML = content;
	}
}
function addTrack(index) {
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");	
	var newRow = document.createElement("tr");
	for (var i = 0; i < COUNT_COLUMNS; i++) {
		var newColumn = document.createElement("td");		
		if (i < COUNT_COLUMNS - 1) {
			
			var inputField = document.createElement("input");
			inputField.setAttribute("type", "text");
			inputField.onchange = update;
			inputField.onkeyup = update;
			newColumn.appendChild(inputField);
		} else {			
			newColumn.setAttribute("class", "options");
		}		
		newRow.appendChild(newColumn);
	}
	
	if (index == rows.length) {
		playlist.appendChild(newRow);
	} else {
		playlist.insertBefore(newRow, rows[index]);
	}	
	updateTable();
	update();
}
function removeTrack(index) {
	var playlist = document.getElementById("playlist");
	var rows = playlist.getElementsByTagName("tr");
	
	if (rows.length > 1 && window.confirm("Tem certeza que deseja apagar?")) {
		playlist.removeChild(rows[index]);		
		updateTable();
		update();
	}
}

function init() {
	addTrack(0);
	document.getElementById("playlist").getElementsByTagName("tr")[0].getElementsByTagName("input")[0].value = "";
	update();
}

generator.css

body, td {
	font-family: Verdana, Arial, sans-serif;
	font-size: 10pt;
}

a {
	color: #0000ff;
}

a:hover {
	color: #6666ff;
}

#no_javascript {
	background-color: #cc0000;
	color: #ffffff;
	padding: 0.5em;
	border: 2px dashed #000000;
}

h1 {
	font-size: 150%;
	font-weight: bold;
}

h2 {
	margin-top: 1em;
	font-size: 120%;
	font-weight: bold;
}

table {
	width: 100%;
	margin-top: 1em;
}

th {
	font-size: 100%;
	font-weight: bold;
	text-align: center;
	background-color: #ccccff;
	padding: 0.1em 0.3em 0.1em 0.3em;
	border: 1px solid #aaaaff;
}

td {
	padding: 0;
	text-align: center;
	border: 1px solid #660000;
}

td input {
	width: 100%;
	height: 100%;
	border: 0;
	background-color: #ffffff;
}

td input:hover {
	background-color: #eeeeff;
}

td input:focus {
	background-color: #ddddff;
}

#playlistcode {
	background-color: #ccccff;
	padding: 0.3em;
	border: 1px solid #aaaaff;
	font-size: 10pt;
	font-family: "Courier New",Verdana,sans-serif;
}

.desc {
	border-bottom: 
}

.options {
	white-space: nowrap;
	background-color: #ccccff;
	padding: 0.3em;
	font-weight: bold;
	border: 1px solid #aaaaff;
	font-size: 10pt;
	text-align: center;
	font-family: "Verdana,sans-serif;
	
}