Support Forums - All Posts - XOOPS Web Application System

21

Cascading form select

1/31 6:50
goffy
Just can't stay away
Posts: 532
Since: 2010/12/27

I want to show you a new best practice example: Cascading FormSelect

Sometimes you want, that the choice of the first selectbox adapt the possible options of the second selectbox.
After playing around a little bit I decided to implementhttps://github.com/geekonjava/FilterSelect

I created a new Formselect class (seehttps://github.com/XoopsModules25x/wgsimpleacc/blob/master/class/Form/FormSelectCascading.php )

The call is similar to call of XoopsFormSelect:


// Get Theme Form

    \xoops_load('XoopsFormLoader');

    $form = new \XoopsThemeForm('My form for testing cascading select', 'formTest',  $_SERVER['REQUEST_URI'], 'post', true);

    $form->setExtra('enctype="multipart/form-data"');



    $myExampleTray1 = new XoopsFormElementTray('Example Tray 1');

    $mySelect1 = new XoopsModules\Wgsimpleacc\Form\FormSelectCascading('Caption Select 1', 'select1', '2', 15);

    $mySelect1->setType(1);

    $arrSelect1 = [

                    ['id' => '1', 'text'=>'Sourceelement 1', 'rel'=> '0', 'init'=> '0'],

                    ['id' => '2', 'text'=>'Sourceelement 2', 'rel'=> '0', 'init'=> '0'],

                    ['id' => '3', 'text'=>'Sourceelement 3', 'rel'=> '0', 'init'=> '0'],

                  ];

    $mySelect1->setCustomOptions($arrSelect1);

    $myExampleTray1->addElement($mySelect1);



    $mySelect2 = new XoopsModules\Wgsimpleacc\Form\FormSelectCascading('Caption Select 2', 'select2', '4', 15);

    $mySelect2->setType(2);

    $arrSelect2 = [

                    ['id' => '1', 'text'=>'Targetelement 1, linked to Sourceelement 1', 'rel'=> '1', 'init'=> '2'],

                    ['id' => '1', 'text'=>'Targetelement 1, linked to Sourceelement 2', 'rel'=> '2', 'init'=> '2'],

                    ['id' => '1', 'text'=>'Targetelement 1, linked to Sourceelement 3', 'rel'=> '3', 'init'=> '2'],

                    ['id' => '2', 'text'=>'Targetelement 2, linked to Sourceelement 1', 'rel'=> '1', 'init'=> '2'],

                    ['id' => '3', 'text'=>'Targetelement 3, linked to Sourceelement 1', 'rel'=> '1', 'init'=> '2'],

                    ['id' => '3', 'text'=>'Targetelement 3, linked to Sourceelement 3', 'rel'=> '3', 'init'=> '2'],

                    ['id' => '4', 'text'=>'Targetelement 4, linked to Sourceelement 2', 'rel'=> '2', 'init'=> '2'],

                    ['id' => '5', 'text'=>'Targetelement 5, linked to Sourceelement 2', 'rel'=> '2', 'init'=> '2'],

                  ];

    $mySelect2->setCustomOptions($arrSelect2);

    $myExampleTray1->addElement($mySelect2);

    $form->addElement($myExampleTray1);

    $form->addElement(new \XoopsFormHidden('op', 'save'));

    $form->addElement(new \XoopsFormButtonTray('', _SUBMIT, 'submit', '', false));

    $GLOBALS['xoopsTpl']->assign('form', $form->render());

if you now click on 'Sourceelement 1' in first select then you see only
- 'Targetelement 1, linked to Sourceelement 1'
- 'Targetelement 2, linked to Sourceelement 1'
- 'Targetelement 3, linked to Sourceelement 1'
in second select

have fun
Goffy

22

Re: xoopsMailer and SMTP

2022/11/27 9:31
goffy
Just can't stay away
Posts: 532
Since: 2010/12/27

hi

I got it working in my environment, but I am not sure whether this is valid for everyone.

This is the code:


$xoopsMailer = xoops_getMailer();

$xoopsMailer->multimailer->isSMTP();

$xoopsMailer->multimailer->Port       = $my_port_out; // set the SMTP port

$xoopsMailer->multimailer->Host       = $my_server_out; //sometimes necessary to repeat

$xoopsMailer->multimailer->SMTPAuth   = true;

$xoopsMailer->multimailer->SMTPSecure = $my_securetype_out;

$xoopsMailer->multimailer->Username   = $my_username; // SMTP account username

$xoopsMailer->multimailer->Password   = $my_password; // SMTP account password

$xoopsMailer->multimailer->SMTPDebug  = 0;

...

The biggest problem was that my mail provider use different setting for client tools like outlook or thunderbird in comparison with setting for smtp access via a CMS.
Therefore: check allways in advance which settings your provider allows

23

XOOPS and cookies

2022/11/22 12:29
goffy
Just can't stay away
Posts: 532
Since: 2010/12/27

is it possible to run a XOOPS website without any cookies?

24

xoopsMailer and SMTP

2022/11/19 13:28
goffy
Just can't stay away
Posts: 532
Since: 2010/12/27

Hi

is there somewhere a description where I can see how to setup xoopsMailer properly for using a SMTP mail account for sending mails?

25

Re: UpConstruction Bootstrap v5.2.2

2022/10/24 6:40
goffy
Just can't stay away
Posts: 532
Since: 2010/12/27

looks great, thank you

26

Re: wgDiaries 1.03 RC1 ready for testing

2022/10/17 15:44
goffy
Just can't stay away
Posts: 532
Since: 2010/12/27

hi

there is already a stable release:https://github.com/XoopsModules25x/wgdiaries/releases/tag/132stable

27

Re: How do i check a xoops smarty plugin exist ?

2022/10/2 15:46
goffy
Just can't stay away
Posts: 532
Since: 2010/12/27

try

<{if xoStats|default:false}>

28

Next version of wgEvents

2022/8/29 14:57
goffy
Just can't stay away
Posts: 532
Since: 2010/12/27

A new version of wgEvents is available now onhttps://github.com/XoopsModules25x/wgevents/releases

Some of new features since Alpha version:
- Usage of Google Maps to show marker for location
- Support of multiple fees for each event (e.g. different fees for child, adults,...)
- Sending mails by using a task handler (mails per hour can be defined)
- Ajax support for most used functions for event organizers (e.g. set status, confirm payment,...)
- Support of saving historical data (registrations, answers)
- Implementation of tablesorter
- Import of events from Apcal und ExtCal module

Full feature list you can find here:https://github.com/XoopsModules25x/wgevents#readme

I used the module already on a production site, therefore I know it is already very stable now.

But nevertheless, there is still space for improvements ;)

