mirror of
https://github.com/acatoire/bipbipzizik.git
synced 2026-03-10 08:01:18 +00:00
Removing outdated, unused files
This commit is contained in:
Julien Lengrand-Lambert
138
docs/card.js
138
docs/card.js
@@ -1,138 +0,0 @@
|
||||
|
||||
// from https://github.com/VoloshinS/firebase-crud-example
|
||||
|
||||
var config = {
|
||||
apiKey: "AIzaSyBDpWYywapzpuYJerHNe1aVNPsQGULBMN0",
|
||||
authDomain: "bipbipzizik.firebaseapp.com",
|
||||
databaseURL: "https://bipbipzizik.firebaseio.com",
|
||||
storageBucket: "bipbipzizik.appspot.com",
|
||||
};
|
||||
|
||||
firebase.initializeApp(config);
|
||||
var db = firebase.database();
|
||||
|
||||
|
||||
|
||||
// CREATE CARD
|
||||
var cardForm = document.getElementById('cardForm');
|
||||
var cardHiddenId = document.getElementById('hiddenIdText');
|
||||
var cardName = document.getElementById('nameText');
|
||||
var cardUser = document.getElementById('userText');
|
||||
var cardIds = document.getElementById('idsText');
|
||||
var cardAction = document.getElementById('actionText');
|
||||
var cardData = document.getElementById('dataText');
|
||||
var cardMode = document.getElementById('modeText');
|
||||
var cardComment = document.getElementById('commentText');
|
||||
|
||||
cardForm.addEventListener('submit', (e) =>
|
||||
{
|
||||
e.preventDefault();
|
||||
|
||||
//Prevent empty card
|
||||
if (!cardName.value || !cardIds.value || !cardAction.value || !cardData.value)
|
||||
{
|
||||
return null
|
||||
}
|
||||
|
||||
var id = cardHiddenId.value || Date.now()
|
||||
|
||||
db.ref('cards_prod/' + id).set(
|
||||
{
|
||||
name: cardName.value,
|
||||
ids: cardIds.value,
|
||||
action: cardAction.value,
|
||||
data: cardData.value,
|
||||
mode: cardMode.value,
|
||||
comment: cardComment.value
|
||||
}
|
||||
);
|
||||
|
||||
cardHiddenId.value = '';
|
||||
cardName.value = '';
|
||||
cardIds.value = '';
|
||||
cardAction.value = '';
|
||||
cardData.value = '';
|
||||
cardMode.value = '';
|
||||
cardComment.value = '';
|
||||
});
|
||||
|
||||
|
||||
// READ CARDS
|
||||
var cardsDiv = document.getElementById('cards');
|
||||
var cardsRef = db.ref('/cards_prod');
|
||||
|
||||
cardsRef.on('child_added', (data) => {
|
||||
var newDiv = document.createElement('div')
|
||||
newDiv.id = data.key;
|
||||
newDiv.className = "cardTile";
|
||||
newDiv.innerHTML = cardTemplate(data.val())
|
||||
cardsDiv.appendChild(newDiv);
|
||||
});
|
||||
|
||||
cardsRef.on('child_changed', (data) => {
|
||||
var node = document.getElementById(data.key);
|
||||
node.innerHTML = cardTemplate(data.val());
|
||||
});
|
||||
|
||||
cardsRef.on('child_removed', (data) => {
|
||||
var node = document.getElementById(data.key);
|
||||
node.parentNode.removeChild(node);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Action on CARD
|
||||
cardsDiv.addEventListener('click', (e) =>
|
||||
{
|
||||
var cardNode = e.target.parentNode
|
||||
|
||||
// Update card editor view
|
||||
if (e.target.classList.contains('edit'))
|
||||
{
|
||||
cardName.value = cardNode.querySelector('.nameTile').innerText;
|
||||
cardIds.value = cardNode.querySelector('.idsTile').innerText;
|
||||
cardUser.value = cardNode.querySelector('.userTile').innerText;
|
||||
cardAction.value = cardNode.querySelector('.actionTile').innerText;
|
||||
cardData.value = cardNode.querySelector('.dataTile').innerText;
|
||||
cardMode.value = cardNode.querySelector('.modeTile').innerText;
|
||||
cardComment.value = cardNode.querySelector('.commentTile').innerText;
|
||||
cardHiddenId.value = cardNode.id;
|
||||
}
|
||||
|
||||
// Delet card in database
|
||||
if (e.target.classList.contains('delete'))
|
||||
{
|
||||
var id = cardNode.id;
|
||||
db.ref('cards_prod/' + id).remove();
|
||||
}
|
||||
});
|
||||
|
||||
function cardTemplate({name, ids, user, action, data, mode, comment})
|
||||
{
|
||||
return `
|
||||
<div class='nameTile'>${name}</div>
|
||||
<div class='idsLabel'>Ids:</div>
|
||||
<div class='idsTile'>${ids}</div>
|
||||
<div class='userLabel'>User:</div>
|
||||
<div class='userTile'>${user}</div>
|
||||
<div class='actionLabel'>Action:</div>
|
||||
<div class='actionTile'>${action}</div>
|
||||
<div class='dataLabel'>Data:</div>
|
||||
<div class='dataTile'>${data}</div>
|
||||
<div class='modeLabel'>Mode:</div>
|
||||
<div class='modeTile'>${mode}</div>
|
||||
<div class='commentLabel'>Comment:</div>
|
||||
<div class='commentTile'>${comment}</div>
|
||||
<button class='delete'>Delete</button>
|
||||
<button class='edit'>Edit</button>
|
||||
`
|
||||
};
|
||||
|
||||
|
||||
function getUrlVars() {
|
||||
var vars = {};
|
||||
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
|
||||
vars[key] = value;
|
||||
});
|
||||
return vars;
|
||||
};
|
||||
@@ -1,69 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Firebase realtime database CRUD example</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<div class='header'>
|
||||
<img src="img/card.png" height="150" alt="">
|
||||
<h1>BipBipZiZik Cards editor</h1>
|
||||
<h4>
|
||||
This page allows to edit all cards.<br>
|
||||
Edit existing card or create a new one.
|
||||
</h4>
|
||||
<div id="firebase-login">
|
||||
<button id="firebase-login-button" onclick="logIn()">Log in using Google</button>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Cards</h2>
|
||||
<h4>CREATE/UPDATE</h4>
|
||||
<form id='cardForm'>
|
||||
<input type="hidden" id='hiddenIdText' />
|
||||
<div class=editBlock>
|
||||
<label for="nameText">Name</label>
|
||||
<input type="text" id='nameText' />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="userText">User</label>
|
||||
<input type="text" id="userText" />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="idsText">Ids</label>
|
||||
<input type="text" id="idsText" />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="actionText">Action</label>
|
||||
<input type="text" id='actionText' />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="dataText">Data</label>
|
||||
<input type="text" id="dataText" />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="modeText">Mode</label>
|
||||
<input type="text" id='modeText' />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="commentText">Comment</label>
|
||||
<input type="text" id="commentText" />
|
||||
</div>
|
||||
<div class=btnsBlock>
|
||||
<button type='submit'>Add/Update card</button>
|
||||
</div>
|
||||
</form>
|
||||
<br/>
|
||||
<h4>READ/DELETE</h4>
|
||||
<div id='cards'>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-auth.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-database.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-firestore.js"></script>
|
||||
<script src="cards.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
168
docs/cards.js
168
docs/cards.js
@@ -1,168 +0,0 @@
|
||||
|
||||
// from https://github.com/VoloshinS/firebase-crud-example
|
||||
|
||||
var config = {
|
||||
apiKey: "AIzaSyBDpWYywapzpuYJerHNe1aVNPsQGULBMN0",
|
||||
authDomain: "bipbipzizik.firebaseapp.com",
|
||||
databaseURL: "https://bipbipzizik.firebaseio.com",
|
||||
projectId: "bipbipzizik",
|
||||
storageBucket: "bipbipzizik.appspot.com",
|
||||
messagingSenderId: "800598547799",
|
||||
appId: "1:800598547799:web:3ee8db578f5c76da60f212",
|
||||
measurementId: "G-LPM9CG1HWR"
|
||||
};
|
||||
|
||||
firebase.initializeApp(config);
|
||||
var db = firebase.database();
|
||||
|
||||
var provider = new firebase.auth.GoogleAuthProvider();
|
||||
|
||||
function logIn(){
|
||||
console.log("Logging in");
|
||||
firebase.auth().signInWithPopup(provider).then(function(result) {
|
||||
var token = result.credential.accessToken;
|
||||
var user = result.user;
|
||||
|
||||
console.log("logged in");
|
||||
console.log(user);
|
||||
}).catch(function(error) {
|
||||
console.log("Error when logging in");
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
firebase.auth().onAuthStateChanged((user) =>{
|
||||
if (user) {
|
||||
console.log("user found");
|
||||
console.log(user);
|
||||
|
||||
const logInDiv = document.getElementById("firebase-login");
|
||||
const logInButton = document.getElementById("firebase-login-button");
|
||||
|
||||
logInDiv.innerText = user.email
|
||||
logInButton.style.display = "none";
|
||||
|
||||
} else {
|
||||
console.log("Not logged in");
|
||||
}
|
||||
});
|
||||
|
||||
// CREATE CARD
|
||||
var cardForm = document.getElementById('cardForm');
|
||||
var cardHiddenId = document.getElementById('hiddenIdText');
|
||||
var cardName = document.getElementById('nameText');
|
||||
var cardUser = document.getElementById('userText');
|
||||
var cardIds = document.getElementById('idsText');
|
||||
var cardAction = document.getElementById('actionText');
|
||||
var cardData = document.getElementById('dataText');
|
||||
var cardMode = document.getElementById('modeText');
|
||||
var cardComment = document.getElementById('commentText');
|
||||
|
||||
cardForm.addEventListener('submit', (e) =>
|
||||
{
|
||||
e.preventDefault();
|
||||
|
||||
//Prevent empty card
|
||||
if (!cardName.value || !cardIds.value || !cardAction.value || !cardData.value)
|
||||
{
|
||||
return null
|
||||
}
|
||||
|
||||
var id = cardHiddenId.value || Date.now()
|
||||
console.log(firebase.auth().currentUser.uid);
|
||||
|
||||
db.ref('cards_prod/' + id).set(
|
||||
{
|
||||
name: cardName.value,
|
||||
ids: cardIds.value,
|
||||
action: cardAction.value,
|
||||
data: cardData.value,
|
||||
mode: cardMode.value,
|
||||
comment: cardComment.value
|
||||
}
|
||||
);
|
||||
|
||||
cardHiddenId.value = '';
|
||||
cardName.value = '';
|
||||
cardIds.value = '';
|
||||
cardAction.value = '';
|
||||
cardData.value = '';
|
||||
cardMode.value = '';
|
||||
cardComment.value = '';
|
||||
});
|
||||
|
||||
|
||||
// READ CARDS
|
||||
var cardsDiv = document.getElementById('cards');
|
||||
var cardsRef = db.ref('/cards_prod');
|
||||
|
||||
cardsRef.on('child_added', (data) => {
|
||||
console.log("card added", data);
|
||||
var newDiv = document.createElement('div')
|
||||
newDiv.id = data.key;
|
||||
newDiv.className = "cardTile";
|
||||
newDiv.innerHTML = cardTemplate(data.val())
|
||||
cardsDiv.appendChild(newDiv);
|
||||
});
|
||||
|
||||
cardsRef.on('child_changed', (data) => {
|
||||
var node = document.getElementById(data.key);
|
||||
node.innerHTML = cardTemplate(data.val());
|
||||
});
|
||||
|
||||
cardsRef.on('child_removed', (data) => {
|
||||
var node = document.getElementById(data.key);
|
||||
node.parentNode.removeChild(node);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Action on CARD
|
||||
cardsDiv.addEventListener('click', (e) =>
|
||||
{
|
||||
var cardNode = e.target.parentNode
|
||||
|
||||
// Update card editor view
|
||||
if (e.target.classList.contains('edit'))
|
||||
{
|
||||
cardName.value = cardNode.querySelector('.nameTile').innerText;
|
||||
cardIds.value = cardNode.querySelector('.idsTile').innerText;
|
||||
cardUser.value = cardNode.querySelector('.userTile').innerText;
|
||||
cardAction.value = cardNode.querySelector('.actionTile').innerText;
|
||||
cardData.value = cardNode.querySelector('.dataTile').innerText;
|
||||
cardMode.value = cardNode.querySelector('.modeTile').innerText;
|
||||
cardComment.value = cardNode.querySelector('.commentTile').innerText;
|
||||
cardHiddenId.value = cardNode.id;
|
||||
}
|
||||
|
||||
// Delet card in database
|
||||
if (e.target.classList.contains('delete'))
|
||||
{
|
||||
var id = cardNode.id;
|
||||
console.log(firebase.auth().currentUser.uid);
|
||||
|
||||
db.ref('cards_prod/' + id).remove();
|
||||
}
|
||||
});
|
||||
|
||||
function cardTemplate({name, ids, user, action, data, mode, comment})
|
||||
{
|
||||
return `
|
||||
<div class='nameTile'>${name}</div>
|
||||
<div class='idsLabel'>Ids:</div>
|
||||
<div class='idsTile'>${ids}</div>
|
||||
<div class='userLabel'>User:</div>
|
||||
<div class='userTile'>${user}</div>
|
||||
<div class='actionLabel'>Action:</div>
|
||||
<div class='actionTile'>${action}</div>
|
||||
<div class='dataLabel'>Data:</div>
|
||||
<div class='dataTile'>${data}</div>
|
||||
<div class='modeLabel'>Mode:</div>
|
||||
<div class='modeTile'>${mode}</div>
|
||||
<div class='commentLabel'>Comment:</div>
|
||||
<div class='commentTile'>${comment}</div>
|
||||
<button class='delete'>Delete</button>
|
||||
<button class='edit'>Edit</button>
|
||||
`
|
||||
};
|
||||
@@ -1,74 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>BipBipZiZik Congigs editor</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class='container'>
|
||||
<div class='header'>
|
||||
<img src="img/config.png" height="150" alt="">
|
||||
<h1>BipBipZiZik Configs editor</h1>
|
||||
<h4>
|
||||
This page allows to edit all configs.<br>
|
||||
Find your raspberry ID and choose your config.
|
||||
</h4>
|
||||
<div id="firebase-login">
|
||||
<button id="firebase-login-button" onclick="logIn()">Log in using Google</button>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Configs</h2>
|
||||
<h4>CREATE/UPDATE</h4>
|
||||
<form id='configForm'>
|
||||
<input type="hidden" id='hiddenIdText' />
|
||||
<div class=editBlock>
|
||||
<label for="NameText">Name</label>
|
||||
<input type="text" id='NameText' />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="userText">User</label>
|
||||
<input type="text" id="userText" />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="idText">RaspberryId</label>
|
||||
<input type="text" id="idText" />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="sonosIpText">Sonos server ip</label>
|
||||
<input type="text" id='sonosIpText' />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="sonosPortText">Sonos server port</label>
|
||||
<input type="text" id="sonosPortText" />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="roomText">Room Name</label>
|
||||
<input type="text" id='roomText' />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="multiReadText">Multi read mode</label>
|
||||
<input type="text" id="multiReadText" />
|
||||
</div>
|
||||
<div class=editBlock>
|
||||
<label for="timeoutText">Card timeout</label>
|
||||
<input type="text" id="timeoutText" />
|
||||
</div>
|
||||
<div class=btnsBlock>
|
||||
<button type='submit'>Add/Update config</button>
|
||||
</div>
|
||||
</form>
|
||||
<br/>
|
||||
<h4>READ/DELETE</h4>
|
||||
<div id='configs'>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-app.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-auth.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-database.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-firestore.js"></script>
|
||||
<script src="configs.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
174
docs/configs.js
174
docs/configs.js
@@ -1,174 +0,0 @@
|
||||
|
||||
// from https://github.com/VoloshinS/firebase-crud-example
|
||||
|
||||
var config = {
|
||||
apiKey: "AIzaSyBDpWYywapzpuYJerHNe1aVNPsQGULBMN0",
|
||||
authDomain: "bipbipzizik.firebaseapp.com",
|
||||
databaseURL: "https://bipbipzizik.firebaseio.com",
|
||||
projectId: "bipbipzizik",
|
||||
storageBucket: "bipbipzizik.appspot.com",
|
||||
messagingSenderId: "800598547799",
|
||||
appId: "1:800598547799:web:3ee8db578f5c76da60f212",
|
||||
measurementId: "G-LPM9CG1HWR"
|
||||
};
|
||||
|
||||
firebase.initializeApp(config);
|
||||
var db = firebase.database();
|
||||
|
||||
var provider = new firebase.auth.GoogleAuthProvider();
|
||||
|
||||
function logIn(){
|
||||
console.log("Logging in");
|
||||
firebase.auth().signInWithPopup(provider).then(function(result) {
|
||||
var token = result.credential.accessToken;
|
||||
var user = result.user;
|
||||
|
||||
console.log("logged in");
|
||||
console.log(user);
|
||||
}).catch(function(error) {
|
||||
console.log("Error when logging in");
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
firebase.auth().onAuthStateChanged((user) =>{
|
||||
if (user) {
|
||||
console.log("user found");
|
||||
console.log(user);
|
||||
|
||||
const logInDiv = document.getElementById("firebase-login");
|
||||
const logInButton = document.getElementById("firebase-login-button");
|
||||
|
||||
logInDiv.innerText = user.email
|
||||
logInButton.style.display = "none";
|
||||
|
||||
} else {
|
||||
console.log("Not logged in");
|
||||
}
|
||||
});
|
||||
|
||||
// CREATE CONFIG
|
||||
var configForm = document.getElementById('configForm');
|
||||
var configHiddenId = document.getElementById('hiddenIdText');
|
||||
var configName = document.getElementById('NameText');
|
||||
var configUser = document.getElementById('userText');
|
||||
var configId = document.getElementById('idText');
|
||||
var configIp = document.getElementById('sonosIpText');
|
||||
var configPort = document.getElementById('sonosPortText');
|
||||
var configRoom = document.getElementById('roomText');
|
||||
var configMode = document.getElementById('multiReadText');
|
||||
var configTimeout = document.getElementById('timeoutText');
|
||||
|
||||
configForm.addEventListener('submit', (e) =>
|
||||
{
|
||||
e.preventDefault();
|
||||
|
||||
//Prevent empty Config
|
||||
if (!configName.value || !configUser.value || !configName.value || !configId.value)
|
||||
{
|
||||
return null
|
||||
}
|
||||
|
||||
var id = configHiddenId.value || Date.now()
|
||||
|
||||
db.ref('config_prod/' + id).set(
|
||||
{
|
||||
app_name: configName.value,
|
||||
app_owner: configUser.value,
|
||||
app_id: configId.value,
|
||||
sonos_server_ip: configIp.value,
|
||||
sonos_server_port: configPort.value,
|
||||
room_name: configRoom.value,
|
||||
multi_read_mode: configMode.value,
|
||||
card_timeout: configTimeout.value
|
||||
}
|
||||
);
|
||||
|
||||
configName = '';
|
||||
configUser = '';
|
||||
configId = '';
|
||||
configIp = '';
|
||||
configPort = '';
|
||||
configRoom = '';
|
||||
configMode = '';
|
||||
configTimeout = '';
|
||||
});
|
||||
|
||||
|
||||
// READ CONFIGS
|
||||
var configDiv = document.getElementById('configs');
|
||||
var configRef = db.ref('/config_prod');
|
||||
|
||||
configRef.on('child_added', (data) => {
|
||||
var newDiv = document.createElement('div')
|
||||
newDiv.id = data.key;
|
||||
newDiv.className = "configTile";
|
||||
newDiv.innerHTML = configTemplate(data.val())
|
||||
configDiv.appendChild(newDiv);
|
||||
});
|
||||
|
||||
configRef.on('child_changed', (data) => {
|
||||
var node = document.getElementById(data.key);
|
||||
node.innerHTML = configTemplate(data.val());
|
||||
});
|
||||
|
||||
configRef.on('child_removed', (data) => {
|
||||
var node = document.getElementById(data.key);
|
||||
node.parentNode.removeChild(node);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Action on config
|
||||
configDiv.addEventListener('click', (e) =>
|
||||
{
|
||||
var node = e.target.parentNode
|
||||
|
||||
// Update editor view
|
||||
if (e.target.classList.contains('edit'))
|
||||
{
|
||||
node.value = node.querySelector('.nameTile').innerText;
|
||||
|
||||
configName.value = node.querySelector('.nameTile').innerText;
|
||||
configUser.value = node.querySelector('.userTile').innerText;
|
||||
configId.value = node.querySelector('.idTile').innerText;
|
||||
configIp.value = node.querySelector('.ipTile').innerText;
|
||||
configPort.value = node.querySelector('.portTile').innerText;
|
||||
configRoom.value = node.querySelector('.roomTile').innerText;
|
||||
configMode.value = node.querySelector('.modeTile').innerText;
|
||||
configTimeout.value = node.querySelector('.timeoutTile').innerText;
|
||||
configHiddenId.value = node.id;
|
||||
}
|
||||
|
||||
// Delet config in database
|
||||
if (e.target.classList.contains('delete'))
|
||||
{
|
||||
var id = node.id;
|
||||
db.ref('config_prod/' + id).remove();
|
||||
}
|
||||
});
|
||||
|
||||
function configTemplate({app_name, app_owner, app_id, sonos_server_ip,
|
||||
sonos_server_port, room_name, multi_read_mode, card_timeout})
|
||||
{
|
||||
return `
|
||||
<div class='nameTile'>${app_name}</div>
|
||||
<div class='userLabel'>User:</div>
|
||||
<div class='userTile'>${app_owner}</div>
|
||||
<div class='idLabel'>Id:</div>
|
||||
<div class='idTile'>${app_id}</div>
|
||||
<div class='ipLabel'>Ip:</div>
|
||||
<div class='ipTile'>${sonos_server_ip}</div>
|
||||
<div class='portLabel'>Port:</div>
|
||||
<div class='portTile'>${sonos_server_port}</div>
|
||||
<div class='roomLabel'>Room:</div>
|
||||
<div class='roomTile'>${room_name}</div>
|
||||
<div class='modeLabel'>Mode:</div>
|
||||
<div class='modeTile'>${multi_read_mode}</div>
|
||||
<div class='timeoutLabel'>Timeout:</div>
|
||||
<div class='timeoutTile'>${card_timeout}</div>
|
||||
<button class='delete'>Delete</button>
|
||||
<button class='edit'>Edit</button>
|
||||
`
|
||||
};
|
||||
100
docs/main.css
100
docs/main.css
@@ -1,100 +0,0 @@
|
||||
body {
|
||||
font-family: Roboto, sans-serif;
|
||||
font-size: 16px;
|
||||
background-color: #FDFDFD;
|
||||
}
|
||||
|
||||
div, input, a, button, ul, li {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
width: 760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.editBlock{
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
.btnsBlock{
|
||||
text-align:center;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#cards {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #EEE;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 6px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.1);
|
||||
background-color: #fff;
|
||||
min-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#configs {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #EEE;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 6px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.1);
|
||||
background-color: #fff;
|
||||
min-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cardTile {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
padding: 10px;
|
||||
border: 1px solid #EEE;
|
||||
border-bottom: none;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.configTile {
|
||||
display: inline-block;
|
||||
width: 250px;
|
||||
padding: 10px;
|
||||
border: 1px solid #EEE;
|
||||
border-bottom: none;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea {
|
||||
border: 1px solid #EEE;
|
||||
display: block;
|
||||
width: 200px;
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 6px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.header h1,
|
||||
.header h4 {
|
||||
font-weight: normal;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.header img {
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.1),0 1px 1px rgba(0,0,0,.1);
|
||||
}
|
||||
Reference in New Issue
Block a user