search

Pinchie / RaspiPass

RaspiPass - Homepass software for the Raspberry Pi 3
46 stars 5 forks source link

Web GUI needs an overhaul for next subversion (0.8) #3

Open Pinchie opened 7 years ago

Pinchie commented 7 years ago

Need the following things to be fixed/improved on the Web GUI:

Pinchie commented 7 years ago

Have started initial work on this - using Smarty to separate PHP and HTML as a first step, and implementing iframes.

Once the new background code is in place and working I'll move to a testing tree and start playing with layouts.

Pinchie commented 7 years ago

Mostly built. Now in testing on 'working' tree (v0.7.5b)

code-for-coffee commented 7 years ago

@Pinchie can I just ssh into the pi using the username/password provided to modify the ./html directory? If so, I'd be more than happy to add styles to the user interface and make it responsive.

I didn't see any styles added to the working branch; just templates and libraries.

Pinchie commented 7 years ago

@code-for-coffee Sorry for the late reply. I'd love a hand. my new replacement Raspi has arrived, so I'll be looking to see where I got up to.

There are a buttload of changes in working. The main thing is that the PHP's been separated from the HTML using Smarty. Everything's living in ./html

I'll be imaging and cloning down the working tree to inspect my (now months-old) work to see where I was. From memory I had the old site pretty much redone in the new format, and in easier-to-digest files. Take a look and see what you think. :)

code-for-coffee commented 7 years ago

@Pinchie it looks rather clean to be honest and the templates are nice and neat. I can test it on my device over the weekend. Does anything in ./html rely on the bash files you have in that branch? If not I can start testing things out right now.

Do you have any user interface colours or palette in mind? I'll focus on making something responsive and abstracting all styling out of the templates.

code-for-coffee commented 7 years ago

Also, while I'm not a PHP master - for the dynamic page updates we could use fetch() in to make minor ajax requests for JSON updates (or plaintext in the case of the logs). Something like this should work - but I haven't looked into the PHP, just the templates/html/css.

example.js

fetch('restart.php').then(function(response) {
        return response.json()
      }).then(function(json) {
        console.log('Parsed JSON', json)
      }).catch(function(ex) {
        console.log('Parsing JSON failed', ex)
        alert('Error! ' + ex);
      });

restart.php

function is_valid_ajax_request() {
    return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}
if (is_valid_ajax_request()) {
    if (isset($_POST) && !empty($_POST)) {
        on_valid_ajax_request();
    } else {
        on_invalid_ajax_request();
    }
}
function on_valid_ajax_request(){
    $return = Array(
        "message" => "Success"
    );
    echo json_encode($return);
}
function on_invalid_ajax_request(){
    $return = array(
        'type' => 'error',
        'message' => 'Invalid request.'
    );
    header('HTTP/1.1 400 Bad Request');
    header('Content-Type: application/json; charset=UTF-8');
    echo json_encode($return);
}
Pinchie commented 7 years ago

Yeah, any bash scripts in the html directory are called by the site. Hopefully they'll be well-commented enough that you can see what they'll be doing, even without a device..

As for the ajax/JSON stuff, I am very happy to accede to you on that. Java is not my forte, so any suggestions you have for that will be gratefully-accepted. I kept hitting the Java wall and looking for solutions in languages I'd at least dabbled in.

Colour-wise, I've just been going with a "berry" palette because I have no aesthetic ability at all. :)

Pinchie commented 7 years ago

Also thanks for calling my code clean. it was despicably-filthy before, and I had to find a way to be able to read my own code. I can't read my own handwriting, but at least I can space and comment my code. 😄

code-for-coffee commented 7 years ago

@Pinchie I've been chugging away at the basic UI of the app on a fork to make it responsive and ended up with this. Let me know what you think before I put a lot more time into it.

image

image

image

Pinchie commented 7 years ago

@code-for-coffee

Holy... Wow, that looks absolutely beautiful.

I've added a couple of features in the last couple of days (locale selection and a /raspi_secure/crontab file that's appended to root's crontab on RaspiPass schedule generation).. hopefully I've documented them well enough to not add too much time.

The new UI is stunning.. I can't say it enough. Thank you so much.

Pinchie commented 7 years ago

Also I won't be doing any more feature addition for at least a week - about to head out for the day, and I should use the time for testing the locale/cron features a bit more. 🤔

Let me know if you'd like a branch on the main repo, rather than having to live on a fork. 😄

Pinchie commented 7 years ago

@code-for-coffee I forgot to ask how exactly your site will augment/replace the existing code.. is it predominantly visual changes, or are you overhauling and rewriting the entire site? Not that I'd stop you either way, but this way I'll know whether I'll have to learn to read whatever you're writing in. 😁

code-for-coffee commented 7 years ago

Sorry for the late reply @Pinchie. I'm just writing HTML/CSS to augment the templates (*.tpl) you already have. I was using React.js to prototype. For any of the non-postback actions (live reloads) we'd need to use Javascript. Given that we don't need processor power on the Pi to deliver the content (the browser renders all of the scripts unlike compiled applications) we could stick with the React.js prototype if you'd like but I don't want to force you to learn a Javascript framework to make minor modifications.

The tasks pane looks like this:

import React, {Component} from 'react';
import {Card, CardActions, CardTitle} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import Divider from 'material-ui/Divider';

class TasksPane extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Card>
        <CardTitle
          title="Administrative Tasks"
          subtitle="Manage your Homepass settings and Raspberry Pi"
        />
        <CardActions>
          <FlatButton label="Start your HomePass">
          </FlatButton>

          <Divider />
          <FlatButton label="Restart Raspberry Pi" />
          <Divider />
          <FlatButton label="Shutdown Raspberry Pi" />
        </CardActions>
      </Card>
    )
  }
}

export default TasksPane;
code-for-coffee commented 7 years ago

Also, I'll be polishing this up in the next few weeks. Ideally I can finish up my side of the work before Fire Emblem drops on 19/5/17 (does it even use StreetPass?)

Pinchie commented 7 years ago

With how good it looks, I'm willing to do some reading to see how it's working. Just be nice and leave me a few comments in the code 😄

So from a big-picture perspective, the existing Smarty/php code is still in place, and you're just flashing up the template files for the frontend with your skills?

I'm assuming new FE will have StreetPass. Hopefully more than record-swapping 🤞

code-for-coffee commented 7 years ago

@Pinchie sorry for the delay! I was caught up with real life a bit. Did you grab the Amiibo for Fire Emblem?

Since you're okay with the React design I've been working on it a bit. I had a few issues getting this branch to run on the Pi. Do you have a build process I could follow? The POC looks great but I need to make a few PHP modifications.

jotebe commented 7 years ago

Great work both of you. Very much looking forward to the release.