Issues and bug reports please here:https://github.com/XoopsModules25x/wgevents/issues

29

Re: no xoops in softaculous installer

2022/8/29 11:54
goffy
Just can't stay away
Posts: 532
Since: 2010/12/27

Hi

as far as I see at softaculous itself it is available:
https://www.softaculous.com/softaculous/apps/cms/Xoops

But there is still XOOPS 2.5.10, as 2.5.11 is still Beta

30

Implement modal calculator

2022/7/11 15:33
goffy
Just can't stay away
Posts: 532
Since: 2010/12/27

Hi to all

in my modul wgsimpleacc I had the request to implement a simple calculator (if e.g. someone wants to sum up various small bills).
my goal was to implement a modal version.
I played around a little bit and I found (IMO) a good solution for this feature, which I want to share with you, maybe you can also use it.

first of all I need the modal form:


<div class="modal fade" id="calcModal" tabindex="-1" role="dialog" aria-labelledby="calcModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title" id="calcModalLabel"><{$smarty.const._MA_WGSIMPLEACC_CALC}></h4>

                <button type="button" class="close" data-dismiss="modal" aria-label="<{$smarty.const._CLOSE}>">

                    <span class="btn btn-danger" aria-hidden="true">&times;</span>

                </button>

            </div>

            <div id="modal-body" class="modal-body">

                <div class="calculator">

                    <input id="calc-screen" type="text" class="calculator-screen" value="" disabled />

                    <div class="calculator-keys">

                        <button type="button" class="btn btn-warning operator" value="+">+</button>

                        <button type="button" class="btn btn-warning operator" value="-">-</button>

                        <button type="button" class="btn btn-warning operator" value="*">&times;</button>

                        <button type="button" class="btn btn-warning operator" value="/">&divide;</button>

                        <button type="button" class="btn btn-primary digit" value="7">7</button>

                        <button type="button" class="btn btn-primary digit" value="8">8</button>

                        <button type="button" class="btn btn-primary digit" value="9">9</button>

                        <button type="button" class="btn btn-primary digit" value="4">4</button>

                        <button type="button" class="btn btn-primary digit" value="5">5</button>

                        <button type="button" class="btn btn-primary digit" value="6">6</button>

                        <button type="button" class="btn btn-primary digit" value="1">1</button>

                        <button type="button" class="btn btn-primary digit" value="2">2</button>

                        <button type="button" class="btn btn-primary digit" value="3">3</button>

                        <button type="button" class="btn btn-primary digit" value="0">0</button>

                        <button type="button" class="btn btn-primary decimal" value="."><{$sepComma}></button>

                        <button type="button" class="btn btn-danger all-clear" value="all-clear">AC</button>

                        <button type="button" class="btn btn-warning equal-sign operator" value="=">=</button>

                    </div>

                </div>

            </div>

            <div class="modal-footer">

                <button id="btnApplyResult" type="button" class="btn btn-secondary btn-success" data-dismiss="modal"><{$smarty.const._MA_WGSIMPLEACC_CALC_APPLY}></button>

            </div>

        </div>

    </div>

