Skip to content

Commit

Permalink
now using bootstrap instead of materialize
Browse files Browse the repository at this point in the history
  • Loading branch information
jacobmichels committed May 1, 2020
1 parent 1c8331c commit e25375e
Show file tree
Hide file tree
Showing 10 changed files with 292 additions and 189 deletions.
7 changes: 6 additions & 1 deletion electron/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion electron/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "boosted-app",
"productName": "boosted-app",
"version": "1.1.0",
"version": "1.2.0",
"description": "League Queue notifications",
"main": "src/index.js",
"scripts": {
Expand Down Expand Up @@ -61,6 +61,7 @@
}
},
"dependencies": {
"bootstrap": "^4.4.1",
"custom-electron-titlebar": "^3.2.2-hotfix62",
"edit-json-file": "^1.4.0",
"electron-squirrel-startup": "^1.0.0",
Expand Down
155 changes: 106 additions & 49 deletions electron/src/config.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,122 @@
<html>

<head>
<meta charset="UTF-8">
<title>Boosted: Configuration</title>
<link rel="stylesheet" href="index.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<link rel="stylesheet" type="text/css" href="../node_modules/materialize-css/dist/css/materialize.css">
<!-- Compiled and minified JavaScript -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> -->
<script defer src="config.js"></script>
<!-- Font Awesome -->
<script defer src="https://kit.fontawesome.com/1c9144b004.js" crossorigin="anonymous"></script>
<script defer>window.$ = window.jQuery = require('jquery');</script>
<link rel="stylesheet" type="text/css" href="../scss/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<title>Boosted: Configuration</title>
<link rel="stylesheet" href="index.css">
<!-- Google fonts -->
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->

<script defer>window.$ = window.jQuery = require('jquery');</script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>

<script defer src="config.js"></script>
<!-- Font Awesome -->
<script defer src="https://kit.fontawesome.com/1c9144b004.js" crossorigin="anonymous"></script>


<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

<body>
<div id="all-container">
<div id="background">
<div id="valign" class="valign-wrapper">
<div class="container center-align">
<div class="center-align">
<div class="bg-color card z-depth-4" >
<div class="card-content white-text">
<span id="title" class="card-title">&#127959; Configuration</span>
<p id="message"></p>
</div>
<div class="card-action">
<div class="input-field">
<input id="pushed-id-field" class="white-text" type="text">
<label id="pushed-id-field-label" for="pushed-id-field">Pushed ID</label>
</div>
<div class="input-field">
<input id="interval-field" class="white-text" type="text">
<label id="interval-field-label" for="interval-field">Polling Interval (ms)</label>
</div>
<div class="input-field">
<select id="queue-accept-timing">
<option id='default-option' class="white-text" value="wait" disabled selected>Queue Accept timing (Set to wait)</option>
<option value="asap">Accept as soon as possible</option>
<option value="wait">Wait until last second to accept</option>
</select>
</div>
<a onclick="test()" class="waves-effect red waves-light btn">test pushed id</a>
<a onclick="cancel()" class="waves-effect red waves-light btn">cancel</a>
<a onclick="save()" class="waves-effect red waves-light btn">save and exit</a>
</div>
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
<div id="config-card" class="card">
<div class="card-body">
<h3 class="card-title text-center text-white">Configuration</h3>
<p id="message" class="card-text text-center text-white"></p>
<hr>
<div class="text-center">
<form class="text-white">
<div class="form-group">
<label for="pushed-id-field">Pushed ID</label>
<input type="text" class="form-control" id="pushed-id-field" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text"></small>
</div>
<div class="form-group">
<label for="interval-field">Polling Interval</label>
<input type="number" class="form-control" id="interval-field">
</div>
</form>
<div class="dropdown">
<button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton" data-flip="false" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Queue Accept Timing
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a onclick="setAccept(this)" class="dropdown-item">Wait for last second</a>
<a onclick="setAccept(this)" class="dropdown-item">Accept immediately</a>
</div>
</div>
<hr>
<button onclick="test();" class="btn btn-sm btn-dark">Test Pushed ID</button>
<button onclick="save();" class="btn btn-sm btn-dark">Save</button>
<button onclick="cancel();" class="btn btn-sm btn-dark">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>





<!-- <div id="all-container">
<div id="background">
<div id="valign" class="valign-wrapper">
<div class="container center-align">
<div class="center-align">
<div class="bg-color card z-depth-4">
<div class="card-content white-text">
<span id="title" class="card-title">&#127959; Configuration</span>
<p id="message"></p>
</div>
<div class="card-action">
<div class="input-field">
<input id="pushed-id-field" class="white-text" type="text">
<label id="pushed-id-field-label" for="pushed-id-field">Pushed ID</label>
</div>
<div class="input-field">
<input id="interval-field" class="white-text" type="text">
<label id="interval-field-label" for="interval-field">Polling Interval (ms)</label>
</div>
<div class="input-field">
<select id="queue-accept-timing">
<option id='default-option' class="white-text" value="wait" disabled selected>Queue Accept timing
(Set to wait)</option>
<option value="asap">Accept as soon as possible</option>
<option value="wait">Wait until last second to accept</option>
</select>
</div>
<a onclick="test()" class="waves-effect red waves-light btn">test pushed id</a>
<a onclick="cancel()" class="waves-effect red waves-light btn">cancel</a>
<a onclick="save()" class="waves-effect red waves-light btn">save and exit</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../node_modules/materialize-css/dist/js/materialize.js"></script>
<script>M.AutoInit();</script>

</div>
</div>
<script type="text/javascript" src="../node_modules/materialize-css/dist/js/materialize.js"></script>
<script>M.AutoInit();</script> -->

</body>

</html>
20 changes: 16 additions & 4 deletions electron/src/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const jsonEdit = require("edit-json-file");


new customTitlebar.Titlebar({
backgroundColor: customTitlebar.Color.fromHex('#333333'),
backgroundColor: customTitlebar.Color.fromHex('#121212'),
menu: null,
icon: "../resources/icons/lol-icon.png"
});
Expand All @@ -19,6 +19,17 @@ $(document).ready(function(){
readConfig();
});

setAccept = (event) => {
console.log($(event).html());
let text = $(event).html();
if(text==='Wait for last second'){
accept_timing='wait';
}
else if(text==='Accept immediately'){
accept_timing='asap';
}
}

readConfig = () => {
let file = jsonEdit(__dirname+'/../config.json');
id=file.data.pushed_id;
Expand All @@ -36,7 +47,6 @@ readConfig = () => {
if(accept_timing==='asap'){
$('#default-option').html('Queue Accept timing (Set to accept ASAP)');
$('#default-option').attr('value','asap');
M.AutoInit();
}
}

Expand All @@ -48,7 +58,9 @@ cancel = () =>{
save = () => { //save id to file
id=$('#pushed-id-field').val();
interval_time=$('#interval-field').val();
accept_timing = $('#queue-accept-timing')[0].value;
if(!accept_timing){
accept_timing='wait';
}

let file = jsonEdit(__dirname+'/../config.json')

Expand All @@ -71,7 +83,7 @@ test = () =>{
data: { "id": tempID, "event": "test" },
url: 'https://us-central1-lol-boosted.cloudfunctions.net/sendNotification',
success: function (data) {
$('#message').html('Sent test notification to Pushed ID "'+tempID+'"');
$('#message').html('Test notification sent');
},
error: function (data) {
$('#message').html("error in http request to firebase");
Expand Down
87 changes: 18 additions & 69 deletions electron/src/index.css
Original file line number Diff line number Diff line change
@@ -1,80 +1,29 @@
h4{
color: white;
.card {
margin: 0 auto;
float: none;
margin-bottom: 10px;
background-color: #1e1e1e !important;
}

#title{

font-family: 'Helvetica',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 32px;
.container-after-titlebar{
/* background: linear-gradient(to bottom,#f4929d ,#cd5c6a); */
background-color: #121212;
}

#message{
font-family: "Helvetica",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
margin-top: 20px;
.btn{
color: black !important;
background-color: #a668e8 !important;
border-color: #a668e8 !important;
}

a{
font-family: "Helvetica",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
p{
font-size: 15px;
}

a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
#main-card{
width: 25rem;
}

html,body {
margin: 0;
height: 100%;
}

#background{
height: 100%;
background: linear-gradient(to bottom,#f4929d ,#cd5c6a);
}

#menubar{
height: 25px;
width: 100%;
background-color: #212121;
}

.bg-color{
background-color: #333333 !important;
}

#valign{
margin: 0;
height: 100%;
}

#all-container{
margin: 0;
height: 100%;
}

#valign{
vertical-align: middle;
}
.input-field input[type=text]:focus + label {
color: #cd5c6a !important;
}
.input-field input[type=text]:label {
color: white !important;
}

.input-field>label{
color: white;
}

/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #cd5c6a !important;
box-shadow: 0 1px 0 0 #cd5c6a !important;
}

input{
color: #ffffff;
font-size:1rem !important;
#config-card{
width: 27rem;
}
Loading

0 comments on commit e25375e

Please sign in to comment.