softplayer/softplayer-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Some updates to the frontent

Browse Source
This commit is contained in:
Nikolai Rodionov 2024-05-02 23:56:55 +02:00
parent 60f4934e60
commit f9aa2c683d
Signed by: allanger
GPG Key ID: 0AA46A90E25592AD
7 changed files with 164 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/api/grpc/creds.dart
View File

@ -14,4 +14,8 @@ class SoftplayerCredsHelpers {
String localStorageEntry(String key) => window.localStorage[key]!;
SoftplayerCreds fromLocalStorage() => SoftplayerCreds(
token: localStorageEntry("token"), uuid: localStorageEntry("uuid"));
void cleanupLocalStorate() {
window.localStorage.remove("token");
window.localStorage.remove("uuid");
}
}

3
lib/components/create_env_form.dart
View File

@ -1,4 +1,3 @@
import 'dart:html';
import 'dart:js' as js;
import 'package:flutter/material.dart';
import 'package:grpc/grpc_web.dart';
@ -120,7 +119,7 @@ class _CreateEnvFormState extends State<CreateEnvForm> {
TextButton(
onPressed: () => js.context.callMethod(
'open', ['https://stackoverflow.com/questions/ask']),
child: Text("Read more about environment types here"),
child: const Text("Read more about environment types here"),
),
DropdownButtonFormField(
decoration: const InputDecoration(

102
lib/components/environment_card.dart
View File

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:softplayer_web/api/grpc/environments.dart';
import 'package:softplayer_web/helpers/providers/common.dart';
class EnvirnomentCard extends StatelessWidget {
class EnvirnomentCard extends StatefulWidget {
final EnvironmentLocalData env;
const EnvirnomentCard({
@ -10,52 +10,82 @@ class EnvirnomentCard extends StatelessWidget {
required this.env,
});
@override
State<EnvirnomentCard> createState() => _EnvirnomentCardState();
}
class _EnvirnomentCardState extends State<EnvirnomentCard> {
late double elevation = 1.0;
@override
Widget build(BuildContext context) {
Provider provider = ProviderHelper().getProvider(env.provider);
Provider provider = ProviderHelper().getProvider(widget.env.provider);
String serverType;
String serverLocation;
try {
serverType = ProviderHelper().getServerType(env.serverType);
serverLocation = provider.getServerLocation(env.serverLocation);
serverType = ProviderHelper().getServerType(widget.env.serverType);
serverLocation = provider.getServerLocation(widget.env.serverLocation);
} catch (e) {
rethrow;
}
return Card(
child: SelectionArea(
child: Column(
children: [
Text(env.name),
const Divider(),
Table(
border: const TableBorder(
bottom: BorderSide.none,
left: BorderSide.none,
right: BorderSide.none,
top: BorderSide.none,
return Container(
margin: const EdgeInsets.all(8.0),
height: 10,
child: MouseRegion(
onExit: (event) {
setState(() {
elevation = 1.0;
});
},
onEnter: (event) {
setState(() {
elevation = 5.0;
});
},
child: Card(
elevation: elevation,
child: SelectionArea(
child: InkWell(
onTap: () => showBottomSheet(
context: context,
builder: (context) => Text(widget.env.uuid!),
),
children: [
TableRow(children: [
Text("Description"),
Text(env.description),
]),
TableRow(children: [
Text("Provider"),
Text(provider.getProviderName()),
]),
TableRow(children: [
Text("Server Type"),
Text(serverType),
]),
TableRow(children: [
Text("Location"),
Text(serverLocation),
]),
],
)
],
child: Column(
children: [
Text(widget.env.name),
const Divider(),
Table(
border: const TableBorder(
bottom: BorderSide.none,
left: BorderSide.none,
right: BorderSide.none,
top: BorderSide.none,
),
children: [
TableRow(children: [
const Text("Description"),
Text(widget.env.description),
]),
TableRow(children: [
const Text("Provider"),
Text(provider.getProviderName()),
]),
TableRow(children: [
const Text("Server Type"),
Text(serverType),
]),
TableRow(children: [
const Text("Location"),
Text(serverLocation),
]),
],
)
],
),
),
),
),
),
);

36
lib/components/environments.dart
View File

@ -1,5 +1,4 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:grpc/grpc_web.dart';
import 'package:softplayer_web/api/grpc/creds.dart';
import 'package:softplayer_web/api/grpc/environments.dart';
@ -24,18 +23,22 @@ class _EnvirnomentListState extends State<EnvirnomentList> {
envGrpc = EnvironmentsGrpc(widget.channel);
}
final GlobalKey<ScaffoldState> _key = GlobalKey(); // Create a key
@override
Widget build(BuildContext context) {
return Scaffold(
key: _key,
endDrawer: const Drawer(child: Text("Env")),
body: Container(
width: double.infinity,
height: double.infinity,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/login_background.jpg"),
fit: BoxFit.cover,
),
),
gradient: LinearGradient(colors: [
Colors.blueGrey,
Colors.cyan,
Colors.yellow,
])),
child: StreamBuilder(
stream:
envGrpc.list(SoftplayerCredsHelpers().fromLocalStorage()),
@ -51,14 +54,21 @@ class _EnvirnomentListState extends State<EnvirnomentList> {
if (data.isNotEmpty) {
return Column(children: [
Flexible(
child: TextField(
decoration: InputDecoration(
icon: Icon(Icons.search),
child: Container(
margin: const EdgeInsetsDirectional.fromSTEB(
50.0, 20.0, 50.0, 10.0),
child: const TextField(
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
labelText: "Search",
prefixIcon: Icon(Icons.search)),
),
),
),
Flexible(
child: GridView.count(
childAspectRatio: (30 / 13),
crossAxisCount: 4,
children: snapshot.data!
.map((e) => EnvirnomentCard(
@ -71,15 +81,15 @@ class _EnvirnomentListState extends State<EnvirnomentList> {
return Center(
child: Container(
height: 300,
child: Text(
"To get strated, use the button in the corner"),
decoration: BoxDecoration(
border: Border.all(),
shape: BoxShape.rectangle,
borderRadius:
BorderRadius.all(Radius.circular(10)),
color: Color.fromRGBO(100, 150, 80, 20),
const BorderRadius.all(Radius.circular(10)),
color: const Color.fromRGBO(100, 150, 80, 20),
),
child: const Text(
"To get strated, use the button in the corner"),
));
}
}

6
lib/components/login_form.dart
View File

@ -98,6 +98,7 @@ class _LoginFormState extends State<LoginForm> {
child: Center(
child: Column(children: [
TextFormField(
onFieldSubmitted: (value) => submitSignIn(),
autofocus: true,
controller: usernameCtrl,
decoration: const InputDecoration(
@ -110,6 +111,7 @@ class _LoginFormState extends State<LoginForm> {
cursorRadius: const Radius.circular(10),
),
TextFormField(
onFieldSubmitted: (value) => submitSignIn(),
controller: passwordCtrl,
obscureText: true,
decoration: const InputDecoration(
@ -155,6 +157,7 @@ class _LoginFormState extends State<LoginForm> {
child: Center(
child: Column(children: [
TextFormField(
onFieldSubmitted: (value) => submitSignUp(),
autofocus: true,
controller: usernameCtrl,
decoration: const InputDecoration(
@ -167,6 +170,7 @@ class _LoginFormState extends State<LoginForm> {
cursorRadius: const Radius.circular(10),
),
TextFormField(
onFieldSubmitted: (value) => submitSignUp(),
controller: emailCtrl,
autofocus: true,
decoration: const InputDecoration(
@ -179,6 +183,7 @@ class _LoginFormState extends State<LoginForm> {
cursorRadius: const Radius.circular(10),
),
TextFormField(
onFieldSubmitted: (value) => submitSignUp(),
controller: passwordCtrl,
obscureText: true,
decoration: const InputDecoration(
@ -190,6 +195,7 @@ class _LoginFormState extends State<LoginForm> {
cursorRadius: const Radius.circular(10),
),
TextFormField(
onFieldSubmitted: (value) => submitSignUp(),
controller: passwordVerifyCtrl,
obscureText: true,
decoration: const InputDecoration(

1
lib/helpers/providers/hetzner.dart
View File

@ -2,7 +2,6 @@ import 'package:softplayer_dart_proto/environments/environments_v1.pbgrpc.dart';
import 'package:softplayer_web/helpers/providers/common.dart' as helper;
class Hetzner implements helper.Provider {
@override
String getProviderName() {
return "Hetzner";

83
lib/main.dart
View File

@ -1,9 +1,9 @@
import 'dart:html';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:grpc/grpc_web.dart';
import 'package:softplayer_web/api/grpc/accounts.dart';
import 'package:softplayer_web/api/grpc/creds.dart';
import 'package:softplayer_web/components/create_env_form.dart';
import 'package:softplayer_web/components/environments.dart';
import 'package:softplayer_web/components/login_form.dart';
@ -58,6 +58,7 @@ class _StateRootWidget extends State<RootWidget> {
return window.localStorage.containsKey("token");
}
final GlobalKey<ScaffoldState> _key = GlobalKey(); // Create a key
@override
Widget build(BuildContext context) {
if (!isSignedIn()) {
@ -78,26 +79,68 @@ class _StateRootWidget extends State<RootWidget> {
));
} else {
EnvirnomentList envList = EnvirnomentList(channel: widget.channel);
return Scaffold(
body: envList,
return DefaultTabController(
length: 3,
initialIndex: 0,
child: Scaffold(
key: _key,
endDrawer: const Drawer(child: Text("text")),
body: TabBarView(children: [envList, envList]),
appBar: AppBar(
title: const Text("Softplayer"),
actions: [
TextButton(
onPressed: () {
window.localStorage.remove("token");
window.localStorage.remove("uuid");
refresh();
},
child: const Text("sign out"))
],
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () => showDialog(
context: context,
builder: (context) =>
CreateEnvForm(widget.channel),
backgroundColor: Colors.grey,
centerTitle: false,
title: const Text("Softplayer"),
bottom: const TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.computer),
text: "Environments",
),
Tab(
icon: Icon(Icons.install_desktop),
text: "Your applications",
),
Tab(
icon: Icon(Icons.list),
text: "Application Catalog",
),
],
),
actions: [
PopupMenuButton(
child: const Row(children: [
Icon(Icons.account_circle),
Text("account"),
]),
itemBuilder: (context) => [
const PopupMenuItem(
child: Row(
children: [Icon(Icons.settings), Text("Settings")],
),
),
const PopupMenuItem(
child: Row(children: [
Icon(Icons.monetization_on),
Text("Invoices"),
])),
PopupMenuItem(
child: const Row(
children: [Icon(Icons.logout), Text("Sign out")]),
onTap: () {
SoftplayerCredsHelpers().cleanupLocalStorate();
refresh();
},
),
])
],
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () => showDialog(
context: context,
builder: (context) => CreateEnvForm(widget.channel),
),
),
),
);