</div>

additional to bootstrap I have added some style:


.calculator {

        border: 1px solid #ccc;

        border-radius: 5px;

        width: 100%;

    }

    .calculator-screen {

        width: 100%;

        font-size: 5rem;

        height: 80px;

        border: none;

        background-color: #252525;

        color: #fff;

        text-align: right;

        padding-right: 20px;

        padding-left: 10px;

    }

    button {

        height: 60px;

        font-size: 24px !important;

    }

    .equal-sign {

        height: 100%;

        grid-area: 2 / 4 / 6 / 5;

    }

    .equal-sign:hover {

        background-color: #4e9ed4;

    }

    .calculator-keys {

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        grid-gap: 20px;

        padding: 20px;

    }

for calculation itself I have implemented following code, which can handle click and keydown events:


const calculator = {

        displayValue: '0',

        firstOperand: null,

        waitingForSecondOperand: false,

        operator: null,

    };



    //Manage Operators

    const performCalculation = {

        '+': (firstOperand, secondOperand) => firstOperand + secondOperand,

        '-': (firstOperand, secondOperand) => firstOperand - secondOperand,

        '*': (firstOperand, secondOperand) => firstOperand * secondOperand,

        '/': (firstOperand, secondOperand) => firstOperand / secondOperand,

        '=': (firstOperand, secondOperand) => secondOperand

    };



    function inputDigit(digit) {

        const {

            displayValue,

            waitingForSecondOperand

        } = calculator;



        if (waitingForSecondOperand === true) {

            calculator.displayValue = digit;

            calculator.waitingForSecondOperand = false;

        } else {

            calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;

        }



        console.log(calculator);

    }



    function inputDecimal(dot) {

        // If the `displayValue` does not contain a decimal point

        if (!calculator.displayValue.includes(dot)) {

            // Append the decimal point

            calculator.displayValue += dot;

        }

    }



    function handleOperator(nextOperator) {

        const {

            firstOperand,

            displayValue,

            operator

        } = calculator

        const inputValue = parseFloat(displayValue);



        if (operator && calculator.waitingForSecondOperand) {

            calculator.operator = nextOperator;

            console.log(calculator);

            return;

        }



        if (firstOperand == null) {

            calculator.firstOperand = inputValue;

        } else if (operator) {

            const currentValue = firstOperand || 0;

            const result = performCalculation[operator](currentValue, inputValue);



            calculator.displayValue = String(result.toFixed(2));

            calculator.firstOperand = result;

        }



        calculator.waitingForSecondOperand = true;

        calculator.operator = nextOperator;

        console.log(calculator);

    }



    function updateDisplay() {

        const display = document.querySelector('.calculator-screen');

        display.value = calculator.displayValue;

    }

    function resetCalculator() {

        calculator.displayValue = '0';

        calculator.firstOperand = null;

        calculator.secondOperand = null;

        calculator.currentValue = 0;

        calculator.waitingForSecondOperand = false;

    }



    updateDisplay();



    //code for button clicks

    const keys = document.querySelector('.calculator-keys');

    keys.addEventListener('click', (event) => {

        const {

            target

        } = event;

        if (!target.matches('button')) {

            return;

        }

        if (target.classList.contains('operator')) {

            handleOperator(target.value);

            updateDisplay();

            return;

        }

        if (target.classList.contains('decimal')) {

            inputDecimal(target.value);

            updateDisplay();

            return;

        }

        if (target.classList.contains('all-clear')) {

            resetCalculator();

            updateDisplay();

            return;

        }

        inputDigit(target.value);

        updateDisplay();

    });



    //code for keydown events

    document.getElementById("calcModal").addEventListener('keydown', function(event) {

        var key = event.key.toString();



        if (key == '<{$sepComma}>') {

            inputDecimal('.');

            updateDisplay();

            return;

        }

        if (key == '+' || key == '-' || key == '/' || key == '*') {

            handleOperator(event.key);

            updateDisplay();

            return;

        }

        if (key == 'Enter') {

            handleOperator('=');

            updateDisplay();

            return;

        }

        if (key == 'Delete') {

            resetCalculator();

            updateDisplay();

            return;

        }

        if (key == '0' || key == '1' || key == '2' || key == '3' || key == '4' || key == '5' || key == '6' || key == '7' || key == '8' || key == '9') {

            //alculator.waitingForSecondOperand = false;

            inputDigit(event.key);

            updateDisplay();

            return;

        }

        if (key == '<{$sepThousand}>') {

            //ignore thousands

            return;

        }

        //alert($key);

    }, true);



    //code for applying result to field of calling form

    $(function () {

        $("#btnApplyResult").click(function () {

            const display = document.querySelector('.calculator-screen');

            $result = display.value;

            $result = $result.replace(".", "<{$sepComma}>");

            document.getElementById("tra_amount").value = $result;

        });

    });

finally in my form I added a button to call the modal form:


$traAmountTray = new XoopsFormElementTray(_MA_WGSIMPLEACC_TRANSACTION_AMOUNT, '&nbsp;');

        $traAmountTray->addElement(new XoopsFormText('', 'tra_amount', 20, 150, $traAmount));

        $button = new XoopsFormButton('', 'calcAmount', _MA_WGSIMPLEACC_CALCULATOR);

        $button->setExtra('onclick="$('#calcModal').modal();"');

        $traAmountTray->addElement($button);

        $form->addElement($traAmountTray);

have fun

Stats
Goal:	$100.00
Due Date:	Dec 31
Gross Amount:	$0.00
Net Balance:	$0.00
Left to go:	$100.00

Forum Index

Cascading form select

Re: xoopsMailer and SMTP

XOOPS and cookies

xoopsMailer and SMTP

Re: UpConstruction Bootstrap v5.2.2

Re: wgDiaries 1.03 RC1 ready for testing

Re: How do i check a xoops smarty plugin exist ?

Next version of wgEvents

Re: no xoops in softaculous installer

Implement modal calculator

Login

Search

Recent Posts

Re: Tag module

Re: oledrion

Re: Tag module

Error with the search in this forum

Re: oledrion

Re: oledrion

Re: oledrion

Re: oledrion

Re: Tag module

Re: oledrion

Who's Online

Donat-O-Meter

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}