~otheb/kb

5262a8b84fc2536b57f2ec841cf9a1b528a7581a — Olie Ayre 2 months ago 3a59761
Finished WUI

Can now delete posts. Also finished off light theme with some adjusted
colours.
4 files changed, 140 insertions(+), 31 deletions(-)

M kb-web/example-config
M kb-web/main.d
M kb-web/static/global.css
M kb-web/static/light.css
M kb-web/example-config => kb-web/example-config +1 -1
@@ 1,6 1,6 @@
{
	"port" : 8080 ,
	"friendly-name" : "Big title here" ,
	"light-theme" : false ,
	"light-theme" : true ,
	"server" : "localhost:8000"
}

M kb-web/main.d => kb-web/main.d +105 -25
@@ 17,7 17,7 @@ import arsd.http2 ;
import declhtml ;

// default config file
const string CONFFILE = "/etc/kbw/config" ;
const string CONFFILE = "/etc/kb-web/config" ;
// basic settings
ushort PORT         = 80               ;
string FRIENDLYNAME = "KB Web UI"      ;


@@ 155,40 155,45 @@ auto patchedit( string j , string id ) {
	                                 HttpVerb.PATCH , cast(ubyte[])j ,
	                                 "application/json" ).waitForCompletion() ;
}
auto deleteentry( string id ) {
	return new HttpClient().request( Uri( "http://" ~ SERVER ~ "/" ~ id ) ,
	                                 HttpVerb.DELETE ).waitForCompletion() ;
}

auto noapi() {
	return mkdoc(
		head(
			charset() , style( "/global.css" ) ,
			title( "No API connection - " , FRIENDLYNAME ) ,
			style( LIGHTTHEME ? "/light.css" : "/dark.css" )
		) ,
		body( div(
			h2( "502 Bad Gateway - No API connection" ) ,
			p(
				"No connection could be made to the API server at http://" ,
				SERVER ,
				". Make sure it's running on that host, configured to listen at
				that port, and that there are no firewall rules preventing
				access to it."
		makehead( "No API connection - " ~ FRIENDLYNAME ) ,
		body(
			h1( a( "/" , FRIENDLYNAME ) ) ,
			makeactionbar() ,
			// non-breaking space to add the gap between the search bar and the
			// results below that is present on the homepage
			"\u00a0" ,
			div(
				h2( "502 Bad Gateway - No API connection" ) ,
				p( "No connection could be made to the API server at http://" ,
				   SERVER , ". Make sure it's running on that host, " ,
				   "configured to listen at that port, and that there are no " ,
				   "firewall rules preventing access to it." )
			)
		) )
		)
	) ;
}

auto notfound() {
	return mkdoc(
		head(
			charset() , style( "/global.css" ) ,
			title( "Not found - " , FRIENDLYNAME ) ,
			style( LIGHTTHEME ? "/light.css" : "/dark.css" )
		) ,
		body( div(
			h2( "404 Not Found" ) ,
			p(
				"The requested entry does not exist."
		makehead( "Not found - " ~ FRIENDLYNAME ) ,
		body(
			h1( a( "/" , FRIENDLYNAME ) ) ,
			makeactionbar() ,
			// non-breaking space to add the gap between the search bar and the
			// results below that is present on the homepage
			"\u00a0" ,
			div(
				h2( "404 Not Found" ) ,
				p( "The requested entry does not exist." )
			)
		) )
		)
	) ;
}



@@ 359,6 364,46 @@ class router {
		res.status = StatusCodes.seeOther ;
		res.headers["Location"] = "/entry/" ~ newentry ;
	}

	@Get( "delete" , "([0-9]+)" )
	deletepage( ServerRequest req , ServerResponse res , string id ) {
		// get existing entry
		HttpResponse apires ;
		try {
			apires = getentry( id ) ;
		} catch ( SocketOSException e ) {
			res.status = StatusCodes.badGateway ;
			res.body = noapi() ;
			return ;
		}
		if ( apires.code != 200 ) {
			res.status = StatusCodes.notFound ;
			res.body = notfound() ;
			return ;
		}

		auto t = apires.fromjson().title ;
		res.body = makedeletepage( id , t ) ;
	}
	@Post( "delete" , "([0-9]+)" )
	handledelete( ServerRequest req , ServerResponse res , string id ) {
		// make api request
		HttpResponse apires ;
		try {
			apires = deleteentry( id ) ;
		} catch ( SocketOSException e ) {
			res.status = StatusCodes.badGateway ;
			res.body = noapi() ;
			return ;
		}
		if ( apires.code != 200 ) {
			res.status = StatusCodes.notFound ;
			res.body = notfound() ;
			return ;
		}

		res.body = makedeletedpage( id ) ;
	}
}

string[string] getparams( string q ) {


@@ 540,3 585,38 @@ string makeeditpage( bool editing = false , entry e = null ) {
		)
	) ;
}

string makedeletepage( string id , string title ) {
	return mkdoc(
		makehead( "Delete entry '" ~ title ~ "' - " ~ FRIENDLYNAME ) ,
		body(
			h1( a( "/" , FRIENDLYNAME ) ) ,
			div(
				h2( "Delete entry #" ~ id ~ " '" ~ title ~ "'" ) ,
				p( "Are you sure you want to delete entry #" , id , "? " ,
				   "This will be immediate and cannot be undone." ) ,
				form( "/entry/" ~ id ,
					input().attr( "type" , "submit" ).attr( "value" , "Cancel" )
						.id( "cancel" )
				).id( "inline" ) ,
				form( "/delete/" ~ id ,
					input().attr( "type" , "submit" ).attr( "value" , "Delete" )
						.id( "delete" )
				).attr( "method" , "post" ).id( "inline" )
			)
		)
	) ;
}

string makedeletedpage( string id ) {
	return mkdoc(
		makehead( "Entry deleted - " ~ FRIENDLYNAME ) ,
		body(
			h1( a( "/" , FRIENDLYNAME ) ) ,
			div(
				h2( "Entry deleted" ) ,
				p( a( "/" , "Back to index" ) )
			)
		)
	) ;
}

M kb-web/static/global.css => kb-web/static/global.css +32 -4
@@ 92,22 92,22 @@ h2 {
	background-color : var( --accent ) ;
	color : var( --textcolour ) ;
}
#delete input {
form#delete input {
	height : 40px ;
	background-color : var( --contentcolour ) ;
	color : var( --red ) ;
	font-weight : bold ;
	border : 0 ;
}
#delete input:hover {
form#delete input:hover {
	background-color : var( --red ) ;
	color : var( --textcolour ) ;
}

/* SORT LINKS FOR HOME PAGE */
a { transition-duration : 0.1s ; }
a.sort { color : var( --accent ) ; }
a.sort:hover { color : var( --emph ) ; }
a { color : var( --accent ) ; }
a:hover { color : var( --emph ) ; }

/* ENTRY LISTINGS */
div {


@@ 226,3 226,31 @@ span.label {
	background-color : var( --accent ) ;
	color : var( --textcolour ) ;
}

/* DELETE PAGE */
form#inline {
	display : inline-block ;
	margin : 0 20px ;
}
#cancel {
	height : 40px ;
	background-color : var( --contentcolour ) ;
	color : var( --accent ) ;
	font-weight : bold ;
	border : 0 ;
}
#cancel:hover {
	background-color : var( --accent ) ;
	color : var( --textcolour ) ;
}
input#delete {
	height : 40px ;
	background-color : var( --contentcolour ) ;
	color : var( --red ) ;
	font-weight : bold ;
	border : 0 ;
}
input#delete:hover {
	background-color : var( --red ) ;
	color : var( --textcolour ) ;
}

M kb-web/static/light.css => kb-web/static/light.css +2 -1
@@ 3,7 3,8 @@
	--titlecolour : #1f1f1f ;
	--textcolour : #1f1f1f ;
	--contentcolour : #d5d5d5 ;
	--accent : #fff ;
	--accent : #085ace ;
	--red : #c41529 ;
	--emph : #000 ;
	--deemph : #9e9e9e ;
}