mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-10-06 20:05:55 +08:00
Add printers to addon page [SCI-5904][SCI-5931] (#3450)
* Add printers to addon page [SCI-5904] * Fix markup
This commit is contained in:
aignatov-bio
GitHub
parent
7940eb8465
commit
f2e5dc8b2f
7 changed files with 232 additions and 0 deletions
|
|
@ -1,3 +1,6 @@
|
|||
// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
|
||||
// scss-lint:disable NestingDepth ImportantRule
|
||||
|
||||
.user-account-addons {
|
||||
.content-pane {
|
||||
margin: 0;
|
||||
|
|
@ -8,4 +11,43 @@
|
|||
border-bottom: $border-tertiary;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.printers-container {
|
||||
.printer {
|
||||
border: $border-default;
|
||||
padding: 1em;
|
||||
|
||||
.header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-bottom: .5em;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status {
|
||||
border: $border-default;
|
||||
color: $color-silver-chalice;
|
||||
margin-left: .5em;
|
||||
margin-right: auto;
|
||||
padding: .25em;
|
||||
|
||||
&[data-ready="true"] {
|
||||
background: $brand-success;
|
||||
border-color: $brand-success;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.fas-check {
|
||||
margin-left: .25em;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
63
app/assets/stylesheets/settings/label_printers.scss
Normal file
63
app/assets/stylesheets/settings/label_printers.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
|
||||
// scss-lint:disable NestingDepth ImportantRule
|
||||
|
||||
.label-printer-show {
|
||||
.printer-title {
|
||||
flex-grow: 0 !important;
|
||||
margin-right: .5em !important;
|
||||
}
|
||||
|
||||
.status {
|
||||
border: $border-default;
|
||||
color: $color-silver-chalice;
|
||||
margin-left: .5em;
|
||||
margin-right: auto;
|
||||
padding: .25em;
|
||||
|
||||
&[data-ready="true"] {
|
||||
background: $brand-success;
|
||||
border-color: $brand-success;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
padding: .5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fa-caret-down {
|
||||
cursor: pointer;
|
||||
margin-right: .25em;
|
||||
|
||||
&.collapsed {
|
||||
@include rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
.row-title {
|
||||
@include font-h2;
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.api-key-container {
|
||||
display: flex;
|
||||
|
||||
.api-key-input {
|
||||
margin-right: .5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,18 @@ module Users
|
|||
module Account
|
||||
class AddonsController < ApplicationController
|
||||
layout 'fluid'
|
||||
|
||||
before_action :load_printers, only: :index
|
||||
|
||||
def label_printer
|
||||
@printer = { printer_type: :fluics, ready: true, api_key: 'ISVO42192IUDV168ATFI314UVYGU151USHYEV42' }
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def load_printers
|
||||
@fluics_printer = { ready: true, enabled: true }
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -15,6 +15,39 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-12">
|
||||
<h1 class="addons-title"><%= t('users.settings.account.addons.label_printers') %></h1>
|
||||
<div class="printers-container">
|
||||
<% if @fluics_printer %>
|
||||
<div class="printer">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<%= t('users.settings.account.addons.fluics_printer.title') %>
|
||||
</div>
|
||||
<div class="status" data-ready="<%= @fluics_printer[:ready] %>">
|
||||
<% if @fluics_printer[:ready] %>
|
||||
<%= t('users.settings.account.addons.printers.ready') %>
|
||||
<% else %>
|
||||
<%= t('users.settings.account.addons.printers.not_ready') %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="control">
|
||||
<% if @fluics_printer[:enabled] %>
|
||||
<%= t('users.settings.account.addons.printers.enabled') %>
|
||||
<i class="fas fa-check"></i>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="description">
|
||||
<%= t('users.settings.account.addons.fluics_printer.description') %>
|
||||
</div>
|
||||
<%= link_to t('users.settings.account.addons.printers.printer_details'), label_printer_path, class: 'printer-details' %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane tab-pane-settings" role="tabpanel"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
<% provide(:head_title, t('users.settings.account.addons.head_title')) %>
|
||||
<% provide(:container_class, "no-second-nav-container") %>
|
||||
|
||||
<%= render partial: 'users/settings/sidebar.html.erb' %>
|
||||
|
||||
<div class="content-pane flexible label-printer-show">
|
||||
<div class="content-header">
|
||||
<div id="breadcrumbsWrapper">
|
||||
<div class="breadcrumbs-container">
|
||||
<%= render partial: 'shared/breadcrumbs', locals: {
|
||||
links: [{label: 'Add-ons', url: addons_path}]
|
||||
} %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-row">
|
||||
<h1 class="printer-title">
|
||||
<%= t("users.settings.account.label_printer.#{@printer[:printer_type]}_printer") %>
|
||||
</h1>
|
||||
<div class="status" data-ready="<%= @printer[:ready] %>">
|
||||
<% if @printer[:ready] %>
|
||||
<%= t('users.settings.account.addons.printers.ready') %>
|
||||
<% else %>
|
||||
<%= t('users.settings.account.addons.printers.not_ready') %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<div class="collapse-row">
|
||||
<i class="fas fa-caret-down" data-toggle="collapse" href="#InstructionsSection" aria-expanded="false"></i>
|
||||
<div class="row-title"><%= t("users.settings.account.label_printer.instructions") %></div>
|
||||
</div>
|
||||
<ul class="collapse in" id="InstructionsSection">
|
||||
Instruction here
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div class="collapse-row">
|
||||
<i class="fas fa-caret-down" data-toggle="collapse" href="#SettingsSection" aria-expanded="false"></i>
|
||||
<div class="row-title"><%= t("users.settings.account.label_printer.settings") %></div>
|
||||
</div>
|
||||
<ul class="collapse in" id="SettingsSection">
|
||||
<% if @printer[:printer_type] == :fluics %>
|
||||
<%= form_with url: "" do |form| %>
|
||||
<div class="sci-input-container">
|
||||
<%= form.label :api_key, t("users.settings.account.label_printer.api_key_label") %>
|
||||
<div class="api-key-container">
|
||||
<%= form.text_field :api_key, class: "sci-input-field api-key-input" %>
|
||||
<%= form.submit t('general.save'), class: "btn btn-secondary" %>
|
||||
</div>
|
||||
</div>
|
||||
<%= link_to t("users.settings.account.label_printer.api_key_information"), '' %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -1796,6 +1796,22 @@ en:
|
|||
head_title: "Settings | Add-ons"
|
||||
title: "Add-ons"
|
||||
no_addons: "You have no SciNote Add-ons."
|
||||
label_printers: Label Printers
|
||||
printers:
|
||||
ready: "Ready"
|
||||
not_ready: "Not ready"
|
||||
printer_details: "Printer details"
|
||||
enabled: "Enabled"
|
||||
fluics_printer:
|
||||
title: "FLUICS Printer"
|
||||
description: "Sustainable sample inventory management for innovative research labs."
|
||||
label_printer:
|
||||
fluics_printer: "Label printer: FLUICS Printer"
|
||||
instructions: "Instructions"
|
||||
settings: "Settings"
|
||||
api_key_label: "API key"
|
||||
api_key_information: "Don’t have API key? Click here for more info."
|
||||
|
||||
connected_accounts:
|
||||
head_title: "Settings | Connected Accounts"
|
||||
title: "Connected Accounts"
|
||||
|
|
|
|||
|
|
@ -41,6 +41,9 @@ Rails.application.routes.draw do
|
|||
get 'users/settings/account/addons',
|
||||
to: 'users/settings/account/addons#index',
|
||||
as: 'addons'
|
||||
get 'users/settings/account/addons/label_printer',
|
||||
to: 'users/settings/account/addons#label_printer',
|
||||
as: 'label_printer'
|
||||
get 'users/settings/account/connected_accounts',
|
||||
to: 'users/settings/account/connected_accounts#index',
|
||||
as: 'connected_accounts'
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue